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

[jorgefilipecosta]

Because choosing the template type is only the first step, after which you still need to design the template. A 404 template for example can have endless configurations, which is why we present patterns.

So on the add new template the user chooses the template type e.g: 404, or single post and chooses a pattern for that template (or blank if the user really wants blank) the site editor loads the new created template with the choose pattern. In which case we would show another modal to choose a pattern? The user already choose a pattern before.
If the idea is really to have two modals and choose patterns two times, for the 404 template type could you given examples of patterns the user would choose on the add new template modal, and the patterns the user would choose after the site editor loads? Are they the same patterns?

[jameskoster]

No, the user should not be choosing the pattern twice 😭

Template selection and pattern selection are separate parts of the same overall flow. That is:

1. Click Add New template
2. Choose the template e.g. Page
3. Choose whether to create the generic page template, or to create a template for a specific page
4. Select the specific page you want to create the template for
5. You're sent to the Editor and a modal appears containing patterns for displaying a page

This issue concentrates purely on that fifth step. Steps 1 through 4 need more design work. Sorry for the confusion here.

[ndiego]

@jameskoster @jorgefilipecosta Just checking in to see if we still aiming for 6.2 with this? Thanks!

[jameskoster]

The first task was merged last week (#46248), and I think that can be included in 6.2.

@jorgefilipecosta can confirm, but I don't believe the second task was factored into the work in that PR, so we probably need to leave the issue open.

[ndiego]

@jameskoster #46248 was included in Gutenberg 15.2 (not included in 6.2), and I do not believe it was backported to the 6.2 Betas. @Mamaduka @ntsekouras are you able to confirm this?

[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.