Creating a template: Present the user with initial block configuration options

[jameskoster]

When possible we suggest patterns during the page creation flow. This can help speed up the addition of pages, and provide some creative inspiration.

It would be good to do the same thing when creating a new template. It's not yet possible to associate a pattern with a template, so we'll need to split this into two parts:

• Offer options to start blank, or with the closest template in the hierarchy (FSE: Fall back to next best template in hierarchy when querying through REST API #37258), for which we can provide a visual preview
• Offer options to start with a contextual pattern, either from the directory or the set bundled with the theme. Blocked by Add: Template types to the patterns API. #45814.

For part one, we'll display something like this after the template is created:

This will be augmented with additional patterns for part two:

Somewhat related: #39308

[Mamaduka]

Gutenberg 15.2 was released yesterday; we need more time to test #46248 to be included in the release IMO. So I would recommend punting this for WP 6.3.

[ntsekouras]

This is punted already since: #48077, that moved the files in compat/6.3.

[jameskoster]

Dang, that's a shame. 46248 softened a number of rough edges in the template creation flow 😓

[SaxonF]

You're sent to the Editor and a modal appears containing patterns for displaying a page

@jameskoster do you think this should be part of the new drill-down experience vs a modal? Another option is just opening inserter in editor as this helps from an educational aspect as well. This is where some guidelines around site editor sidebar vs editor would help us decide where an experience like this should live.

[jameskoster]

@jameskoster do you think this should be part of the new drill-down experience vs a modal?

Yes, we should explore that.

Another option is just opening inserter in editor as this helps from an educational aspect as well.

Maybe it's reachable in both places 🙊 The 'full-page' patterns will be available in the Inserter regardless. And surfacing them in the dark material could be nice as well, because it's not beyond the realms of possibility that it'd enable you to create a template without having to invoke the full screen editor at all.

[jameskoster]

@SaxonF are you seeing the "Apply template to" dropdown containing the options from this menu?

I'm curious how we'd present 'custom' templates.

The starting points will update as you work through the form so we might need a loading state. Could be worthwhile to quickly prototype this one.

[SaxonF]

are you seeing the "Apply template to" dropdown containing the options from this menu?

Previously shared this somewhere else so obviously doesn't reflect dark mode but the idea is that rather than trying to explain the complex template hierarchy in a single dropdown we take a more natural language approach by splitting into two inputs. custom templates would be the bottom option of the first input.

template-create.1.mp4

[jameskoster]

Yeah, it's quite tricky to support the full expressiveness of the template hierarchy and present it in a way that feels intuitive :)

I like the natural language, but I'm missing ways to create a template for a post tag or category, or for a specific author.

Another idea to avoid overwhelming in that first dropdown could be to center its contents around post types, and reveal subsequent dropdowns based on the initial selection, kind of like a filter:

It seems that whichever way we slice it, it comes down to: Fewer dropdowns with longer menus. More dropdowns with shorter menus.

[SaxonF]

I like that. To me it feels more intuitive as it focuses more on the outcome vs trying to gauge the outcome from template name + description. We can also be clever about certain selections e.g. decide whether to use home or front-page based on site configuration.

[jameskoster]

One other thing that came up in a discussion with @jasmussen today was a need for a more comfortable way to browse many starting points. Perhaps something like the pattern directory modal?

[jasmussen]

This is the mockup we discussed:

Note that I don't consider it a particularly good design: the "Start blank" could arguably be a blank page inside, the modal is a bit big and unstyled, etc. — but it's spacious.

Even if we do keep things in the drilldown detail pages, which I think brings with it a lot of solid benefits, a modal like this could potentially be an extra affordance. Maybe.

[jameskoster]

Yup that's what I meant: an additional affordance, similar to the "Explore all patterns" button in the Inserter 👍

[jameskoster]

There have been conversations about moving the pattern selection process to the sidebar, which is a bit related to #50739.

But since pattern suggestions are now displayed (both fall backs and contextual), I think we can close this issue.