Size Change: +9 B (0%)

Total Size: 6.84 MB

_{compressed-size-action}

It does work nicely for button blocks, where it's very common to have primary/secondary buttons.

For some other blocks (heading, paragraph, image) I wonder if it's considered changing the design too much. There's one variation for paragraph in TT5 that makes the text massive, and it's a bit surprising when it happens! For users who want to strictly curate patterns it might be too much if others can change the design so much.

For paragraph it can also be hard to know when you've reset it to the original font size with the way the cycling works, because the selected variation name isn't shown.

Random thought - maybe we should have a 'content: true' flag on variations to specifically support them in patterns and only allow it on the button and a few select others to start.

Random thought - maybe we should have a 'content: true' flag on variations to specifically support them in patterns and only allow it on the button and a few select others to start.

Hmm we do probably need some form of curation for variations. Are you thinking we should enable/disable at the block level, or for each specific variation?

Interesting, thanks for the PR, here's a quick GIF for casual reviewers:

For those casual reviews, I'd love broader thoughts from @WordPress/gutenberg-design.

My own thoughts are: there's clearly something here, and Twenty Twenty Five is actually a good test-bed as it notably features some block styles for typography (the pill shape, etc.) that are useful to explore in patterns. So this "click to tinker" button is an interesting method of discovery, but "shuffle" feels wrong for it.

I use a markdown editor that features a "Promote heading" button that cycles through heading levels. It's easiest to show a demo:

It's effectively the same, but something about the dedicated icon and title for the button to cycle through a particular type of block styles makes it somehow feel clearer/more useful than a generic shuffle button.

Another thing is, the transform block dropdown as it exists is functional but doesn't yet fully live up to its potential. A wish I've had for that, for a long time, is to make it the first place you engage with to see "what visual options are available for this block". That's not just transforms, but visual styles as well. While that button is currently disabled in locked patterns, there's potentially an angle on showing a gallery of options there. It needs some thought on its own.

If you'd like to move forward with this, and for any designers that might have capacity to help, I think the "cycle through presets" angle is likely the best one. But I'd encourage seeking out a system to it. Instead of a generic shuffle button with a single icon, we should take inventory of: what types of presets do we have/will we have, and is there a generic way to create a cycle button that works with these? Coming to mind, color styles, type styles, heading styles, block styles (includes image and button presets). Any others?

The example of @jasmussen raises another style consideration. Should content only users have an option to select duotone for images?

My own thoughts are: there's clearly something here, and Twenty Twenty Five is actually a good test-bed as it notably features some block styles for typography (the pill shape, etc.) that are useful to explore in patterns. So this "click to tinker" button is an interesting method of discovery, but "shuffle" feels wrong for it.

It probably does make sense for the variation switcher to match the context. If you do want users to select a heading variation, then the example of the text size makes great sense.

I'm not sure how many more variations to expose at the block level. I think the secondary button is the biggest one that should be available.

But I'd encourage seeking out a system to it. Instead of a generic shuffle button with a single icon, we should take inventory of: what types of presets do we have/will we have, and is there a generic way to create a cycle button that works with these? Coming to mind, color styles, type styles, heading styles, block styles (includes image and button presets). Any others?

Hmmm, are you thinking we should have different buttons depending on whether the style being changed is color or type for example? I'm not sure that's compatible with how block style variations currently work. A single variation can define changes to any style the block supports, plus it can define arbitrary custom CSS. And though we have a few basic default variations, it's mostly up to themes to define variations of their own, and core has no control over that.

Even for our basic variations, we're often changing multiple styles. Button Outline style for instance defines color (text and background) plus border. The main use case I was thinking of with this PR was the common need to have a primary and a secondary button side by side, and we wouldn't be able to add the Outline style just by cycling through color presets.

Hmmm, are you thinking we should have different buttons depending on whether the style being changed is color or type for example? I'm not sure that's compatible with how block style variations currently work. A single variation can define changes to any style the block supports, plus it can define arbitrary custom CSS. And though we have a few basic default variations, it's mostly up to themes to define variations of their own, and core has no control over that.

I think @dhanson-wp actually explained it rather well what I was pondering:

It probably does make sense for the variation switcher to match the context. If you do want users to select a heading variation, then the example of the text size makes great sense.

I don't know if we have "style variation categories", but what I'm saying is that type styles feel different from button styles. Though what I suppose they have in common is that I'd probably want to cycle through them, rather than shuffle, and it just feels like the original "shuffle" button, previously only in zoom out mode, is designed to be a more casual "let's see what happens" tool, than one to pick through available styles.

That motivation you share is still valid, though, and button styles is notably an important flow. Outside "shuffle" not feeling entirely right for this hyperlocal change, I'm also keenly aware that we have this:

I agree, this is not super discoverable. It hasn't been, for the longest time. But the thing is: I'd love to improve and make that interface more discoverable. The transform button could/should be the first place you check for seeing appearance presets for your block. I think we even have pattern transforms there, and actually showing visual previews in that dropdown feels like a good potential improvement too.

So could that be the first step? Instead of adding the shuffle button, allow style transforms?

Though what I suppose they have in common is that I'd probably want to cycle through them, rather than shuffle, and it just feels like the original "shuffle" button, previously only in zoom out mode, is designed to be a more casual "let's see what happens" tool, than one to pick through available styles.

In my testing the "shuffle" button is cycling between styles, in the same order as they appear in the sidebar:

I'd love to improve and make that interface more discoverable. The transform button could/should be the first place you check for seeing appearance presets for your block.

Do you reckon it's worth trying to expose the transforms only between variations when in contentOnly mode? I could give that a try.

I don't love using the shuffle approach for this... like @jasmussen says for lots of block styles it's not just a style but rather a demarkation of semantic meaning. So I'd rather be able to intentionally change it manually than having to cycle the shuffle button till I get lucky.

Brainstorming.
Cycling feels a bit random. It is kind of fun and it makes me wonder what is next. It does not give an overview of available designs so that I can view these side by side and compare.

Current methods that come to mind for selecting a pattern/style/etc. Which inserts some kind of design.

--

Query Loop block.

--

Starter patterns.

Lets look at the Add Pattern screen in the Site Editor.

In general it would be very helpful to have a consistency in how one can view available designs and how these are added into the canvas. Be it a pattern, style or anything else that has to do with inserting a design. From a very small design/layout element all the way up to the full page design. Templates and patterns have over time become very overlapping. Perhaps everything is a pattern? Template, Style etc are all patterns.....some very small others can be very big.

Closing this now #75761 has shipped as an alternative. Thanks for the feedback folks!