{"id":122080,"date":"2026-03-15T22:35:08","date_gmt":"2026-03-15T22:35:08","guid":{"rendered":"https:\/\/make.wordpress.org\/core\/?p=122080"},"modified":"2026-03-15T22:35:08","modified_gmt":"2026-03-15T22:35:08","slug":"block-visibility-in-wordpress-7-0","status":"publish","type":"post","link":"https:\/\/make.wordpress.org\/core\/2026\/03\/15\/block-visibility-in-wordpress-7-0\/","title":{"rendered":"Block Visibility in WordPress 7.0"},"content":{"rendered":"

As of WordPress 6.9, you can hide any blockBlock<\/span> Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.<\/span><\/span><\/span> entirely with\u00a0blockVisibility: false<\/code>\u00a0in block metadata. In WordPress 7.0, viewport-based visibility rules give your users the power to show or hide blocks per device type \u2014 desktop, tablet, or mobile \u2014 without affecting other viewports.<\/p>\n\n\n\n

Controls are available in the block toolbar, block inspector sidebarSidebar<\/span> A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.<\/span><\/span><\/span>, and command palette to launch the block visibility options modal. In List View, blocks with active visibility rules show icons that indicate which viewports they are hidden on.<\/p>\n\n\n\n

Note: Blocks hidden by viewport are\u00a0rendered in the DOM<\/strong>.\u00a0The hiding happens in the CSSCSS<\/span> Cascading Style Sheets.<\/span><\/span><\/span>.<\/strong> <\/p>\n\n\n\n

That\u2019s different from\u00a0blockVisibility: false<\/code>. That keeps the block from rendering in the DOM, thus it can\u2019t ever show on the front end.<\/p>\n\n\n\n

Updated\u00a0blockVisibility<\/code>\u00a0metadata structure<\/h2>\n\n\n\n

The existing hide-everywhere behavior has NOT changed:<\/p>\n\n\n\n

{\n  \"metadata\": {\n    \"blockVisibility\": false\n  }\n}<\/code><\/pre>\n\n\n\n
But in WordPress 7.0, a new\u00a0viewport<\/code>\u00a0key gives you and your JSONJSON<\/span> JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.<\/span><\/span><\/span>-literate users finer control, per breakpoint:<\/p>\n\n\n\n
{\n  \"metadata\": {\n    \"blockVisibility\": {\n      \"viewport\": {\n        \"mobile\": false,\n        \"tablet\": true,\n        \"desktop\": true\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
The\u00a0viewport<\/code>\u00a0key is deliberately nested, leaving room for more sources (e.g., user role, time-based rules) to come in 7.1 and beyond.<\/p>\n\n\n\n
The three supported viewport keys are\u00a0mobile<\/code>,\u00a0tablet<\/code>, and\u00a0desktop<\/code>. In 7.0 these map to fixed breakpoints, but you can expect configurable breakpoints and\u00a0theme.json<\/code>\u00a0integration in WordPress 7.1 \u2014 see\u00a0#75707<\/a>.<\/p>\n\n\n\n
Here\u2019s how this all looks in serialized block markup:<\/p>\n\n\n\n
<!-- wp:paragraph {\"metadata\":{\"blockVisibility\":{\"viewport\":{\"mobile\":false}}}} -->\n<p>Hidden on mobile.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n\n\n\n
How to get your theme or pluginPlugin<\/span> A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https:\/\/wordpress.org\/plugins\/<\/a> or can be cost-based plugin from a third-party.<\/span><\/span><\/span> ready<\/h3>\n\n\n\n
Does your theme or plugin generate, transform, or parse block markup server-side? Then its\u00a0blockVisibility<\/code>\u00a0metadata field might now contain a boolean (false<\/code>) or an object ({ viewport: { ... } }<\/code>). If your code assumes a scalar value, you\u2019ll want to update it to handle both forms.<\/p>\n\n\n\n
Blocks and patterns that include hardcoded\u00a0blockVisibility<\/code>\u00a0metadata will work out of the box, and so will your reusable blocks that have visibility rules.<\/p>\n\n\n\n
If your blocks don\u2019t interact with markup on the server<\/h4>\n\n\n\n
Then you don\u2019t have to do anything! Viewport visibility is part of the\u00a0blockVisibility<\/code>\u00a0block support and applies automatically. You don\u2019t need a separate opt-in in\u00a0block.json<\/code>.<\/p>\n\n\n\n
Coming soon! To a future release near you<\/h3>\n\n\n\n
Current plans call for configurable breakpoints and\u00a0theme.json<\/code>\u00a0integration for block visibility to land in WordPress 7.1. At that point, you\u2019ll be able to let your themes and other products define almost any viewport labels and breakpoints you need, far beyond the fixed mobile\/tablet\/desktop defaults. Follow\u00a0#75707<\/a>\u00a0for progress.<\/p>\n\n\n\n
Props to @<\/span>andrewserong<\/a> and @<\/span>marybaum<\/a> for helping to write this dev notedev note<\/span> Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make\/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin\/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.<\/span><\/span><\/span>.<\/p>\n\n\n\n
\n\n\n\n
References<\/h2>\n\n\n\n