I had a client last year—let’s call him Dave—who was obsessed with his site’s design system. Every single button had to have a specific hover, focus, and active state. Back then, my theme.json was only doing half the work, so I ended up with a massive custom CSS file just to handle button interactions. It was a total nightmare to maintain. Every time Dave wanted to change a primary brand color, I had to find and replace hex codes in three different places. Gutenberg block updates usually feel like incremental polish, but version 22.2 actually fixes some of these “real-world” annoyances.
The standout for me in this December 3rd release is the new support for button pseudo-states directly in theme.json. I’ll be honest: my first thought when block themes first launched was to just keep using the Customizer for hovers. I thought the theme.json approach wasn’t ready for prime time. I was wrong. By keeping everything in the JSON file, we finally get a single source of truth for the entire design system. Trust me on this, it’s much cleaner than enqueueing an extra stylesheet just for a button glow.
Styling Button Pseudo-states with Gutenberg Block Updates
Here is how the new structure looks. You can now nest :hover and :focus states directly under the button block styling. It saves a lot of time and prevents CSS specificity wars later on. Note the use of our agency’s standard prefixing for consistency.
{
"styles": {
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--bbioon-primary)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--bbioon-accent)"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--bbioon-secondary)"
}
}
}
}
}
}Then there is the Cover block. We’ve all been there: a client wants a high-def video background, and suddenly you’re hosting a 40MB MP4 on a server that’s already struggling. It’s bad for performance, and it’s bad for the hosting bill. Gutenberg 22.2 finally lets us use YouTube and Vimeo embeds as backgrounds in the Cover block. It’s a massive quality-of-life improvement. No more hacking together custom render filters just to offload bandwidth to a third party. This release is basically about letting us work smarter, not harder, which is a philosophy I’ve been preaching for 14 years.
I also noticed some solid work on the Breadcrumbs block. It’s still experimental, but the new support for post type archives and paginated content makes it actually usable for complex site structures. I saw the full changelog over at the official WordPress core blog, and the focus on accessibility—like fixing the “Invalid” nav item alerts—shows that the team is thinking about more than just shiny new features. With WordPress 6.9 having just dropped, these 161 PRs show a lot of focus on bug fixes and performance polish.
The Reality of Moving to Block-Based Logic
Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before. The shift toward a configuration-first approach in WordPress is great, but only if you know which levers to pull.
The lesson here is simple: stop fighting the editor. Features like the new “Activity layout” in Data Views (perfect for tracking revisions or logs) show that Gutenberg is growing into a serious administrative tool. If you’re still trying to build sites the way we did in 2018, you’re just creating technical debt for your future self. Get comfortable with theme.json and start offloading your media. Your server—and your clients—will thank you. Any questions on how to migrate your old CSS to this new format?
Leave a Reply