Modifying Block Style Variations in theme.json

If you want to modify a core block style variation, such as the button outline or the rounded image block style variations, you can adjust their styles in theme.json.

The best example of when you might want to do this, is when you select the outline style for the button block, it applies its own class and padding styles:

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
   padding: 1em 2.3em 1em 2.3em;
}

The code above will override your default button’s padding styles that you’ve set in theme.json.

The good news is that you can override core block style variations in theme.json using an option called variations that you add under styles.blocks.blockname.

Here is an example how to change the core button block outline style variation in theme.json:

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/button": {
        "variations": {
          "outline": {
            "spacing": {
              "padding": {
                "top": "0.5rem",
                "bottom": "0.5rem",
                "right": "2rem",
                "left": "2rem"
              }
            }
          }
        }
      }
    }
  }
}

Currently, the above code only works with existing core block style variations. It does not work with custom block style variations registered with register_block_style() or with variations registered with registerBlockVariation.

It’s also worth knowing that you can modify core block style variations with Global Styles too. In 6.2, users can update the style variations through the Styles sidebar in the Site Editor. The updated styles are applied to all instances of the block that has the selected style variation. Pretty cool, eh?

We hope you now understand how to override core block style variations in theme.json and in global styles.