I stumbled throughout this tweet from Ana Segota in search of a method so as to add a CSS box-shadow to a button’s hover state in WordPress within the theme.json file.
She’s asking as a result of theme.json is the place WordPress desires us to start out transferring primary kinds for block themes. Historically, we’d do any and all styling in type.css when working in a “traditional” theme. However with the default Twenty Twenty-Three (TT3) theme that just lately shipped with WordPress 6.1 transferring all of its kinds to theme.json, we’re getting nearer and nearer to with the ability to do the identical with our personal themes. I coated this in nice element in a current article.
I say “nearer and nearer” as a result of there are nonetheless loads of CSS properties and selectors which might be unsupported in theme.json. For instance, for those who’re hoping to type one thing with like perspective-origin in theme.json, it simply gained’t occur — a minimum of as I’m scripting this as we speak.
Ana is box-shadow and, fortunately for her, that CSS property is supported by theme.json as of WordPress 6.1. Her tweet is dated Nov. 1, the identical actual day that 6.1 launched. It’s not like help for the property was a headline function within the launch. The larger headlines had been extra associated to spacing and structure methods for blocks and block themes.
Right here’s how we are able to apply a box-shadow to a selected block — say the Featured Picture block — in theme.json:
{
"model": 2,
"settings": {},
// and so forth.
"kinds": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Questioning if the new coloration syntax works? Me too! However after I tried — rgb(0 0 0 / 0.66) — I acquired nothing. Maybe that’s already within the works or might use a pull request.
Straightforward, proper? Certain, it’s method completely different than writing vanilla CSS in type.css and takes some getting used to. However it’s certainly attainable as of the latest WordPress launch.
And, hey, we are able to do the identical factor to particular person “components”, like a button. A button is a block in and of itself, however it can be a nested block inside one other block. So, to use a box-shadow globally to all buttons, we’d do one thing like this in theme.json:
{
"model": 2,
"settings": {},
// and so forth.
"kinds": {
"components": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}However Ana desires so as to add the shadow to the button’s :hover state. Fortunately, help for styling interactive states for sure components, like buttons and hyperlinks, utilizing pseudo-classes — together with :hover, :focus, :energetic, and :visited — additionally gained theme.json help in WordPress 6.1.
{
"model": 2,
"settings": {},
// and so forth.
"kinds": {
"components": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}If you happen to’re utilizing a guardian theme, you may actually override a theme’s kinds in a toddler theme. Right here, I’m fully overriding TT3’s button kinds.
View full code
{
"model": 2,
"settings": {},
// and so forth.
"kinds": {
"components": {
"button": {
"border": {
"radius": "0"
},
"coloration": {
"background": "var(--wp--preset--color--tertiary)",
"textual content": "var(--wp--preset--color--contrast)"
},
"define": {
"offset": "3px",
"width": "3px",
"type": "dashed",
"coloration": "crimson"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"coloration": {
"background": "var(--wp--preset--color--contrast)",
"textual content": "var(--wp--preset--color--base)"
},
"define": {
"offset": "3px",
"width": "3px",
"type": "stable",
"coloration": "blue"
}
},
":focus": {
"coloration": {
"background": "var(--wp--preset--color--contrast)",
"textual content": "var(--wp--preset--color--base)"
}
},
":energetic": {
"coloration": {
"background": "var(--wp--preset--color--secondary)",
"textual content": "var(--wp--preset--color--base)"
}
}
}
}
}
}Right here’s how that renders:
One other method to do it: {custom} kinds
The just lately launched Pixl block theme supplies one other instance of real-world utilization of the box-shadow property in theme.json utilizing an alternate technique that defines {custom} values. Within the theme, a {custom} box-shadow property is outlined as .settings.{custom}.shadow:
{
"model": 2,
"settings": {
// and so forth.
"{custom}": {
// and so forth.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// and so forth.
}
}Then, later within the file, the {custom} shadow property known as on a button aspect:
{
"model": 2,
"settings": {
// and so forth.
},
"kinds": {
"components": {
"button": {
// and so forth.
"shadow": "var(--wp--custom--shadow) !essential",
// and so forth.
":energetic": {
// and so forth.
"shadow": "2px 2px var(--wp--preset--color--primary) !essential"
}
},
// and so forth.
}
}I’m not completely positive about using !essential on this context. My hunch is that it’s an try to stop overriding these kinds utilizing the International Types UI within the Web site Editor, which has excessive specificity than kinds outlined in theme.json. Right here’s an anchored hyperlink to extra info from my earlier article on managing block theme kinds.
Replace: Turns on the market was a complete dialogue about this in Pull Request #34689, which notes that it was addressed in WordPress 5.9.
And there’s extra…
Along with shadows, the CSS define property additionally gained theme.json help in WordPress 6.1 and might be utilized to buttons and their interactive states. This GitHub PR exhibits an excellent instance.
"components": {
"button": {
"define": {
"offset": "3px",
"width": "3px",
"type": "dashed",
"coloration": "crimson"
},
":hover": {
"define": {
"offset": "3px",
"width": "3px",
"type": "stable",
"coloration": "blue"
}
}
}
}You can even discover the actual examples of how the define property works in different themes, together with Loudness, Block Canvas, and Blockbase.
Wrapping up
Who knew there was a lot to speak about with a single CSS property in the case of block theming in WordPress 6.1? We noticed the formally supported strategies for setting a box-shadow on blocks and particular person components, together with the interactive states of a button aspect. We additionally checked out how we might override shadows in a toddler theme. And, lastly, we cracked open a real-world instance that defines and units shadows in a {custom} property.
You could find extra detailed in-depth discussions concerning the WordPress and it’s box-shadow implementation on this GitHub PR. There may be additionally a GitHub proposal for including UI immediately in WordPress to set shadow values on blocks — you may leap on to an animated GIF displaying how that might work.
Talking of which, Justin Tadlock just lately developed a block that renders a progress bar and built-in field shadow controls into it. He exhibits it off on this video:
Extra info
If you happen to’d prefer to dig deeper into the box-shadow and different CSS properties which might be supported by the theme.json file in a block theme, listed here are a few assets you should use:
