Estimated reading time: 2 minutes
Last updated
If you have used the block editor for a while, you are probably familiar with the selectable styles that are available for some blocks through the block editor UI. For example, the rounded image, the striped table, and the pill shaped social icons.
From Gutenberg version 15.0 and WordPress 6.2, these styles are part of the Global Styles system. For users, this means that they can update the style variations through the Styles sidebar in the Site Editor. If a block has support for border, they can update and save the border, and so on. The updated styles are applied to all instances of the block that has the selected style variation.
Theme developers can update block style variations through a new theme.json option called variations that you add under styles.blocks.blockname.
At this early stage, the option only works with the existing core block style variations. It does not work with custom styles registered via register_block_style() or with variations registered with registerBlockVariation.
For example, maybe you want to the rounded image to have a lower border radius. By default, the radius is set to 9999px, and the CSS output is:
.wp-block-image .is-style-rounded img, .wp-block-image.is-style-circle-mask img, .wp-block-image.is-style-rounded img {
border-radius: 9999px;
}Theme.json example for changing the radius:
"version": 2,
"styles": {
"blocks": {
"core/image": {
"variations": {
"rounded" : {
"border": {
"radius": "8px"
}
}
}
}
}
}
}The CSS output uses a higher specificity than the original style. Example from the front of the website:
.is-style-rounded.is-style-rounded.wp-block-image.wp-block-image img, .is-style-rounded.is-style-rounded.wp-block-image.wp-block-image .wp-block-image__crop-area {
border-radius: 8px;
}
// This will be overriden by the style above (but it is still output)
.wp-block-image .is-style-rounded img, .wp-block-image.is-style-circle-mask img, .wp-block-image.is-style-rounded img {
border-radius: 9999px;
}