With every release, the Global Styles feature in WordPress keeps letting you do more and more, faster and more easily. Since WordPress 6.2, you can set, change, and tweak core block style variations (block styles) in theme.json—or directly from the Styles interface in the Site Editor.
That means you can build themes with less CSS than ever.
Even creating and editing custom block styles from the Styles interface in the Site Editor may be on the slate for WordPress 6.3. But let’s focus on what’s possible today and not get too far ahead of ourselves just yet.
The theme.json code shown in this post refers to block styles as “variations” (short for “block style variations”), but this feature should not be confused with block variations or Global Styles variations. This is an unfortunate naming convention in WordPress. This post will refer to these as “block styles” to avoid confusion.
Customizing a core block style
Let’s start with an example of this built-in Button block style: Outline. It will look something like this, assuming you’re just about to design the buttons for your theme:
The core Outline style has its own distinctive design, sporting a 2px solid border, rounded corners, and a heavy dose of padding. But that’s not the look you’re after right now.
Suppose you wanted a thicker border, square corners, and tighter spacing. Maybe you’re even feeling whimsical and decide to throw in a fun box-shadow, as you see below:
Before WordPress 6.2, you would have needed to write some CSS, maybe in a block-specific stylesheet, to make the changes you want.
As of 6.2, though, you can edit the style attributes for it in theme.json—the same place you’d change the Button block’s default styles.
This example theme.json code specifically targets the Outline style—with custom border, shadow, and spacing styles:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"styles": {
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"color": "var( --wp--preset--color--black )",
"radius": "0",
"style": "solid",
"width": "3px"
},
"shadow": "var( --wp--preset--shadow--outlined )",
"spacing": {
"padding": {
"top": "0.5rem",
"bottom": "0.5rem",
"left": "1.5rem",
"right": "1.5rem"
}
}
}
}
}
}
}
}The outlined shadow preset is registered by WordPress and available to any theme. You can also use natural, deep, sharp, crisp, or a custom shadow preset.
For the most part, block styles support should let you keep more of your custom code in the theme.json file. While there are certainly different schools of thought on where styles should live, one compelling benefit to housing them in the standard theme.json file is user customizations.
The screenshot below confirms that the customizations you made to the Outline block style also appear in the Styles interface:
Your theme users can see where the style is coming from and make adjustments as needed. This benefit is lost when you put your style rules in a custom CSS file.
Available core block styles
Because this feature is available only for core block styles in WordPress 6.2, you are limited to customizing these blocks and their styles:
core/button:outlinecore/image:roundedcore/quote:plaincore/site-logo:roundedcore/separator:wide,dotscore/social-links:logos-only,pill-shapecore/table:stripescore/tag-cloud:outline
More to come
If you’re thinking this all feels limiting for you to use right now, there is good news. More is on the way! And block styles seem, finally, to be getting the attention they deserve.
For now, keep your eye on these two potential enhancements, as the WordPress 6.3 development cycle moves forward:
Custom CSS and element style support
One current downside to customizing block styles in theme.json is that you can only add the design tools that the block supports.
Generally that’s typography, color, border, shadow, and spacing. Anything else, and you’re back in a custom stylesheet—at least until this enhancement for CSS lands in WordPress. That pull request also adds support for styling nested elements.
Even so, you can still take block styles pretty far with the core design tools—just don’t expect them to handle every scenario yet.
Custom block style support
To round out the feature, WordPress needs to support custom block styles. Here’s an open ticket proposing support, but it needs a patch. If interested folks can merge a pull request for this, you’ll be able to cut out even more custom CSS.
The ticket also proposes registering block styles in theme.json, so you could even cut back on PHP or JavaScript (depending on how you like to register your block styles).
Props to @marybaum, @welcher, and @mburridge for feedback and review.
Leave a Reply