Template Part Focus Mode

[mtias]

This issue tracks short-term work to be done on what has been referred to as "isolated template part" mode. This is a view that just focuses on a single template part (like a header) and is available for any template part. It also outlines the role this will play as part of turning existing widget areas into block template parts. This last part is only tentatively written and is not scoped out pending research on both the widgets work and the navigation screen work.

Design overview: #29148.

• The editor canvas should isolate the Template Part (visually inset on the canvas to illustrate its boundaries).
  • Have a clear way to go back / out of the focused view. (Add back button for isolated template part editor #34732)
  • Ensure canvas height matches contents. (Template part editor: adjust height to contents #35512)
• Template editor canvas should be resizable for viewport previews #35249
• Isolated template part editing should be accessible from:
  • List view as an icon button.
  • The Ellipsis in the Template Part toolbar. (Add edit template part menu button #34679)
  • The Sidebar Menu.
• The Template Part name should be visible in the Top Bar, mimicking the Template editing UI. Add template areas to template details #35202
• Full site editing: The UI should provide a way to revert a template part to its default state #29687
• Template parts that are assigned to areas should use the relevant area icon (header, footer, sidebar). Add template areas to template details #35202
• Clicking the gray background should deselect blocks. Site Editor: Clicking the gray background should deselect all blocks #35753
• In the Inspector, the settings for the Template Part should be visible in the document tab. (Relevant [FSE] Show Template Part color settings when in isolated mode #30641.)

Followups

Once the internal UX of editing template parts isolated from their containing template is in a good place, research should continue on how should existing widget areas transition to more ergonomic template parts.

[draganescu]

The canvas should be resizable with a drag handle. (See pattern directory previews.)

@mtias / @jameskoster what is the use of this handle to resize? I see in later designs in #29148 that it went away.

[mtias]

We want to introduce viewport resizers through template parts to then scale it up to the whole editor for responsive previewing. (Similar to the pattern directory.)

[noisysocks]

Hi! @kevin940726 and I are going to start working our way through this list.

Quick question: What do you mean by "should be accessible from ... The Sidebar Menu"? What is the sidebar menu?

[draganescu]

What is the sidebar menu?

It's the menu that appears when clicking the "W" logo when editing a block theme.

[kevin940726]

What is the sidebar menu?

It's the menu that appears when clicking the "W" logo when editing a block theme.

Oh okay I guessed it wrong 😅. I thought it's the right sidebar (inspector).

Isn't the editor already accessible in the sidebar menu then?

[mtias]

Yes, it was checked in the list but seems to have been unchecked since :)

[kevin940726]

In the Inspector, the settings for the Template Part should be visible in the document tab.

As mentioned in #30641 (comment), I don't think this is possible now. I think we should mark it as wont-fix until we have a proper solution to the underlying architecture?

[noisysocks]

List view as an icon button.

I checked this one off now that #35170 is merged meaning you can edit a template part via the ellipsis button in a List View. Perhaps we can revisit having a dedicated icon after WP 5.9.

[noisysocks]

I think we can close this out now that #35512 is merged. No doubt there's plenty more to iterate on but I think things are in good shape for WP 5.9. Really nice work @kevin940726 and @jameskoster! ❤️🎉

[mtias]

Excellent!