Gutenberg: Site Editor: Improving UX when modifying site editor blocks

[jeyip]

Problem

Blocks like site icon, site title, and site description blocks:

1. Pull information from different data sources than normal blocks (like paragraph, heading, etc.)
2. Will, when updated, modify _all_ instances of the block, including where it exists outside of this view in the site editor. This in contrast to, for example, a paragraph block, which _does not_ modify other paragraph blocks in different views.

The existing site editor UI doesn't indicate that these blocks behave differently than traditional blocks. It seems like we could find better ways to set expectations with the user and let them know that modifying certain elements of their page causes broader changes on their website.

[jeyip]

@noahtallen, @Addison-Stavlo, and I are planning to tackle this as part of our efforts to improve the editing experience for the site editor. @MichaelArestad @shaunandrews @dubielzyk we're looking to kick off discussions here. Do y'all have any thoughts or opinions on this?

[mtias]

Not sure I agree they should be different in the editing view. The "update design" flow is meant to highlight those things. To the user, the distinction between global and local is going to be elusive. Local blocks like a paragraph can also suddenly become global if they are placed within a template area or a reusable block.

[Addison-Stavlo]

Local blocks like a paragraph can also suddenly become global if they are placed within a template area or a reusable block.

There is a bit of a distinction here though, its not the same level of being global. Updating a paragraph in one of these areas may change that paragraph on other pages that use that same template or reusable block, but will not bleed over to any other templates or reusable blocks. If a Site Title block is in one of these areas it will still change it for all templates, reusable blocks, or anywhere else it is ever used.

[shaunandrews]

It seems like we could find better ways to set expectations with the user and let them know that modifying certain elements of their page causes broader changes on their website.

As Matias mentions above, the intention of the Update Design flow is to help people understand the affects of their changes.

Adding some specific UI to these sort of "global" or "site meta" blocks is more likely to confuse than help.

[vindl]

Not sure I agree they should be different in the editing view. The "update design" flow is meant to highlight those things.

Updates to site blocks are not shown in "update design" flow now. If we add them the list might become too crowded. Also currently it's not easy to differentiate Site Title and Tagline from Heading and Paragraph blocks at a glance. The only cue is in block breadcrumb which is easy to miss.

[Addison-Stavlo]

Updates to site blocks are not shown in "update design" flow now.

There are some cases where they are (although not as intuitive as they could be). For example changing the site title shows up there:

But when we first added this in it was seen as too overwhelming and cumbersome to have the entire list of changed entities visible by default. Therefore we updated this flow to hide this info by default (following @MichaelArestad suggestion IIRC) and only show it if the user wants to take that extra step to 'review changes'. This means the insight provided here may be easily missed and skipped over by users who just go ahead and hit 'save':

[vindl]

There are some cases where they are (although not as intuitive as they could be). For example changing the site title shows up there:

I retested the flow before the comment to make sure and didn't notice it at the time, but now I see it. 🙃

[shaunandrews]

We _could_ surface site-related blocks (or some set of "important" changes) in the Update Design flow.

[Addison-Stavlo]

We could surface site-related blocks (or some set of "important" changes) in the Update Design flow.

Yeah, that is a possibility!

Summarizing some slack convo with @mtias and @MichaelArestad for visibility:

We may be a bit early in the process to tell how much of a problem this really is or isn't, and there are definitely some other areas that might be more important to focus on for the time being. Its definitely good to think about this, but probably best to revisit after first focusing on making the editing experience clear and easy to navigate regarding the larger chunks in the template ( the template area, the post content area, the template part, etc.)

[noahtallen]

surface site-related blocks... in the Update Design flow.

I think this could solve the (foreseen) problem with some tweaks to the save flow:

• Perhaps not hiding them behind the button by default (otherwise the beginners who would most need the information won't find it)
• Maybe with some updated designs to help visualize exactly where these changes are being applied. I think just saying "site" doesn't totally communicate it for me. Maybe we need some info tooltips you can click on to learn about it more

[mtias]

And just for the record, showing things like site title in the saving flow was the main point of showing the entities there, it wasn't just for templates and parts. :)