Refine template flows in the post editor

[jameskoster]

Template exercises in relation to a single post are accessed through the following interface(s):

There are a number of issues we might try to address by revamping the design a bit here:

• Provide visual previews when changing template (block templates only).
• Offer a search affordance in the template selection UI when there are many templates to choose from.
• When creating a template allow the user to specify whether that template is $custom or specific to the current post (post-$slug).
• Fix template duplication (Template selector: Active template is duplicated in options #31531).

Edit: Working Figma file here.

[mtias]

This is also a place to explain a bit what a template is or allows.

[carolinan]

I liked the Figma example of the modal, but also the preview of the current template in the template section of the document sidebar.

[jameskoster]

Here are some initial ideas for the flows/UI. Inline with #27093 I've moved the Template panel to the top bar in an effort to reduce reliance on the Inspector, and make moving between post/template editors feel smoother. I think this works well, but it's also worth noting that the overall UI could just as easily live in the Inspector instead, if that was a preference.

Changing a template

change.template.mp4

• The current template is displayed as a preview.
• Change template is the most prominent action.
• Available templates are displayed in a modal which can scale to accomodate many templates. Legacy templates have no preview. Search can be exposed when there are more than x templates.

Editing a template

edit.template.mp4

• Edit template action is found in the "Advanced" section of the template panel. This section will only be visible to users with appropriate permissions.
• A short description forewarns users that changing the template can affect other documents.
• Clicking the page title in the top bar exits the template editor and returns you to the post editor.

Create a new template

create.template.mp4

• New template action is also found in the "Advanced" section of the template panel.
• The new template modal allows you to specify a name, and provides options to:
  • Apply the template immediately.
  • Begin editing the template once its created.
• A preview is also included to help set the scene. In the future this could be used as an affordance to allow folks to select an existing template as a starting point.
• A snackbar confirms the template has been created, and offers a shortcut to edit it.

Moving between content / template editing

flows.mp4

This video concentrates solely on the flows for moving between the post and template editors. When editing the template it is possible to get back to the referring post two ways:

1. Click the page name in the top bar.
2. Open the template details popover and click the page title in the "Usage" section therein.

Method 1 will likely be implemented much sooner than method two. This replaces the existing "<- Back" button in the Template editor.

[youknowriad]

I don't know but I personally don't like that dropdown under the template title entirely. I think it's a bad non discoverable pattern and it splits the "document" settings between two places. I believe we should continue iterating the UI in its current place (the panel) until we move everything (all document settings) to the dropdown potentially.

[ghost]

It looks beautiful, but I agree with @youknowriad on keeping it in the Inspector. Maybe make it toggle to the top bar when you go to full screen mode.

[jameskoster]

I believe we should continue iterating the UI in its current place (the panel) until we move everything (all document settings) to the dropdown potentially.

No objection to that from me. As mentioned above, this whole UI can live inside the Inspector for now if necessary:

[youknowriad]

The other thing worth mentioning is that not all the templates are previewable. That select mixes block templates and non block templates in classic themes.

[jameskoster]

Worth noting that putting this UI in the Inspector does marginally degrade the post <-> template editor UX (compared with the top bar implementation) due to the inconsistent placement of the pathways, as this video demonstrates:

edit.template.mp4

The other thing worth mentioning is that not all the templates are previewable. That select mixes block templates and non block templates in classic themes.

I demonstrated how we can (potentially) handle this in the template selection modal:

We can easily refine that preview thumbnail to include an explanation if y'all think that'd be helpful.

[youknowriad]

I wonder if the templates with "previews" is going to be the special case when using classic themes in which case we may want to use a regular "select" for these themes and maybe the visual templates for FSE themes.

[jameskoster]

I think that will certainly be the case. But as soon as a single block template exists I think it is worth showing the previews as they clearly communicate the user-friendliness of block themes in stark contrast versus classic themes. It's like GUI vs command line :D

we may want to use a regular "select" for these themes and maybe the visual templates for FSE themes.

I think that's fine when no block templates exist at all. The designs above could be adapted by replacing the template selection modal with a popover (or regular select dropdown), and hiding the preview in the panel itself:

Editing and Creating new template flows can behave the same.

[mtias]

What would be the flow for creating a template specific to a category slug?

[carolinan]

I have heard several users say that they want to edit the categories using blocks in Admin > Posts > Categories > Description field.
I think that the connecting that interface with the new is important.

[jameskoster]

Yes that would seem like a good interim step – connect the category management screen with the site editor. But ideally it should be possible to access a category (or any archive for that matter) from within the site editor. Both of these things feel like separate issues to me, since this one focusses on templates applied to single entries in the post editor.

Edit: I just remembered that I opened #35504 a while back :)

We'll probably also make it possible to add a template for a specific category slug via the main template management view as a part of #37407.

[jameskoster]

I've been looking at the various template related issues as we organise the tasks in #41241. As a part of that effort this issue has been distilled down to just two tasks:

• When creating a template in the post editor ask whether that template should be $custom or specific (page-$slug)
• Provide a more visual template handling experience

This issue has prior art that is no longer relevant, so in the interest of tidiness I'm going to close it out in favor of dedicated issues for the aforementioned tasks.