Ensuring local content is not added at the global scope, and vice versa #55025
Description
The site editor is now a space where you can now edit your post/page content within the context of a template, giving you a more complete and accurate view of what your site visitors will see. However, this does mean we need to ensure we are clearly communicating the distinction between what is global what is local so as to minimise the likelihood someone adds content to the wrong place.
We have noticed this is a common pain point particularly for end users who may be less technical.
There are four opportunities to improve clarity.
1. Highlight what's editable
At the moment, when editing a page with the template visible, we do not do a great job of highlight which blocks are editable at the local/page level. For example, the post title block, featured image, and post content. This increases the chances of "selecting" a block that exists outside the local scope, which creates possible pathways into the global.
template-edit-selection.mp4
2. Increase the prominence of the post content block when empty
When editing a page with the template visible, the current empty state of the post content block is a single empty paragraph. This is fine for posts that more orientated towards writing, but depending on the layout of your pages, it can get lost amidst everything else in the template. The hypothesis is that if we put more emphasis on the content block when empty, and provide shortcuts to patterns, it will lead to a higher chance of content being added there instead of the surrounding template.
3. Greater visual distinction when editing globally
When switching to editing a template from a page we change the toolbar title to purple but other than that we don't do a lot to tell a user they are about to modify something that may affect more than one page/pattern. Adding stronger visual indicators (along with improved empty states like the above content block) will alleviate this.
- Replicate "focus mode" when to a template from a page (padding around editor)
4. More obvious pathways between local and global scope
When in a site building state you often need to switch quickly between local and global as you refine how the two work together. There are three main ways of doing right now: via the command palette, via the template dropdown within the inspector, and via the toast notifications when clicking on a template. These pathways also act as indicators themselves as to which scope a user is currently in. What can we do to make switching contexts more efficient and visible?
- Treat "template" much like a synced pattern in that it can be "selected" which provides an edit action in toolbar
template-edit.mp4
- Show template blocks as locked when in the page scope
Original issue
Currently, very subtle distinctions exist between editing a template vs editing a page when in the Site Editor > Pages experience as shown below:template.UX.mov
You can see a notice about entering different modes and the Top Toolbar slightly changes but, beyond that, it's a drastic difference. Since the start of the Site Editor, a lack of distinction between editing templates vs content has led to confusion and incorrect actions on the part of users. For example, removing the post content block without understanding the full impact, often because the different views aren't clear (and the post content block doesn't look like their content!).
I know a lot of thought went into the notices and changes in the Top Toolbar but I wonder if we should consider something more drastic, similar to what we see in other applications like Keynote. We could also reuse the grey background experience that’s visible in template editing or incorporate more of the purple already used for the template parts to indicate when editing a template how it impacts more than just that page.
Curious to hear more thoughts from @WordPress/gutenberg-design and to see how we can continue to iterate here.