Alternative ways to preview and select starter content on page creation

[carolinan]

What problem does this address?

The purpose of showing starter content patterns on page creation is to help users who find it difficult to work on an empty canvas,
See #38787

Without the Gutenberg plugin active, the editor shows a modal when you create a new page. The modal shows previews of patterns, and depending on the patterns, they can also take time to load and create layout shifts.
You can only insert one pattern.
The modal can be closed by selecting a pattern or clicking a close button. It shows by default, but can be disabled with a user preference.

Some feedback from both users and developers on the project includes that the modal is unexpected, annoying, and stops you from just writing their content. For some, any popup can be disruptive.
(You can also read about problematic popups in this article https://www.nngroup.com/articles/popups/)

A different way to display the starter content patterns was implemented in Gutenberg:
When you create a new page, first, the pattern inserter in the sidebar opens (left side). The sidebar then opens an additional panel to display the pattern category, but it starts empty. While the patterns load, the page enables "zoom out".
If the page- and block settings sidebar was open, it is closed. In addition, the "show template" (template-lock) is enabled.

In comparison to the modal, the user can place one or more starter patterns, If they want to insert a pattern that is not in the starter content category, they can. With the zoom out mode, users can also get a zoomed out overview and rearrange their patterns.

There are a lot of animations, movement, and unintended layout shifts, and there is feedback that it is distracting.

There are sooooo many cumulative layout shifts happening here and the time to interactive / useful content loaded is really sub optimal.

What is your proposed solution?

Explore other ways to help users select starter content, that does not feel interruptive, or less interruptive.

A Design panel in the page settings sidebar that shows previews of starter content patterns, similar to templates

• The panel can be ignored or easily closed.
• The panel does not take real estate from the canvas like the pattern inserter.
• Allows inserting more than one pattern.
• Can be combined with zoom out but may require some drag and drop to be implemented.
• Does not need to be disabled if the user has already edited the page.

❌ May still have layout shifts when the pattern previews load
❌ Can not switch pattern categories
❌ Can be less discoverable

[stokesman]

A Design panel in the page settings sidebar that shows previews of starter content patterns, similar to templates

This idea is worth considering. As far as I know was first mentioned by @paaljoachim #61489 (comment).

Mock of patterns in sidebar panel on new page from Paal’s comment.

I'm not sure this would be prominent enough unless it can precede the post summary panel.

Other proposals

Quite a few idea were offered in the comments of #56181. I’ll cover the couple that I think are worth considering and that seem low-hanging enough.

Prompt instead of auto-launch

One way to do this would be with a snack bar. It allows quick engagement or can be ignored/dismissed. It could work with either the modal or the inserter + zoom out.

Demo of snack bar approach in Post editor

prompt-post-starter-patterns.mp4

Make it a choice before opening the editor

There are at least a couple of ways to do this in the Site editor. One, add a choice in the existing prompt for the title. Two as suggested by Robert #56181 (comment) with a drop down menu.

Mock of a choice to start with patterns in the new page prompt.

While this is Site editor only, it could be seemingly reused in the Post editor after invoking the "Add new page" command.

In the Post editor it’s less straightforward though perhaps it’s possible.

Mock of idea to extend classic admin menu

[carolinan]

A reflection: all three of these choices uses the modal. You can only insert one pattern, so it is not a "page building experience" in comparison to the zoom out where you can insert multiple and reorganize them.
You insert one pattern and then your page is not empty anymore, but you are then sort of left there.

[carolinan]

This was also mentioned in one of the other issues, but it still requires the starter content patterns to load faster:

Display the pattern category in the pattern inserter sidebar without a "flyout", because the additional panel moves when it is expanded and takes up space. If there was no additional panel, perhaps the page settings panel did not need to be closed, so two layout shifts are removed or reduced.

[stokesman]

A reflection: all three of these choices uses the modal.

If this refers to any of the "other proposals" from my comment, I want to clarify that they are applicable to the zoom out experience too. They would precede it and make it an explicit choice—i.e. no autolaunch. As such they aren’t "alternative ways to preview and select starter content" but share the aim of improving the experience.