Styling block variations with global styles and theme.json

[carolinan]

What problem does this address?

Recently, it was made possible to set default values for block style variations in theme.json.
But there is no way to style block variations.

Block variations and block style variations are separate concepts.
A block variation can be a variation for a query loop block with specific settings, registered by a plugin or theme. Or it, can be the row and stack variations of the group block, the tag variation of the post terms, and so on.

Unblocking this would solve scenarios where a variation could be used instead of a new block, but with the full styling possibilities.

Today, if a designer want to style the categories or tags differently -like in Twenty Twenty-Five, the styling has to be done in the markup
(template, part, or pattern). When the styles are in the markup it makes it more difficult to switch themes.

[carolinan]

@aaronrobertshaw @t-hamano

[t-hamano]

Thanks for the suggestion.

From what I understand, a block variation is technically a variation of attributes.

Some CSS class name is needed to apply styles via the Global Styles, but block variations, unlike block style variations, don't have their own CSS class name. This means I'm wondering if we need to add some special CSS class name for block variations to the block.

For example, we might be able to generate some unique string from the block name and the entire attributes object, and add the CSS class name based on that.

However, I'm not sure how complicated such an approach would be to implement.

[aaronrobertshaw]

Thanks for taking the time to write up the issue @carolinan 👍

It's worth noting that this is a duplicate of some open issues:

• Block variations are missing Global Styles support #47324
• Styling core/group variations in theme.json not working #59186

There's also this one that might overlap a little:

• Blocks: Add support for block name aliases for variations #43743

Can we close this and consolidate the discussion on the existing issue? I think #47324 is probably the original.

---

From what I understand, a block variation is technically a variation of attributes.

Some CSS class name is needed to apply styles via the Global Styles, but block variations, unlike block style variations, don't have their own CSS class name

@t-hamano is on the money here. The catch is how we solve this problem.

To implement something that "just works" without users having to resave posts, it would need to work both JS and PHP side. Any hook/filter used probably needs to be able to check registered block variations and then know what set of attributes would match that, perform those comparisons, and finally apply some CSS class name. Achieving that in some performant manner is probably a big part of why this hasn't been tackled yet.

[carolinan]

Thanks, I will close this as a duplicate.

Since there is no ETA I don't believe a variation can be used as a replacement for a new post navigation block.

[aaronrobertshaw]

Since there is no ETA I don't believe a variation can be used as a replacement for a new post navigation block.

I'm not sure that the current inability to style block variations is a blocker for a variation-based approach to the post navigation block.

Early adopters of the block could define a block style variation (aka section style) as a workaround for Global Styles. My naive understanding of the proposed block is that it would primarily be used in templates and isn't something that would be added hundreds of times. So applying a block style to it wouldn't be a show stopper while a solution to styling block variations through Global Styles is worked on.

I appreciate that this may not be ideal but is an option for compromise when charting a path forward for #57664.

Also, my last comment wasn't meant to be taken as gospel. There are many people smarter than I involved in the project. It's possible others have viable ideas towards solving this one.

[carolinan]

No, the section style would be available for all groups and not limited to the variation, creating unnecessary options that are not useful,
and a large amount of additional CSS since the section styles need to be repeated.

[gziolo]

Since there is no ETA I don't believe a variation can be used as a replacement for a new post navigation block.

Yes, it's a more complex process to introduce block variations as a target for styling with Global Styles. @ockham shared the Proposal: Block Variation Aliases after WordCamp Europe, but it didn't get any traction because there are several backward compatibility concerns, and it isn't a simple task to dynamically detect block variations during front end rendering to apply the styling correctly.