I stumbled throughout this tweet from Ana Segota on the lookout for a means 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 needs us to begin shifting primary types for block themes. Historically, we’d do any and all styling in type.css when working in a “basic” theme. However with the default Twenty Twenty-Three (TT3) theme that not too long ago shipped with WordPress 6.1 shifting all of its types to theme.json, we’re getting nearer and nearer to having the ability to do the identical with our personal themes. I lined 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 are unsupported in theme.json. For instance, in case you’re hoping to type one thing with like perspective-origin in theme.json, it simply received’t occur — not less than as I’m scripting this in the present day.
Ana is taking a look at 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 precise day that 6.1 launched. It’s not like assist for the property was a headline characteristic within the launch. The larger headlines had been extra associated to spacing and structure strategies for blocks and block themes.
Right here’s how we will apply a box-shadow to a particular block — say the Featured Picture block — in theme.json:
{
"model": 2,
"settings": {},
// and many others.
"types": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Questioning if the new shade syntax works? Me too! However once I tried — rgb(0 0 0 / 0.66) — I received nothing. Maybe that’s already within the works or may use a pull request.
Simple, proper? Positive, it’s means completely different than writing vanilla CSS in type.css and takes some getting used to. However it’s certainly potential as of the latest WordPress launch.
And, hey, we will 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 many others.
"types": {
"components": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}However Ana needs so as to add the shadow to the button’s :hover state. Fortunately, assist for styling interactive states for sure components, like buttons and hyperlinks, utilizing pseudo-classes — together with :hover, :focus, :lively, and :visited — additionally gained theme.json assist in WordPress 6.1.
{
"model": 2,
"settings": {},
// and many others.
"types": {
"components": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}If you happen to’re utilizing a mother or father theme, you’ll be able to definitely override a theme’s types in a toddler theme. Right here, I’m fully overriding TT3’s button types.
View full code
{
"model": 2,
"settings": {},
// and many others.
"types": {
"components": {
"button": {
"border": {
"radius": "0"
},
"shade": {
"background": "var(--wp--preset--color--tertiary)",
"textual content": "var(--wp--preset--color--contrast)"
},
"define": {
"offset": "3px",
"width": "3px",
"type": "dashed",
"shade": "purple"
},
"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": {
"shade": {
"background": "var(--wp--preset--color--contrast)",
"textual content": "var(--wp--preset--color--base)"
},
"define": {
"offset": "3px",
"width": "3px",
"type": "strong",
"shade": "blue"
}
},
":focus": {
"shade": {
"background": "var(--wp--preset--color--contrast)",
"textual content": "var(--wp--preset--color--base)"
}
},
":lively": {
"shade": {
"background": "var(--wp--preset--color--secondary)",
"textual content": "var(--wp--preset--color--base)"
}
}
}
}
}
}Right here’s how that renders:
One other approach to do it: {custom} types
The not too long ago launched Pixl block theme gives 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 many others.
"{custom}": {
// and many others.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// and many others.
}
}Then, later within the file, the {custom} shadow property known as on a button factor:
{
"model": 2,
"settings": {
// and many others.
},
"types": {
"components": {
"button": {
// and many others.
"shadow": "var(--wp--custom--shadow) !vital",
// and many others.
":lively": {
// and many others.
"shadow": "2px 2px var(--wp--preset--color--primary) !vital"
}
},
// and many others.
}
}I’m not completely certain about using !vital on this context. My hunch is that it’s an try to forestall overriding these types utilizing the International Types UI within the Web site Editor, which has excessive specificity than types outlined in theme.json. Right here’s an anchored hyperlink to extra info from my earlier article on managing block theme types.
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 assist in WordPress 6.1 and might be utilized to buttons and their interactive states. This GitHub PR reveals instance.
"components": {
"button": {
"define": {
"offset": "3px",
"width": "3px",
"type": "dashed",
"shade": "purple"
},
":hover": {
"define": {
"offset": "3px",
"width": "3px",
"type": "strong",
"shade": "blue"
}
}
}
}You may as well 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 factor. We additionally checked out how we may 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 will discover 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 instantly in WordPress to set shadow values on blocks — you’ll be able to bounce on to an animated GIF exhibiting how that might work.
Talking of which, Justin Tadlock not too long ago developed a block that renders a progress bar and built-in field shadow controls into it. He reveals 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 are supported by the theme.json file in a block theme, listed below are a few sources you should utilize:
