WordPress 7.0 introduces a key enhancement for developers: the ability to use pseudo-class selectors directly on blocks and their variations within theme.json. This update marks a significant shift from prior versions where such functionality was restricted to HTML elements like buttons and links under the styles.elements key.
Previously, implementing block-level interactive states required custom CSS solutions. The new capability allows developers to define pseudo-selectors such as :hover, :focus, :focus-visible, and :active directly in theme.json. This change not only simplifies the process but also enhances the customization potential for WordPress themes.
Pseudo-selectors in Action for Block Variations
The update extends beyond basic block functionality. Block style variations can now define interactive states, a feature particularly beneficial for variations like the “Outline” style. The “Outline” variation, for example, can have distinct visual styles that require different hover behaviors. Developers can now define these states directly in the theme.json file, streamlining the styling process.
Here’s how it works: for a core button block variation labeled “Outline,” developers can set the background and text colors for hover states within theme.json. This expands the design possibilities without needing to resort to external CSS, maintaining the integrity and simplicity of the theme.json-centric approach.
Technical Considerations and Implementation
While this feature is a theme.json-only API, meaning there is no new UI in Global Styles for these states in version 7.0, work is underway to integrate such capabilities in future releases. The current implementation ensures that any unsupported pseudo-selectors will be ignored, maintaining the stability of the theme.
It’s important to note that pseudo-selectors defined at both the block and variation levels operate independently. This flexibility allows developers to craft intricate, responsive designs without conflicts between different style definitions.
Credits for this development go to contributors @scruffian and @onemaggie for the implementation, and @mikachan and @scruffian for the technical review and proofreading. For further technical details, developers can refer to the WordPress Trac under ticket #64263.
What To Do
- Theme Developers: Update your theme.json to leverage new pseudo-selectors for enhanced style control.
- Site Operators: Monitor updates for themes utilizing these new features to ensure compatibility.
- Plugin Developers: Consider compatibility with themes using these new selectors in your plugin design.
