Pattern Inserter: consideration to always show each pattern title

[samiff]

What problem does this address?

In #44028 it looks like the pattern item title was visually hidden:

gutenberg/packages/block-editor/src/components/inserter/style.scss

Lines 314 to 316 in 25aa4b4

	.block-editor-block-patterns-list__item-title {
	display: none;
	}

While that may work well for patterns with a lot of visual variation between them, I'm finding it a step back for patterns that are less visually striking. Here is an example where a third-party plugin has registered a pattern category with different form patterns:

It's difficult to make sense of which form pattern to add. I do note that the above screenshot is for a desktop screen resolution. The individual pattern titles are visible from a mobile resolution as seen here:

And here is an example for the "Footers" pattern category:

That seems very confusing to me especially if I had not used patterns much before. Do I just click & undo until I find what I need? Versus the UX with titles:

What is your proposed solution?

For each pattern's title to remain visible on all screen resolutions, for example:

CC: @annezazu via #41379 (comment)

[annezazu]

Thank you! Tagged away and noting for @jameskoster.

[jameskoster]

Aside from some less common instances I don't think the pattern titles are adding much value in this view. Ideally choosing a pattern should be a visual affair, and the noisy text disrupts that quite a bit. Not to mention the fact that they reduce the number of patterns visible in the column at any one time which also feels like a negative.

Trying to read between the lines, it seems like the biggest issue here is that the previews aren't large enough for you to delineate the difference between some patterns. The contact forms is a good example. Observing the issue through that lens might yield different potential solutions?

Perhaps it should be possible to increase the width of the patterns column? Or maybe we should flip the widths of the inserter/pattern columns... it's a little strange that the latter is smaller than the former. Another option would be to offer a shortcut to browse the patterns in the explorer.

I'm sure there are many other options to consider, but ideally we avoid the text labels simply because they aren't useful most of the time.

[samiff]

Ideally choosing a pattern should be a visual affair, and the noisy text disrupts that quite a bit.

This seems to be a heavily guiding statement, and I wonder how it aligns with information currently found in the handbook?

Block Patterns are predefined block layouts, available from the patterns tab of the block inserter.

The properties available for block patterns are:
title (required): A human-readable title for the pattern.
description (optional): A visually hidden text used to describe the pattern in the inserter. A description is optional but it is strongly encouraged when the title does not fully describe what the pattern does. The description will help users discover the pattern while searching.

Viewed more abstractly, Patterns are just groups of blocks. While these groupings of blocks could be highly visual, that is not a certainty especially as more third-party developers leverage the feature.

it seems like the biggest issue here is that the previews aren't large enough for you to delineate the difference between some patterns

Again, this seems to assume that a pattern's visual representation alone would provide understanding of what the pattern provides. The "Explore all patterns" button does currently provide larger pattern previews with titles. Here is an example of that window with titles removed for the "Query" pattern category:

That does not inspire confidence in selecting a pattern to me. And currently the process of adding a pattern, not liking it, and wanting to remove it can be tedious (there is no quick undo feature).

[carolinan]

I agree with @samiff here, having the title visible helps me select the correct pattern for the "job".
I personally do not find the title noisy.

[jasmussen]

I think we should definitely show both borders and titles in the pattern modal, and it's part of this design that also connects it to the pattern directory. However for the sidebar inserter, the balance isn't as clear to me. It is always the case with design that if everything is loud, nothing is loud, which is why I empathise with the intent to minimize distractions across the board. As far as solutions go, are there options other than permanently listing out all pattern titles? Such as show them on hover/focus? Perhaps show them only for site building patterns?

[samiff]

I empathise with the intent to minimize distractions across the board.

In my opinion, a pattern's title is critical information that should always be displayed. A pattern preview (even at larger sizes) does not always fully encapsulate what a pattern provides to a user. Hopefully that has been illustrated by some of the examples (core included) shared here.

Such as show them on hover/focus?

This would be an interesting compromise, though my personal vote would be to always display the title.

[jameskoster]

Dare I suggest a switch in the Patterns panel to toggle title visibility?

[jasmussen]

Such would be the "Show labels" option, right? Perhaps that could show them always, otherwise they'd appear on hover/focus. Not sure.

[jameskoster]

I was thinking more literal:

If the switch is on then titles appear beneath the patterns, like they do in the Explorer. If it's off then they're hidden entirely.

Positioned differently, but you get the idea:

[johngodley]

A +1 to viewing titles - they are important, particularly if it's hard to tell what a pattern is visually (or to see what the difference between similar patterns is).

As an alternative suggestion maybe a pattern could supply it's own preview layout?

#28135

This means a mostly text-based or abstract pattern, where a direct preview doesn't really add any value (it will always be too small), could decide to use an alternative and more visually relevant representation.

[jasmussen]

I don't think we should have a toggle for titles — I think we need to decide on always, hover/focus, or otherwise.

[digitalwaveride]

Also +1 for titles.
We are currently working on forms and would see many patterns that differentiate themselves not (just) visually but especially by the functionality of the input blocks. Even if users could identify labels on input fields, it takes a lot of effort to understand the topic of the form.

[javierarce]

The recently implemented Media tab shows titles on hover/focus and it seems a good compromise to me: you get a compact column that just shows the content, but you can get extra information if you want.