FSE: Improve template part creation flow

[annezazu]

What problem does this address?

Pulling in some feedback from the third call for testing as part of the FSE outreach program from @paaljoachim :

I expect the placeholder to show small thumbnails of existing template parts. Today there is a button that says Choose existing. Choose existing could be a title and thumbnails could be seen below. So one sees the title and then clicks a thumbnail to add the specific template part to the layout. I clicked the Choose existing and it showed up kinda weird right below the button somewhat similar to seeing patterns in the block inserter panel. I do also expect that when hovering over a thumbnail to see a bigger preview to the left as if I was previewing a pattern or block.

Here's a screenshot of the current experience:

Currently, the template parts run together in a way that's hard to distinguish them and they are quite small to view making it hard to see what you might actually be selecting.

What is your proposed solution?

Ideally, for the "New template part" option, patterns or some sort of placeholder option can be better integrated to help users get started. Currently, one just sees this:

For the "Choose Existing" option, an improved preview can be offered similar to what's done when browsing through templates in the navigation sidebar (aka just have the names listed with a pop out of the preview to the right):

[annezazu]

More thoughts related to this feature :) For creating a new template, the current flow does not make it obvious how to change the name of the untitled template part which feels like a key step to nudge a user to do in order to not end up with a bunch of untitled parts:

https://user-images.githubusercontent.com/26996883/111724122-4efadf00-882a-11eb-85d2-308399d2ab17.mov

Separately though, pulling from thoughts from Matias, editing an existing name should not be as prominent.

[bobbingwide]

+1 for improving the ability to name a new template part. I had to watch the video to find how to do it.

[annezazu]

Additional, related feedback from the sixth call for testing for the FSE Outreach Program:

Footer: After taking care of the Advanced section, it took me several minutes to find the “Layout” area. I think it would be better to begin with the Layout and work our way down to the Advanced settings. With something as important as Title and Area, why don’t we move those 2 items up to the top of the Block section?

Once more, having the title/area more "hidden" under Advanced settings proved to be a confusing experience.

[Copons]

A recent WordPress.com call for testing also surfaced some confusion around the two placeholder buttons:

"Choose existing" opens a popover listing both user-created custom template parts, and theme-provided ones. "New template part" turns the placeholder into the variation carousel, listing block patterns associated to that template part area (e.g. header) if any, and/or the option of creating an empty template part.

If the theme or a plugin associates patterns to a template part area, those two buttons both prompt to choose an existing "something", and the difference between them is not clear.

In order to clarify what I mean here's a very hypothetical example of how those buttons could be labelled:

• Use an existing custom or default template part
• Create a new template part based on predefined block patterns
• (Bonus button) Create a new template part from scratch

[Addison-Stavlo]

Use an existing custom or default template part Create a new template part based on predefined block patterns (Bonus button) Create a new template part from scratch

I feel that adding a 3rd button is a bit odd. Since the patterns selector allows you to 'start blank', the bonus button doesn't add any new functionality but puts us in a state where we have 2 buttons for the same action (creating a new template part), alongside 1 button for selecting an existing item. I think one button for each action should be more clear, and keeping 'start blank' from the pattern selector allows for consistency with its implementation in other blocks. I would definitely agree that these 2 buttons should probably be labeled in a way that is more clear to the user.

Now that patterns are implemented, reading above it sounds like the other main items to address here are prompting users with a title input on creation and updating the selection UI.

[Addison-Stavlo]

For the "Choose Existing" option, an improved preview can be offered similar to what's done when browsing through templates in the navigation sidebar (aka just have the names listed with a pop out of the preview to the right)

Interesting Idea! I think the downside here is that it removes the ability to see previews for mobile screen widths. Although perhaps that is not a huge deal, as you noted the previews are small and hard to see as is.

Currently, the template parts run together in a way that's hard to distinguish them and they are quite small to view making it hard to see what you might actually be selecting.

A small improvement prior to a redesign might be adding a gray background and some outline to prevent them from running together as much. 🤔

[Addison-Stavlo]

A few smaller PRs that might help:

https://github.com/WordPress/gutenberg/pull/33733 - Adds some minor borders to the existing selection previews to help make the previews and their titles more clear until we can update this to use a better design in general.

https://github.com/WordPress/gutenberg/pull/33703 - Adds a title confirmation step when creating a template part through the placeholder.

https://github.com/WordPress/gutenberg/pull/33783 - Explores updating the button labels and making them slightly more contextual. My hope is that the new copies might make at least slightly more sense to newer users, or at least convey a larger difference between the two actions. On top of this, the creation label is updated if patterns are available for the creation step.

[strarsis]

It would be very helpful when also a template is selected for specific patterns, as some patterns may only work with specific templates.