Grouping custom templates in the templates list

[jameskoster]

Custom templates are somewhat unique as they can be applied manually to multiple post types, rather than automatically according to the template hierarchy. This makes them worthy of some separation in the templates list:

Original issue

There have been a few issues (https://github.com//issues/44302, https://github.com//issues/42325, https://github.com//issues/48589) where the idea of grouping templates has come up. Doing so would enable a couple of practical use cases in the near term:

1. Improve the presentation in the list in the Site Editor's Templates panel (e.g. Improve organization of templates to reflect importance/hierarchy #44302 (comment)).
2. Delineate the purpose of some confusing templates like Home
3. Allow us to simplify the Add Template menu which gets very long as you add more plugins

My initial thought would be to use post types as a primary grouping method, with some ad hoc groups for certain core templates. Example:

Pages	Blog / Posts	General	Custom
Front Page Page Attachment † Privacy Policy	Home Single Post Category Tag Date Author	Taxonomy Archive Singular Search 404 Custom	Any custom templates

† I believe attachments are technically posts, but Pages feel like a better fit, in my mind at least.

I think this method can scale quite nicely to accommodate custom post types. It also opens the door to much simpler feature toggling in the future. For example adding a Blog to a site that doesn't already have one could be a single action that adds Home, Single, Category, Tag, Date, Author all at once. By extension it could even be a gateway to a UI for creating custom post types / taxonomies.

Before we can enable any such refinements/actions in the UI, I presume we'll need to install an API, and of course decide on how to group templates. That's what this issue is for. The above is only an initial suggestion to kick off discussion.

[annezazu]

Let's both iterate on this from a dev standpoint and continue the discussion here as things evolve! Adding to the needs dev section of phase 2.

[annezazu]

This came up as a point of confusion once more in the FSE Outreach Program's Build a Block Theme exploration:

I find the list of templates a bit confusing. It should show the most common ones in the top. Less used further down. Here it shows in an alphabetical order. There should be hints along the way to help users get to the correct template.

[jasmussen]

What's a good next step to get momentum here? Should we dive into a proof of concept branch? We do know we need the categorization, so perhaps getting a feel for it in a branch is a good start?

Categorizing according to post types seems good to me. For me personally the main thing I'd like to see is not having 404 being sorted at the top :)

[paaljoachim]

Should we dive into a proof of concept branch? We do know we need the categorization, so perhaps getting a feel for it in a branch is a good start?

That sounds like a good idea Joen!

[paaljoachim]

Adding in the concept shared by @jameskoster here:
#44302 (comment)

This is a nice and well structured way to view templates.

[jameskoster]

It's a bit tricky because the UI where the groupings will appear (IE the dark material) is somewhat in flux.

The list in the screenshot above may transition to be "Recent templates" to avoid duplication with the template management view. See the video below for an example, or try it yourself in @SaxonF's pages-list branch.

recent-templates.mp4

Another candidate would be the Add Template menu, but even that might change now that we have the panels in the dark material, see: #41060 (comment)

---

I still think the groupings have a place (filtering the management view for example) but it's probably worth aligning on the designs / flows above before committing too much time.

[jasmussen]

There seems to be some overlap with #50418 and this one. In light of that, what's a good next step, designwise?

[jameskoster]

At the least, I think it would be useful to separate custom templates in the main list:

[jasmussen]

Looks good, but the subheading is almost invisible there. Can we add some extra spacing above it to make the separation more clear? I also may be misremembering how we style those subheadings, is it always the same color? I could swear I saw a darker colored version somewhere.

[jameskoster]

More spacing seems reasonable 👍

Regrettably all the colors are still up in the air 🙃 For now the title should match whatever color is used in panels such as Page details. We can always circle back and polish these details after feature-freeze.

[jasmussen]

I think you can go big with the spacing though. Scrolling works well and breaks up the long list into chunks.

[jameskoster]

I've updated this issue to narrow the scope right down to separating custom templates.

[jameskoster]

Probably fine to punt.

[annezazu]

I don't agree on punting this. It's a really bad experience that 404 is at the top. I'll try to track down a dev but can leave for now.

[mtias]

What happened with the slight title rename so that it'd be Page: 404 or something like that?

[annezazu]

Tracked that down and it looks like it should have made it into beta 1 but somehow it doesn't show correctly with beta 3. Commented on the initial PR that handled that change: #51428 (comment)

Confirming we can remove this from 6.3 but that we will need to track this down otherwise. It's on my list.

[jameskoster]

I don't agree on punting this. It's a really bad experience that 404 is at the top. I'll try to track down a dev but can leave for now.

Just to be clear, this issue is only about grouping custom templates together.

[annezazu]

For context, I was asked to consolidate this prior issue around the 404 template placement here so I think it's a bit of a broader encompassing issue at this point: #48697 (comment)

[afercia]

this issue is only about grouping custom templates together.

Grouping the custom templates togther and adding a title (heading with proper level) above the group would certainly help also accessibility.

However, that would de facto leave the UI with two groups:

• custom templates, preceeded by a heading
• the other templates, with no heading to explain what they are

This is not about visuals. It's about structuring content in a meaningful and semantic way. If we are going to make two groups, both should have a heading.

A small note: Please remember to mark any issue that touches content structure, headings, and such with the accessibility or the needs accessibility labels. Thank you.

[jameskoster]

The other templates are already underneath the main panel heading "Templates". Is that inadequate?

Custom templates are special group worth separating from regular templates.

[jameskoster]

I think we explored that before, but the added clicks (both drilling down and up) made it feel a bit awkward.

There's a balance to strike between this view and Manage templates. At the minute there's quite a bit of overlap given this list is strictly ordered and includes all(?) templates.

We also have the Grid data view to consider – would it be better if the Templates screen was more like the Patterns one? IE a grid on the right and categories (like you have in your mockup) on the left.

[mtias]

I'd like to see an exploration that prioritizes a heading for plugins registering blocks, similar to plugin categories in the block inserter. ideally tied to the APIs we offer for registering templates in the first place. For example, Woo's templates would be under a "Woo" heading; same for plugins like "Sensei" or Newsletter Glue". This is certainly hard to reason about:

[jameskoster]

I think the design in the OP can handle plugins as you describe. E.g: