Isolated edit view for Template Parts

This week I’ve been looking at ways to enhance the existing isolated edit view for Template Parts.

  1. In the Inspector, the “Block” tab from template editing view becomes a “Template Part” tab, akin to the Post / Page / Template tab, and the controls are migrated accordingly. This is potentially something we can expand upon in the future.
  2. The Top Bar indicates that the Header is being edited.
  3. A “< Back” button is revealed on the canvas which when clicked returns the user to the referring context
  4. The Template Part is inset on the canvas, clearly indicating its boundaries
  5. An input on the border of the Template Part allows users to test how it behaves at specific widths
  6. A drag handle provides a looser equivalent of the above for quick-checks
  7. A “Custom” option is added to the view options. This could even be something we bring to post and template editing in the future.

I believe there’s an exciting opportunity to bring the enhancements here to Reusable Blocks as well.

Discussion in on-going on github.

i2: On-canvas transition between content and template editing

The idea here is to display all block controls while editing content, but apply some kind of “disabled” visual treatment to them. Adjusting the opacity is probably easiest, but there are most likely other options to explore as this may not be accessible enough (color contrast). I’m keen to get the flow right initially and focus on these finer details later.

You can navigate directly to the template via the ellipsis menu on the block.

Alternatively, clicking any “disabled” control will open a dialog asking the user if they’d like to edit the template, and briefly reminding them of the implications of doing so.

The transition to template editing view is made clear via the UI changes proposed in #27849 (IE the inverted top bar). Let’s not dwell on that in this issue.

In template editing view the previously “disabled” controls are now enabled and you can make any changes you need to. However, the contents of the block (“Hello World!”) is locked since we are now editing the template. To get back to editing the content you can click the “← Return to post” link, or simply double click on the text.

Any changes to either the post or the template will be surfaced in the multi-entity save flow.

More discussion here.

Visually navigating templates

If a visually-driven experience exists for swapping out the template that is applied to the post or page you are editing for another one, it seems reasonable that a visually-driven experience for navigating between other template management tasks could also be useful.

The following concept explores a “mosaic” view of all the templates that exist at a site, and a simple user flow:

  • Entering edit mode for one of those templates
  • Quickly navigating to edit another template
  • Returning to the “mosaic” view.

The navigation panel is based on designs I worked on for WooCommerce, which have recently been adopted on the component level by the Gutenberg project.

More template switching

A follow-up iteration on my a design concept I posted earlier this week:

This version makes it simpler to switch templates when you already know which one you want to switch to. No need to enter a dedicated view, just select from the dropdown.

I intend to explore how this same pattern might be applied to template parts. You can imagine it working well for switching between different headers.

This concept has also been shared here on github.