WordPress 7.0 is redefining block visibility with the introduction of viewport-based rules, a major leap forward for responsive design. Developers and site operators now have granular control over which blocks appear on mobile, tablet, or desktop devices.
Previously, WordPress 6.9 allowed blocks to be hidden entirely using blockVisibility: false in block metadata. WordPress 7.0 expands this feature by adding a viewport key for device-specific visibility rules. This enhancement lets users hide blocks on specific viewports while rendering them in the DOM. The hiding mechanism relies on CSS rather than removing blocks from the DOM entirely.
Viewport-Based Block Visibility in WordPress 7.0
The new viewport visibility controls are accessible through multiple interfaces: the block toolbar, the block inspector sidebar, and the command palette. A dedicated modal allows users to configure visibility rules with ease. In List View, blocks with active viewport rules display icons indicating their hidden statuses per device type.
For developers, the updated blockVisibility metadata structure introduces fine-grained control per breakpoint:
{
"metadata": {
"blockVisibility": {
"viewport": {
"mobile": false,
"tablet": true,
"desktop": true
}
}
}
}The three supported viewport keys—mobile, tablet, and desktop—currently map to fixed breakpoints. However, WordPress 7.1 is set to introduce configurable breakpoints and theme.json integration, allowing developers to define custom viewport labels and breakpoints.
Implications for Theme and Plugin Developers
The updated blockVisibility metadata field can now contain either a boolean or an object. This change impacts themes and plugins that generate, transform, or parse block markup server-side. Developers will need to ensure their code handles both scalar and object formats.
The good news is that blocks and patterns with hardcoded blockVisibility metadata will continue to function seamlessly. Additionally, reusable blocks with viewport visibility rules require no extra configuration.
For plugins or themes that do not interact with server-side block markup, no updates are required. The viewport visibility feature is part of the block support system and applies automatically.
Looking Ahead: Enhanced Configuration in WordPress 7.1
WordPress 7.0 lays the groundwork for further improvements in block visibility. Future releases, starting with WordPress 7.1, aim to support configurable breakpoints and theme.json integration. This will empower developers and theme authors to define custom viewport labels and breakpoints tailored to specific design needs.
Developers are encouraged to follow progress on ticket #75707 for updates on these features.
What To Do
- Theme Developers: Update server-side code to handle the new
blockVisibilityobject format. Test your themes for compatibility with viewport rules. - Plugin Developers: Ensure plugins that parse or transform block markup can handle both boolean and object metadata values.
- Site Operators: Explore the new block visibility controls in WordPress 7.0 to optimize your site’s responsiveness.
