Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grouping custom templates in the templates list #48651

Closed
jameskoster opened this issue Mar 1, 2023 · 26 comments · Fixed by #57711
Closed

Grouping custom templates in the templates list #48651

jameskoster opened this issue Mar 1, 2023 · 26 comments · Fixed by #57711
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Accessibility Feedback Need input from accessibility Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Discussion For issues that are high-level and not yet ready to implement.

Comments

@jameskoster
Copy link
Contributor

jameskoster commented Mar 1, 2023

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:

Templates
Original issueThere 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.

@jameskoster jameskoster added [Type] Discussion For issues that are high-level and not yet ready to implement. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Mar 1, 2023
@jasmussen jasmussen moved this to Todo 6.2 in 6.3 Design Mar 16, 2023
@jasmussen jasmussen moved this from Todo 6.2 to Todo in 6.3 Design Mar 16, 2023
@annezazu annezazu moved this to 💻 Needs development in Gutenberg Phase 2: Customization Mar 16, 2023
@annezazu
Copy link
Contributor

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.

@jameskoster jameskoster moved this from Needs design to Needs feedback in 6.3 Design Mar 22, 2023
@annezazu
Copy link
Contributor

annezazu commented Apr 6, 2023

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
Copy link
Contributor

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
Copy link
Contributor

paaljoachim commented Apr 12, 2023

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
Copy link
Contributor

paaljoachim commented Apr 12, 2023

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

219344616-229a2ac4-6049-4459-95f7-66f3e03a0601

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

@jameskoster
Copy link
Contributor Author

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
Copy link
Contributor

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

@jameskoster
Copy link
Contributor Author

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

Templates

@jasmussen
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor

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

@jameskoster jameskoster moved this from Needs feedback to Needs dev in 6.3 Design Jun 26, 2023
@jameskoster jameskoster changed the title Grouping contextually related templates Grouping custom templates in the templates list Jun 26, 2023
@jameskoster
Copy link
Contributor Author

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

@bph bph moved this to 🗣️ In discussion, needs decision in WordPress 6.3.x Editor Tasks Jun 26, 2023
@jameskoster
Copy link
Contributor Author

Probably fine to punt.

@ndiego ndiego moved this from 📥 Todo to 🦵 Punted to 6.4 in WordPress 6.3.x Editor Tasks Jul 10, 2023
@annezazu
Copy link
Contributor

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
Copy link
Member

mtias commented Jul 10, 2023

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

@annezazu
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor

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)

@bph bph moved this to ❓ Triage in WordPress 6.4 Editor Tasks Jul 25, 2023
@bph bph moved this from Triage to Punted to 6.5 in WordPress 6.4 Editor Tasks Sep 8, 2023
@afercia afercia added the Needs Accessibility Feedback Need input from accessibility label Sep 12, 2023
@afercia
Copy link
Contributor

afercia commented Sep 12, 2023

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 jameskoster removed this from 6.3 Design Sep 12, 2023
@jameskoster
Copy link
Contributor Author

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

Custom templates are special group worth separating from regular templates.

@richtabor

This comment was marked as resolved.

@jameskoster
Copy link
Contributor Author

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
Copy link
Member

mtias commented Nov 8, 2023

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:

image

@jameskoster
Copy link
Contributor Author

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

Templates

@bph bph moved this to ❓ Triage in WordPress 6.5 Editor Tasks Nov 23, 2023
@annezazu annezazu moved this from ❓ Triage to 📥 Todo in WordPress 6.5 Editor Tasks Jan 5, 2024
@ntsekouras ntsekouras self-assigned this Jan 10, 2024
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 10, 2024
@github-project-automation github-project-automation bot moved this from 💻 Needs development to ✅ Done in Gutenberg Phase 2: Customization Jan 11, 2024
@github-project-automation github-project-automation bot moved this from Punted to 6.5 to Done in WordPress 6.4 Editor Tasks Jan 11, 2024
@github-project-automation github-project-automation bot moved this from 📥 Todo to ✅ Done in WordPress 6.5 Editor Tasks Jan 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs Accessibility Feedback Need input from accessibility Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Discussion For issues that are high-level and not yet ready to implement.
Projects
Status: Done
Status: Done
Status: Done
Development

Successfully merging a pull request may close this issue.

9 participants