Site editing: Template part interactions

[jameskoster]

Across many different github issues there have been deep threads of conversation – and designs presented – for a multitude of interactions that users can have with template parts in the Site Editor.

As those designs approach maturity, I wanted to bring them together in to a single conversation so that we can get a sense of how cohesive everything feels, and iterate further if needed.

Template part clarity

Here we can use the suggestions in #25085 to expose the template part name in the top bar when hovered.

As an addition I'd like to discuss whether selecting a template part should spotlight and outline it as well. I think this can be particularly useful for situations in which multiple instances of the same template part are present on the canvas.

The template part name in the top bar can be clicked to select it on the canvas. This is handy if you happen to have selected a deeply nested inner block.

All of this combines to clarify:

• Template part boundaries
• Which template part(s) are being edited
• The affect of editing a template part when there are multiple instances of it in the current document

Communicating this effect in a figma prototype/animated gif is a little tricky, so I made a (very) crude codepen for us to play with it some more.

---

Reverting changes

It should be possible to revert template parts to their default state if they have been edited.

In other issues (#23421) the existing blue dot pattern has been posited as a pathway to revert changes to top level templates.

With the template part name visible in the top bar (even when inner blocks are selected) we've an opportunity use that same pattern for template parts. With reverting becoming more prominent as features like global styles come online, I believe there is a lot of value in creating a consistent pattern for this behaviour.

---

Template part actions

Reverting and switching are two actions a user can apply to a template part, but there are others to consider such as renaming.

Currently renaming occurs directly in the toolbar:

I'd like to propose the idea of grouping all actions together in a dedicated menu that is accessed from the template part toolbar. Here's a quick demo:

This creates a scalable pattern that plugins can extend as needed, without polluting the toolbar.

---

These designs are not final. I'd love to find consensus around the flows and the iA, and then refine the details once we've merged something usable :)

[jeyip]

Link to previous discussions for more context

[jameskoster]

Adjusted the prototype a little based on feedback.

[paaljoachim]

Visual hints.

Template part clarity.

It creates a good overview when hovering over a section (probably clicking as well) showing the Search template - Post content. I am though wondering what the chevron is for.

I do think it also gives a good overview when selecting a template part that it automatically shifts to spotlight and outline. As it shows the template area. One might want to double click a Post content area to enter editing mode of the post.

---

Reverting changes

This seems a little more tricky and harder to handle for a user.
What about using undo/redo left and right arrows for these template changes?
Another option would be to bring in a kind of history state into the right sidebar settings. As there can be a panel that gives an overview of adjustments made (much more complex something to perhaps think about down the road).

---

Template part actions

The drop down.

Shows too much information directly in the toolbar. Too much is happening in the drop down. It would be very helpful to move these into the right settings sidebar associated with the selected object. As in Gutenberg one places the most important and most used options in the toolbar and everything else in the sidebar.
Anyhow the popup on popup I believe is a big no no when it comes to accessibility.

Bottom line is this:
Let's work on reusing Gutenberg UI patterns. Such as an object that is selected will have settings available in the right sidebar. This same UI pattern should also be used for Full Site Editing. Move various options as I mentioned to the settings sidebar. Keeping a consistency with Gutenberg.

[jameskoster]

What about using undo/redo left and right arrows for these template changes?

This is fine for the current session, and would work as expected. But we also need to consider that users might want to revert a template part in a different session to the one in which the edits were made.

I'm totally with you on the reuse of patterns. But I would question whether these actions (switching and resetting template parts) are secondary. In the context of site editing I believe there is a case to be made that these (switching and resetting in particular) are primary actions, and should therefore be present in the toolbar.

[paaljoachim]

This is fine for the current session, and would work as expected. But we also need to consider that users might want to revert a template part in a different session to the one in which the edits were made.

What about keeping a track of the template changes directly in a template sidebar settings panel.

Regarding really any setting associated with a block or the layout as I see it will very likely have a setting in the right sidebar. It will of course very depending on the options present. What is seen and how these are presented.
The toolbar should contain the options that are used the most, and that would mean going through template options selecting which options to place in the toolbar and which to place in the sidebar. So perhaps switching and resetting a template would be seen as you say a primary action, and one can keep these in the toolbar.

Regarding the W - left sidebar vs the right settings sidebar. In general I would say place the options in the right sidebar. Where one can also add in the navigational elements seen in the above animated gif. The W - left sidebar as I mentioned can be used with items associated with the left wp admin menu today.

[jameskoster]

What about keeping a track of the template changes directly in a template sidebar settings panel.

Seeing as the template part will be a post type in its own right, I believe this functionality will be inherent through the Revisions feature when editing the template part directly. The revert feature in the context of this design is basically a shortcut to go back to the original revision.

[jameskoster]

With #27714 merged I think we can close this for now.

Handling multiple template parts, and reverting template parts can be handled in separate issues.