This week I’ve been looking at ways to enhance the existing isolated edit view for Template Parts.
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.
The Top Bar indicates that the Header is being edited.
A “< Back” button is revealed on the canvas which when clicked returns the user to the referring context
The Template Part is inset on the canvas, clearly indicating its boundaries
An input on the border of the Template Part allows users to test how it behaves at specific widths
A drag handle provides a looser equivalent of the above for quick-checks
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.
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.
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: