Style variations for block types

[jameskoster]

Block style variations are preset block designs. A button defaults to being filled, but has an outline variation. We could expand this system so that it was possible to edit style variations, as well as creating new custom ones. For example, I might want to create a paragraph style with a slightly larger font size and a drop-cap for occasional use in my posts / pages. By creating a Style, I am empowered to update all blocks utilising that style at once, whereas currently I'd need to update all blocks one-by-one.

You might find access to managing style variations in an ellipsis menu:

Style variations would show up in a list below other block-specific properties, in Global Styles → Blocks → Block name:

Style variations can be conceptually thought of as fitting somewhere between "Theme" and "User" in the style hierarchy, so any customizations you apply exist on top of existing values, rather than replacing them:

This would let you edit a style variation globally, and all blocks using that variation get updated as a result.

Note that this particular aspect needs a little further thought, please see the comments below as well.

Related: #44361

---

Issue updated Nov 11.

Initial proposal

Theme style variations allow users to change the look and feel of their entire site in a few clicks:

It would be interesting to explore how we might apply this concept to individual blocks in global styles. For example, I might want to create a paragraph style with a slightly larger font size and a drop-cap for occasional use in my posts / pages. By creating a Style, I am empowered to update all blocks utilising that style at once, whereas currently I'd need to update all blocks one-by-one.

We can hopefully connect this to the current block style system, giving folks control (create, update, delete) over styles like the one we find on the Button block:

Related: #44361

[phil-sola]

This definitely sounds like a nice addition to Global styles in the site editor. I can see that being powerful and enabling users to completely change the look of their sites with the blocks they are using with one click.

Imagine your buttons all changing, or as mentioned above a specific paragraph style being implemented site-wide with this type of settings.

[jasmussen]

Here's a quick idea showing the "Styles" panel becoming a ToolsPanel, but with a "Manage styles" menu option:

You can click to edt the default style variations, or you can add a new one:

One of the challenges with the above is that the icon we're using for "inherited/undefined" is currently also intermixed with explicit "unset" (see also #36998), so it isn't clear from the above that the style variation for the Outline button explicitly sets the background to none.

Another open question is how style variations are shown in the UI; I would assume that they would need to migrate from being CSS classes (is-style-rounded) to becoming design tools presets (a la border-radius: 9999px;) — do those values need to be shown in the UI when picking a preset? In these designs, I omitted that intentionally so that if you go back and edit a style variation, there is a link in place so all blocks using that style variation get updated. But this would need some technical input. CC: @ntsekouras or @Mamaduka perhaps?

[jameskoster]

Nice work, this looks like a great start.

I found the "Manage styles" label to be a little ambiguous – its proximity to the "Fill" / "Outline" options suggests I'd be taken directly to a place where I can modify those, rather than the base button styles. I'm not sure I'd make the connection between those style options and the "Variations" menu item.

We could potentially solve this by having a direct reference point to the variations in that first panel. I wonder if we could bring the variation list:

into this panel:

And eliminate the "Variations" menu item altogether? That would save a 'level' in the drilldown too which is always nice.

---

A minor point, would it be helpful to include some text explaining what style variations are?

[jasmussen]

Good thoughts!

And eliminate the "Variations" menu item altogether? That would save a 'level' in the drilldown too which is always nice.

Oh that's a good point, less drilling down, yes!

[jasmussen]

Another iteration based on this. Editing style variations, still not sure if there's a better way to link the GS page from the individual panels (Figma):

I like the simplification of style variations showing right at the top level of the block page, here shown being edited:

I come back to the question of the inner working of the mechanic. I imagine we desire for there to be a link between these variations, and published contents. What happens then when you further customize a block? Here, I imagine that the link breaks:

[jameskoster]

Here, I imagine that the link breaks:

Yes good point. Breaking the link is definitely an option.

An alternative to consider: we might maintain the link but (somehow) mark the style as being edited locally. From there you can either leave the changes local, push them to the variation, or perhaps even create a new one. To make this work we'd probably need to include a "Default" option in the styles panel, meaning to use the base configuration from global styles.

I suppose another consequence with this approach is that you could theoretically do without the Manage styles view altogether – you'd inherently 'managing' them all the time. Not sure if that's a good thing or not :)

At that point I guess this begins to overlap with #44361 quite a bit.

[jasmussen]

An alternative to consider: we might maintain the link but (somehow) mark the style as being edited locally. From there you can either leave the changes local, push them to the variation, or perhaps even create a new one. To make this work we'd probably need to include a "Default" option in the styles panel, meaning to use the base configuration from global styles.

There's already a default style, good point, I suppose all style can just be additive. I.e. this:

— The link is still there, I just added a 4px border which wins.