Site Editing: Explore a pattern for template part editing that is consistent in both content and template editing contexts

[jameskoster]

As we work out exactly how the UI will respond when users move between editing content and template, we must be mindful of the fact that template parts are also independent entities in their own right.

While editing a post with the full template visible (#27847), it may be that users do not need to fully engage template editing mode to modify the contents of a template part.

We should therefore explore consistent pathways and experiences for template part editing, that are agnostic of the aforementioned contexts.

[jameskoster]

we must be mindful of the fact that template parts are also independent entities in their own right.

To expand on this a little – it is important that the user is able to understand that editing the Header of their Index template part could also affect the Header of all the other templates that exist at the site. Or at the very least have a clear understanding that they are editing something different. This is not obvious at present, since folks are able to fluidly move between editing general template blocks and blocks inside a template part.

We have some small visual hints in the UI (the template part chip in the top bar, and the template part outline) which go some way to highlight when a user is interacting with a template part, but they are easily missed and do not convey the scope of the actions.

One way to expand upon these subtle hints would is to implement an isolated-only editing experience for template parts. That is to say, you cannot directly flip between editing something in the Header, and then something in the general template area. By adding just a little friction we create opportunity for the user to understand that they're about to engage in a unique experience.

Here's a quick video of a prototype demonstrating how it could work:

template.part.mp4

• Regardless of where the user clicks on the template part, doing so will always select the template part itself – not the inner-blocks
• If the Inspector is open on the block tab, information about the template part such as its name and description will be displayed here, along with some generic educational copy to explain what template parts are. We could even include a link to documentation if necessary.
• From here there are three ways to begin editing the template part itself:
  1. Via the ellipsis menu in the toolbar
  2. Via the "Edit" button in the inspector
  3. By double-clicking the template part
• When editing the template part an overlay (or other visual treatment) obscures elements outside the template part, and the template part name is exposed in the Top Bar
• Blocks inside the template part can now be directly manipulated
• The Inspector now indicates that the user is editing a template part rather than the post. Options specific to template parts now have a home!
• To get back to editing content there are two options:
  1. Click the overlay
  2. Click the "← Return to post" link at the top of the canvas
• All changes will be saved as a part of the multi-entity save flow

One nice thing about this entire flow is that the experience can be transplanted in to the template editor as well, and function in exactly the same way.

[jameskoster]

Having taken a close look at the excellent work that has recently been done in #32464, and subsequent explorations in #33988, I'm thinking it would be best to try using the Reusable Block patterns for template part editing. IE:

• Click-through overlay (this part is done – although there is a bug – Click-through pattern not behaving as expected for Template Parts #35079 😭 )
• Save button on the toolbar
• Snackbar on save
• Dots to indicate unsaved changes

This will hopefully simplify the solution to this issue dramatically :)

[jameskoster]

I think we can close this since focus mode exists :)