Edit site: Template part focus styling

[MichaelArestad]

It should be obvious when a user starts editing a template part as these changes impact any page using the template part. I propose we add a focus state when editing a template part or its contents.

Note: My mockups are a frankenstein of low-fi mocks and some newer styles. They're not to be taken literally as much as convey an idea.

Here's a rough example to give you an idea of what I'm referring to:

Here's a quick prototype of what I'm proposing.

And a big old gif of the prototype:

@epiqueras would you be interested in tackling this? I can help with styles.

[epiqueras]

Yes, and we should also have this for blocks such as the Post Content block because it has the same inner block saving mechanics.

[MichaelArestad]

@epiqueras exactly!

[karmatosed]

What about this on navigation? That block has some complexities might be easied by a focus.

[johnstonphilip]

Could this help us avoid the need for this pop-up (which I've found really confusing)?

Perhaps when popping into-focus a new set of Publish/Update controls appear that are specific to that template part, and the only way to get out-of-focus is to either update it, or cancel.

[epiqueras]

I don't think that is the right solution. You would be forced to edit global areas sequentially and would lose the ability to make edits in parallel and publish them all at once.

This can be bad for UX but can also outright break sites where it is essential for a set of edits to go live together.

[johnstonphilip]

Hmm. I disagree that attaching and publishing multiple different contexts in a single user action is a good UX. I think the user will be very lost and unsure about what step they are actually taking. If you need to push a set of changes live all at once, I think the best route is to use a staging site.

[epiqueras]

That would be way too involved for such a typical operation: E.g., changing header and footer background color in one go.

[johnstonphilip]

@epiqueras I'm not sure if I understand what you mean. Can you elaborate?

[epiqueras]

On which part? I'm saying that having to use a staging site to change multiple template parts at the same time is way too involved for such a typical operation.

[BMO-tech]

It seems like making edits to multiple sections (template and template parts) and then being prompted with a popup of "What do you want to save" is also a complex pattern/UX for the average user. Perhaps the better experience when clicking "save" is that items that were edited simply save; and an "Undo" option is available (as is provided by Gutenberg already).

Also, the save behavior doesn't seem to be relevant to this issue; rather just a visual representation that a specific template part is being edited.

[epiqueras]

Some sort of pre-publish flow is needed. You should be able to decide what set of changes you want to publish.

Perhaps the better experience when clicking "save" is that items that were edited simply save; and an "Undo" option is available (as is provided by Gutenberg already).

That would be a very bad UX, users could be unaware that they are making site-wide changes, and then come lots of questions related to whether undoing is global or specific to some part.

Also, the save behavior doesn't seem to be relevant to this issue; rather just a visual representation that a specific template part is being edited.

They are related if this gives the idea that the pre-publish flow isn't needed.

[MichaelArestad]

Some sort of pre-publish flow is needed. You should be able to decide what set of changes you want to publish.

Perhaps the better experience when clicking "save" is that items that were edited simply save; and an "Undo" option is available (as is provided by Gutenberg already).

I think we should pursue both routes. I share concerns that users won't realize they are making site-wide changes, but I am not confident that my concerns match reality. In using other site builders or similar applications, there is usually just a save/publish button that indiscriminately publishes changes. Is this the best for users? That remains to be seen. We can work this out as we iterate on the save/publish flow.

[MichaelArestad]

I'm thinking we should probably shelve this for now in favor of just using the usual block focus styles and revisit if deemed necessary or useful later on.

[epiqueras]

#21522 makes this less crucial too. Closing for now.