Improvements for Quick Inserter prioritizing patterns

[annezazu]

What problem does this address?

Currently, the Quick Inserter prioritizes showing patterns in a few situations thanks to the work done in https://github.com/WordPress/gutenberg/pull/38709:

• We are editing a template either on site editor or post editor.
• The inserter is at the root.
• The content being inserted is between some block (not as first block nor as last).

However, there are a few rough points:

• There's no indication that what you are looking like are patterns themselves when you open the quick inserter.
• If you search the Quick inserter for a block when it is prioritizing patterns, there's no way to see blocks: https://youtu.be/ywpN_1VRrt4?t=208 You have to open the inserter.
• The + button still says "add block". See below:

What is your proposed solution?

I think there should be a few enhancements, pending design thought:

• Consider updating the + button to have it show as "add pattern" when it's prioritizing patterns.
• Provide a way upon searching the quick inserter to still add in an individual block.
• Consider adding in some sort of intro text to the Quick Inserter panel to clarify that these are patterns one is looking at.

cc @jorgefilipecosta

[jorgefilipecosta]

Hi @annezazu,

Provide a way upon searching the quick inserter to still add in an individual block.

This is already happening if one searches for a block one can insert a block:

Is this behavior not working as expected in your tests?

[jorgefilipecosta]

Regarding "Consider updating the + button to have it show as "add pattern" when it's prioritizing patterns." I opened a PR to do that thank you for catching this issue 👍

For "Consider adding in some sort of intro text to the Quick Inserter panel to clarify that these are patterns one is looking at." I think we would need some design help, maybe @jameskoster or @jasmussen have some insights?

[annezazu]

This is already happening if one searches for a block one can insert a block:

Ah ha. There's some inconsistency but I can replicate this works for some blocks. For example, here's what happens when I search for quote or heading:

This is with a test site using WP 6.0-beta2 and Gutenberg 13.1.0-rc.1.

[jameskoster]

"Consider adding in some sort of intro text to the Quick Inserter panel to clarify that these are patterns one is looking at."

Perhaps we can make it more obvious by optimising the dimensions for patterns. At the moment the previews aren't all that helpful because they're so small. I don't know if that means switching to a single column, or making the popover larger.

There's some work to be done around which patterns we surface too. In template editing, the patterns should be contextual to the current template. Also, does it make sense to expose header and footer patterns so prominently if the current template already includes a header and footer? I hope these are the sort of things that will make this feature feel more useful.

[Addison-Stavlo]

Note another improvement regarding prioritizing patterns could be related to - https://github.com/WordPress/gutenberg/issues/41397. Since right now prioritizing patterns over blocks when searching for template part variations like "header" results in options that just add blocks directly to the template, bypassing all the features provided by the template parts these patterns are expected to be contained in.

[mjsdiaz]

I would prefer to have the same experience each time. It’s confusing to suddenly see patterns when I was expecting blocks. I would like to always see blocks first with a button or such to switch to the patterns.

Or even better, there could be a choice to set it to one or the other, just as we can change other editor settings (full screen, code vs. visual)

[burnuser]

Different order of pattern and blocks in site- and post-editor reported as WCAG violation: https://github.com/WordPress/gutenberg/issues/47113

[jameskoster]

The quick inserter should still surface blocks, even if/when Patterns are prioritised. This is a very frustrating experience:

[jameskoster]

Perhaps the upcoming pattern-centric building experience (https://github.com/WordPress/gutenberg/issues/50739) makes this feature (prioritising patterns in the quick inserter) defunct?

[richtabor]

Perhaps the upcoming pattern-centric building experience (https://github.com/WordPress/gutenberg/issues/50739) makes this feature (prioritising patterns in the quick inserter) defunct?

Yes, I agree.

What are the conditions to get patterns in the Quick Inserter? I think the Quick Inserter should always be the same experience, surfacing blocks with "Browse all" opening the Inserter.

[jameskoster]

Perhaps we should reframe this issue in that direction. What do you think @annezazu ?

[annezazu]

I'm having a hard time understanding what direction is being referenced here for some reason.

I think the Quick Inserter should always be the same experience, surfacing blocks with "Browse all" opening the Inserter.

What does this mean exactly? What's "the same experience" in this case? I'm guessing that means removing the work to surface patterns contextually but want to be sure. Ultimately, game to shape this in whatever way makes the most sense to designers because I agree. It remains very frustrating not be able to just add a block when patterns are prioritized.

[richtabor]

What does this mean exactly? What's "the same experience" in this case? I'm guessing that means removing the work to surface patterns contextually but want to be sure.

Yes, keep the quick inserter surfacing blocks with "Browse all" always opening the Inserter with the Blocks tab selected. That way when you press the blue + inserter within the standard editing experience, it performs the same actions.