Styling core/group variations in theme.json not working

[mcshaman]

Description

As documented in the Wordpress Theme Handbook you are able to customise the default styles of blocks in the theme.json. This appears to work fine for blocks such as core/button however it doesn't seem to work for group variations such as group-row or group-stack.

As noted in this Wordpress blog article Row and Stack blocks are actually just variations of the group block.

I wan't to be able to apply different blockGap spacing on group-row and group-stack as opposed to the default group block and this seems like the way it should be able to be done.

Step-by-step reproduction instructions

1. add the following to theme.json:

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/group": {
        "variations": {
          "group-stack": {
            "color": {
              "background": "green"
            }
          }
        }
      }
    }
  }
}

2. add a stack block to page and notice style not applied

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.4.3
According to WordPress my install should be using Gutenburg 16.2-16.7
Custom theme
Chrome 121.0.6167.184
macOS 14.3.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[aaronrobertshaw]

Thanks for taking the time to write up this issue @mcshaman 👍

I think there are a couple of layers to this issue.

The first problem is around the terminology used in this area. At times, it overlaps, is reused, and often conflated.

The concept of "variations" in particular has been reused a lot and it is beginning to cause a lot of confusion. As it stands now there are:

• Theme style variations
• Block style variations also known as Block Styles
  
• Block variations

The difference between the last two is the key to this issue.

The Row and Stack versions of the Group block are "Block Variations". These are effectively like preconfigured group blocks, but they are Group blocks all the same i.e. core/group.

There is some documentation around deciding between using block variations and block styles.

The snippet in the issue description appears to conflate the block style variations with block variations. The styles.blocks.blockType.variations property is for styling block style variations (i.e. Block Styles). I can completely understand the confusion here though.

The variations section on this Global Settings & Styles page might help clarify things and also this Styling Block Style Variations section.

I wan't to be able to apply different blockGap spacing on group-row and group-stack as opposed to the default group block and this seems like the way it should be able to be done.

This is the second part of the problem. There is currently no means of styling a Block Variation, separately to the block type it is a variation of. In other words, you can only style core/group, in fact when you insert say a Row block, the markup is still for the core Group block:

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

I hope this next bit doesn't cause more confusion but, in the near future, block style variations will be extended so that custom block style variations can be configured via theme.json and global styles (not just core block style variations). This might allow a workaround of using some custom block style variations (Block Styles), to style the Row, and Stack, Block Variations.

My apologies for the long-winded reply here. I find it rather difficult to be clear, yet accurate when trying to talk through this area. Ideally, in the future, we'll be able to improve the naming of these different features to provide some baseline clarity.

I hope that helps at least some 🤞

Let me know if you have any further questions at all.