Design Patterns to work with with single pattern transforms

[kjellr]

Related to #30469, #27575, and #28736.

Single blocks will soon have the ability to transform into block patterns. To help introduce this feature we should design some new patterns that use just a single block.

Let's use this thread to brainstorm which individual blocks could benefit from this feature the most, and then to iterate on some pattern designs.

cc @melchoyce

[melchoyce]

I've been trying to work through some ideas, but I keep running into a mental barrier where everything I can think of is just... a block style.

For example, two variations I can think of for list blocks? Setting ul or ol. For quotes, I'd offer the default styles. For tables, row stripes or plain, or maybe one of the colors pre-selected. These don't feel any different from what we offer now as block styles, and I'm struggling to break beyond that. Anything more feels too opinionated on a design level, since most of these are design customizations, not just layout.

[kjellr]

Yeah, I definitely understand the potential confusion between Block Patterns and Block Styles. Also, just the other day I ran into a scenario where I think converting one of the current bundled Block Styles into a pattern would make more sense.

@jasmussen or @jameskoster do either of you have any philosophical thoughts on the difference between Styles and Patterns here? I'm wondering if (where possible) we should begin translating some of our existing block styles into Block Patterns instead.

[jameskoster]

I may be totally off-base, but I would anticipate that as more design tools (#27331) come online, Patterns will largely replace Styles in terms of how they work under the hood.

This has the obvious benefit of enabling people to effectively create their own theme-agnostic block styles directly in the editor, then share them via the pattern directory, across sites, and so on.

That's not to say that single-block patterns like these couldn't still be presented using the block styles UI of today. That part feels less clear.

[jasmussen]

I would echo Jay that the key here is that looking at what design tools we have available, and surfacing curated combinations of those, is our goal here. As usable as we can make the inspector, ultimately figuring out what combination of allcaps, line-height, letter-spacing, margin, font-weight looks good, is where these patterns can come in.

Perhaps a helpful way of thinking about paragraph patterns is to think of Figma font presets. Simply toggling "all-caps" is likely not going to inspire anyone. But if a style can be surfaced visually that uses all-caps, sets the font size smaller, the letter spacing a bit wider, expands the top margin a bit, suddenly you might have a good looking sub-heading style. Which, even if it's just a shortcut to existing tools, it's a curated shortcut.

Again to Jay's point, we have an Image style called rounded, which really just sets the border radius to 9999px (because that makes landscape or portrait images pill-shaped rather than ellipsoid). Potentially I imagine this style likely being deprecated entirely in favor of a pattern that does the same.

The balance to strike between pattern and style is to think about performance, markup, and doing things right. If our design tools can avoid inline styles, patterns that leverage them will create good and performant markup. As soon as inline styles get involved, or the complexity of the treatment becomes sufficient, a style is likely the better choice.