Update the add template menu

[jameskoster]

In the run up to the 6.2 release template descriptions were made more verbose given the available real estate in the new detail panels:

Consequently the add template menu became extremely long and unwieldy. As a short-term solution the descriptions were removed from the menu items and placed in a tooltip:

But this is not an ideal solution. It would be good to explore alternative options.

[jameskoster]

Given the creation of many templates invokes a modal where where you choose the scope for that template, it might be good to embrace the modal UI for the entire flow:

cc @WordPress/gutenberg-design

[jasmussen]

I think this looks good, and works better than the tooltips. The nice and big buttons make the creation act feel as substantial as it should be.

How do you feel about those borders? Do you think it could potentially work with the gray borders, but no borders and blue background on hover? Mainly we have to consider the 1.5px focus style. From the 3 steps in that modal it would also be nice to unify the style, e.g. the last one suddenly omits borders where the two first steps have them.

One last thing, I wonder if there's a way to have the modal keep the same size across all three steps, so it doesn't have to resize that much and make you lose your place.

Nice work!

[jameskoster]

If we got rid of the borders we'd need to tweak the padding to get the alignment right, but that shouldn't be a problem. It would be nice to remove them to be consistent with other buttons like blocks in the Inserter.

Fixed dimensions for each step would be nice I agree! It's a bit tricky to balance given the contrast in grid contents, but something like this could work:

I removed the icons too. They're not canonical and given our plans for the document title not all that helpful either (more context).

[jasmussen]

I actually meant remove the borders on hover, but keep the gray ones on resting state, and 1.5 blue on focus.

[jameskoster]

I kind of like removing them, to be consistent with Inserter buttons, etc.

[jasmussen]

It's mostly that "All Pages" big button in the center, which is just kind of hanging there in space. Besides with the gray borders, they'd still be consistent with the light-weight style variation buttons.

[paaljoachim]

The thing with the second image is that one clicks the + sign and associated modal/drop down which is connected with the same location is seen. If a modal can become a kind of hybrid drop down meaning one clicks somewhere and the modal shows up connected to the same location on the screen then that would be helpful.

I would in a sense call the following modals located in the same area one clicked to activate these.
These give a sense of connectedness/association with the initial click to open something. It reminds the user where the drop down was initially triggered.

So let's work on connecting trigger with trigger result. Having a closeness where that is possible. As it strengthens the association of trigger and trigger result.

[tomxygen]

I was experimenting with the full site editor and stumbled upon an issue that doesn't make sense to me.
Let's say I have a blog where I publish two types of posts: book reviews and movie reviews. The two types of reviews are quite similar in their structure but require slightly different templates.
While experimenting with the site editor, the first thing I did was go to the site editor, then to templates, and clicked on "Single: Item post". I made the desired changes, saved it, and then did it again for the other type of review.
After that, I created a new review and noticed that I couldn't assign the review to the new templates I had created. It took me a while to figure out that I shouldn't choose "Single: Item post", but instead had to choose the Custom template, rename it, and then style it as desired.

It is not clear that when you select "Single: Item post", then select "for a specific item", then you can't extend that template to other posts later. I think it should be made more explicit.
Instead, it's clear that, when selecting "for all items" it applies to all the posts.

In my opinion, the best scenario would be to change the behavior of the "for a specific item" that allows to create a template that can be applied to other posts as well, when creating the new post.
Otherwise the "for a specific one" should be explicitly stated that it won't be possible to apply to other items in the future.

Also it is not clear that "custom template" is the best option to create a template that can be applied to specific items.
Furthermore, when creating a custom template, I have to build the custom article (for example) from scratch, instead of having it already pre-made like with "Single: Item post".

And also, having the "duplicate" option to easily duplicate custom templates would be great when I need to create custom templates that have few differences from one another.

As an experienced WordPress user, it took me a while to figure this out because it is very counterintuitive.

[jameskoster]

It's mostly that "All Pages" big button in the center, which is just kind of hanging there in space.

Did you try the PR?

In a single screenshot I agree this looks a bit off, but in practise I don't find it too bad. The big hover interactions the button footprint pretty clear.

Perhaps there's another way to lay out these buttons? Stack instead of Row? 🤔

@tomxygen that's good feedback, thanks. Perhaps when you create a new template for Single item: Post we should present three options:

1. For all posts
2. For a specific post
3. To be used by any post ad hoc (with better wording of course).

It's probably worth opening a new issue describing this problem if you have the time.

[jasmussen]

In a single screenshot I agree this looks a bit off, but in practise I don't find it too bad. The big hover interactions the button footprint pretty clear.

I did try it, and it's a big improvement. I'm not opposed to shipping. But even with the big hover, this one sits in the air:

It's a bit easier with this list, but even there it isn't clear why the text of the items don't line up with the text above:

I thin I'm still leaning towards a decorative light gray border, even if that border is gone on hover.

[jameskoster]

Hah, I'm keen to avoid the borders if we can, they add noise that I don't really think we need. I do acknowledge the 'hanging' point though. Perhaps stacking them and tweaking the alignment would help. I'll try it in the PR.

[tomxygen]

Perhaps when you create a new template for Single item: Post we should present three options:

1. For all posts
2. For a specific post
3. To be used by any post ad hoc (with better wording of course).

@jameskoster That's a great idea and in my opinion it completely fixes the issue I'm trying to bring up.
However, the 2nd and 3rd options could be unified into a single one that says "For specific items".
I've designed a simple mockup on Figma to unify the 2nd and 3rd options, and it compares current design and my new design.
My mockup is based on the Page template, however, currently in the site editor, when selecting the page template, it's not possible to select all pages or a specific page. It's automatically set for specific page.
I'm not entirely sure that unifying 2nd and 3rd is the right way, because it may be confusing and people may not realize that you can assign that template to a new page/article you're creating.

It's probably worth opening a new issue describing this problem if you have the time.

I will open asap. Let me know what you think about this mockup first.
If it could work, I'll add it to the issue.

[jameskoster]

@tomxygen Looking at those screenshots I'm missing a way to create a page-$slug template. But I acknowledge it might be worth prioritising $custom templates instead. Let's discuss in a dedicated issue.

[SaxonF]

it isn't clear why the text of the items don't line up with the text above

@jameskoster @jasmussen this also relates to the editor sidebar discussion and other places we use an item group menu.

It's pretty common to apply negative margin to menu items so text/content aligns with hover overlapping.

hover-align.mp4

We already do this with focus states on some dropdown menus

Re the add template. I still think there is an opportunity to create an experience which reduces the reliance on template descriptions, which without knowledge of the template hierarchy are still quite complex. e.g. The Front Page template takes precedence over Home. Can we just pick the right template for people depending on what they need? It might also make more sense if we will be pushing the idea of treating certain templates more like pages.

[jameskoster]

I still think there is an opportunity to create an experience which reduces the reliance on template descriptions, which without knowledge of the template hierarchy are still quite complex

I agree. This is just a short term patch to address the tooltip issue.

[jasmussen]

Yep, we need the short term bandaid while still wrapping up the long term.

[jameskoster]

Part of this was addressed in #50143.

Replacing the popover menu with a modal remains to be done: