Introduce responsive editing

[mtias]

WIP: Do not merge!

This pull request introduces a responsive editing mode to the block editor, allowing users to hide blocks on specific viewports (desktop, tablet, mobile). While it focuses on expanding the block visibility work, this editing mode is meant to be the seed to expand responsive editing to style attributes in general.

Closes #72502; See #19909.

---

When responsive editing is enabled via the preview dropdown, users can hide blocks on the current viewport using the block toolbar or ellipsis menu. Hidden blocks remain visible in the List View with visibility indicators showing which devices they're hidden on. The "Delete" action is replaced with "Hide" in responsive mode, emphasizing the contextual action. This also works for keyboard deletion and it renders a notice that the block was hidden.

---

Block Inspector

When a block is hidden on the current viewport, the block inspector displays a visibility notice at the top of the block inspector. This is also present when a block is hidden everywhere.

---

Responsive Toggle

The preview dropdown in the editor header includes a "Responsive editing" toggle. When enabled, the toggle activates responsive editing mode across the editor, indicated by a purple highlight on the device icon. This mode changes how visibility controls behave: the settings menu displays viewport-specific "Hide on [device]" / "Show on [device]" actions instead of opening the modal, and deleting a block hides it on the current viewport rather than removing it entirely. Users can switch between device previews while responsive editing is active to manage visibility across different viewports.

---

Visibility Modal

When responsive editing is not enabled, clicking "Hide" in the block settings menu opens a visibility modal. This modal provides granular control with checkboxes for hiding on desktop, tablet, and mobile individually, plus a "Hide everywhere" option (current behavior in 6.9) that removes the block from both the editor canvas and frontend entirely. The modal explains the difference: per-viewport hiding keeps the block in the published markup (for CSS-based responsive hiding), while "Hide everywhere" omits it completely. Both options note that hidden blocks can be accessed via List View. This may need more work on the copy.

---

Implementation Details

The feature introduces a blockVisibility metadata attribute that stores visibility state per viewport. When set to false, the block is completely hidden (existing behavior). When set to an object like { tablet: false, mobile: false }, the block is hidden only on those viewports via CSS media queries.

On the frontend, the Style Engine generates responsive CSS using rules_group for media query support. Had to add the display property through safe_style_css filter otherwise the output would be filtered out. We should move this into the style engine itself. CSS is output in the document head via the block-supports context, with selectors combined per media query to minimize output.

In the editor, visibility state is managed through a shared useBlockVisibility hook, with the isBlockHidden selector made viewport-aware to show/hide blocks based on the current device preview.

---

Pending tasks:

• [ ] Absorb display property in style engine logic, not ad hoc.
• [ ] Consider making breakpoints configurable (in theme.json and eventually in the UI). To do separately.
• [ ] Explore more feature awareness in the UI when the mode is engaged.
• [ ] Consider having a way to see all responsive changes together and clear them / reset them.

[github-actions[bot]]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Status] In Progress, Needs Design Feedback.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @lesley-pizza.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: lesley-pizza.

Co-authored-by: mtias <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: danieliser <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: sinanisler <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: jessefriedman <[email protected]>
Co-authored-by: hanneslsm <[email protected]>
Co-authored-by: theaminuli <[email protected]>
Co-authored-by: eirichmond <[email protected]>
Co-authored-by: bgardner <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mtias]

Forgot to show how list view looks:

[github-actions[bot]]

Size Change: +3.87 kB (+0.15%)

Total Size: 2.58 MB

Filename	Size	Change
build/scripts/block-editor/index.min.js	317 kB	+2.96 kB (+0.94%)
build/scripts/editor/index.min.js	284 kB	+356 B (+0.13%)
build/styles/block-editor/style-rtl.css	16.6 kB	+183 B (+1.12%)
build/styles/block-editor/style.css	16.5 kB	+187 B (+1.14%)
build/styles/editor/style-rtl.css	18.7 kB	+95 B (+0.51%)
build/styles/editor/style.css	18.7 kB	+96 B (+0.52%)

ℹ️ View Unchanged

Filename	Size
build/modules/a11y/index.min.js	355 B
build/modules/abilities/index.min.js	42.3 kB
build/modules/block-editor/utils/fit-text-frontend.min.js	549 B
build/modules/block-library/accordion/view.min.js	779 B
build/modules/block-library/file/view.min.js	346 B
build/modules/block-library/form/view.min.js	528 B
build/modules/block-library/image/view.min.js	1.95 kB
build/modules/block-library/navigation/view.min.js	1.03 kB
build/modules/block-library/query/view.min.js	518 B
build/modules/block-library/search/view.min.js	498 B
build/modules/block-library/tabs/view.min.js	859 B
build/modules/boot/index.min.js	103 kB
build/modules/core-abilities/index.min.js	890 B
build/modules/edit-site-init/index.min.js	2.14 kB
build/modules/interactivity-router/full-page.min.js	451 B
build/modules/interactivity-router/index.min.js	11.5 kB
build/modules/interactivity/index.min.js	14.9 kB
build/modules/latex-to-mathml/index.min.js	56.5 kB
build/modules/latex-to-mathml/loader.min.js	131 B
build/modules/lazy-editor/index.min.js	18.8 kB
build/modules/route/index.min.js	24.6 kB
build/modules/workflow/index.min.js	36.8 kB
build/scripts/a11y/index.min.js	1.06 kB
build/scripts/annotations/index.min.js	2.38 kB
build/scripts/api-fetch/index.min.js	2.83 kB
build/scripts/autop/index.min.js	2.18 kB
build/scripts/blob/index.min.js	631 B
build/scripts/block-directory/index.min.js	8.03 kB
build/scripts/block-library/index.min.js	278 kB
build/scripts/block-serialization-default-parser/index.min.js	1.16 kB
build/scripts/block-serialization-spec-parser/index.min.js	3.08 kB
build/scripts/blocks/index.min.js	56.4 kB
build/scripts/commands/index.min.js	19.9 kB
build/scripts/components/index.min.js	273 kB
build/scripts/compose/index.min.js	13.9 kB
build/scripts/core-commands/index.min.js	4.13 kB
build/scripts/core-data/index.min.js	86.7 kB
build/scripts/customize-widgets/index.min.js	12.3 kB
build/scripts/data-controls/index.min.js	793 B
build/scripts/data/index.min.js	9.62 kB
build/scripts/date/index.min.js	23.6 kB
build/scripts/deprecated/index.min.js	752 B
build/scripts/dom-ready/index.min.js	476 B
build/scripts/dom/index.min.js	4.91 kB
build/scripts/edit-post/index.min.js	16.3 kB
build/scripts/edit-site/index.min.js	234 kB
build/scripts/edit-widgets/index.min.js	20 kB
build/scripts/element/index.min.js	5.19 kB
build/scripts/escape-html/index.min.js	586 B
build/scripts/format-library/index.min.js	10.8 kB
build/scripts/hooks/index.min.js	1.83 kB
build/scripts/html-entities/index.min.js	494 B
build/scripts/i18n/index.min.js	2.46 kB
build/scripts/is-shallow-equal/index.min.js	568 B
build/scripts/keyboard-shortcuts/index.min.js	1.57 kB
build/scripts/keycodes/index.min.js	1.53 kB
build/scripts/list-reusable-blocks/index.min.js	2.44 kB
build/scripts/media-utils/index.min.js	69.5 kB
build/scripts/notices/index.min.js	1.11 kB
build/scripts/nux/index.min.js	1.88 kB
build/scripts/patterns/index.min.js	7.87 kB
build/scripts/plugins/index.min.js	2.14 kB
build/scripts/preferences-persistence/index.min.js	2.15 kB
build/scripts/preferences/index.min.js	3.31 kB
build/scripts/primitives/index.min.js	1.01 kB
build/scripts/priority-queue/index.min.js	1.61 kB
build/scripts/private-apis/index.min.js	1.07 kB
build/scripts/react-i18n/index.min.js	832 B
build/scripts/react-refresh-entry/index.min.js	9.44 kB
build/scripts/react-refresh-runtime/index.min.js	3.59 kB
build/scripts/redux-routine/index.min.js	3.36 kB
build/scripts/reusable-blocks/index.min.js	2.93 kB
build/scripts/rich-text/index.min.js	12.9 kB
build/scripts/router/index.min.js	5.96 kB
build/scripts/server-side-render/index.min.js	1.91 kB
build/scripts/shortcode/index.min.js	1.58 kB
build/scripts/style-engine/index.min.js	2.33 kB
build/scripts/theme/index.min.js	20.8 kB
build/scripts/token-list/index.min.js	739 B
build/scripts/undo-manager/index.min.js	917 B
build/scripts/url/index.min.js	3.98 kB
build/scripts/vendors/react-dom.min.js	43 kB
build/scripts/vendors/react-jsx-runtime.min.js	691 B
build/scripts/vendors/react.min.js	4.27 kB
build/scripts/viewport/index.min.js	1.22 kB
build/scripts/warning/index.min.js	454 B
build/scripts/widgets/index.min.js	7.81 kB
build/scripts/wordcount/index.min.js	1.04 kB
build/styles/block-directory/style-rtl.css	1.05 kB
build/styles/block-directory/style.css	1.05 kB
build/styles/block-editor/content-rtl.css	4.8 kB
build/styles/block-editor/content.css	4.79 kB
build/styles/block-editor/default-editor-styles-rtl.css	224 B
build/styles/block-editor/default-editor-styles.css	224 B
build/styles/block-library/accordion-heading/style-rtl.css	325 B
build/styles/block-library/accordion-heading/style.css	325 B
build/styles/block-library/accordion-item/style-rtl.css	180 B
build/styles/block-library/accordion-item/style.css	180 B
build/styles/block-library/accordion-panel/style-rtl.css	99 B
build/styles/block-library/accordion-panel/style.css	99 B
build/styles/block-library/accordion/style-rtl.css	62 B
build/styles/block-library/accordion/style.css	62 B
build/styles/block-library/archives/editor-rtl.css	61 B
build/styles/block-library/archives/editor.css	61 B
build/styles/block-library/archives/style-rtl.css	90 B
build/styles/block-library/archives/style.css	90 B
build/styles/block-library/audio/editor-rtl.css	149 B
build/styles/block-library/audio/editor.css	151 B
build/styles/block-library/audio/style-rtl.css	132 B
build/styles/block-library/audio/style.css	132 B
build/styles/block-library/audio/theme-rtl.css	134 B
build/styles/block-library/audio/theme.css	134 B
build/styles/block-library/avatar/editor-rtl.css	115 B
build/styles/block-library/avatar/editor.css	115 B
build/styles/block-library/avatar/style-rtl.css	104 B
build/styles/block-library/avatar/style.css	104 B
build/styles/block-library/breadcrumbs/style-rtl.css	203 B
build/styles/block-library/breadcrumbs/style.css	203 B
build/styles/block-library/button/editor-rtl.css	265 B
build/styles/block-library/button/editor.css	265 B
build/styles/block-library/button/style-rtl.css	554 B
build/styles/block-library/button/style.css	554 B
build/styles/block-library/buttons/editor-rtl.css	291 B
build/styles/block-library/buttons/editor.css	291 B
build/styles/block-library/buttons/style-rtl.css	349 B
build/styles/block-library/buttons/style.css	349 B
build/styles/block-library/calendar/style-rtl.css	239 B
build/styles/block-library/calendar/style.css	239 B
build/styles/block-library/categories/editor-rtl.css	132 B
build/styles/block-library/categories/editor.css	131 B
build/styles/block-library/categories/style-rtl.css	152 B
build/styles/block-library/categories/style.css	152 B
build/styles/block-library/classic-rtl.css	321 B
build/styles/block-library/classic.css	321 B
build/styles/block-library/code/editor-rtl.css	53 B
build/styles/block-library/code/editor.css	53 B
build/styles/block-library/code/style-rtl.css	139 B
build/styles/block-library/code/style.css	139 B
build/styles/block-library/code/theme-rtl.css	122 B
build/styles/block-library/code/theme.css	122 B
build/styles/block-library/columns/editor-rtl.css	108 B
build/styles/block-library/columns/editor.css	108 B
build/styles/block-library/columns/style-rtl.css	421 B
build/styles/block-library/columns/style.css	421 B
build/styles/block-library/comment-author-avatar/editor-rtl.css	124 B
build/styles/block-library/comment-author-avatar/editor.css	124 B
build/styles/block-library/comment-author-name/style-rtl.css	72 B
build/styles/block-library/comment-author-name/style.css	72 B
build/styles/block-library/comment-content/style-rtl.css	120 B
build/styles/block-library/comment-content/style.css	120 B
build/styles/block-library/comment-date/style-rtl.css	65 B
build/styles/block-library/comment-date/style.css	65 B
build/styles/block-library/comment-edit-link/style-rtl.css	70 B
build/styles/block-library/comment-edit-link/style.css	70 B
build/styles/block-library/comment-reply-link/style-rtl.css	71 B
build/styles/block-library/comment-reply-link/style.css	71 B
build/styles/block-library/comment-template/style-rtl.css	191 B
build/styles/block-library/comment-template/style.css	191 B
build/styles/block-library/comments-pagination-numbers/editor-rtl.css	122 B
build/styles/block-library/comments-pagination-numbers/editor.css	121 B
build/styles/block-library/comments-pagination/editor-rtl.css	168 B
build/styles/block-library/comments-pagination/editor.css	168 B
build/styles/block-library/comments-pagination/style-rtl.css	201 B
build/styles/block-library/comments-pagination/style.css	201 B
build/styles/block-library/comments-title/editor-rtl.css	75 B
build/styles/block-library/comments-title/editor.css	75 B
build/styles/block-library/comments/editor-rtl.css	842 B
build/styles/block-library/comments/editor.css	842 B
build/styles/block-library/comments/style-rtl.css	637 B
build/styles/block-library/comments/style.css	637 B
build/styles/block-library/common-rtl.css	1.11 kB
build/styles/block-library/common.css	1.11 kB
build/styles/block-library/cover/editor-rtl.css	631 B
build/styles/block-library/cover/editor.css	631 B
build/styles/block-library/cover/style-rtl.css	1.82 kB
build/styles/block-library/cover/style.css	1.81 kB
build/styles/block-library/details/editor-rtl.css	65 B
build/styles/block-library/details/editor.css	65 B
build/styles/block-library/details/style-rtl.css	86 B
build/styles/block-library/details/style.css	86 B
build/styles/block-library/editor-elements-rtl.css	75 B
build/styles/block-library/editor-elements.css	75 B
build/styles/block-library/editor-rtl.css	11.8 kB
build/styles/block-library/editor.css	11.8 kB
build/styles/block-library/elements-rtl.css	54 B
build/styles/block-library/elements.css	54 B
build/styles/block-library/embed/editor-rtl.css	331 B
build/styles/block-library/embed/editor.css	331 B
build/styles/block-library/embed/style-rtl.css	448 B
build/styles/block-library/embed/style.css	448 B
build/styles/block-library/embed/theme-rtl.css	133 B
build/styles/block-library/embed/theme.css	133 B
build/styles/block-library/file/editor-rtl.css	324 B
build/styles/block-library/file/editor.css	324 B
build/styles/block-library/file/style-rtl.css	278 B
build/styles/block-library/file/style.css	278 B
build/styles/block-library/footnotes/style-rtl.css	198 B
build/styles/block-library/footnotes/style.css	197 B
build/styles/block-library/form-input/editor-rtl.css	229 B
build/styles/block-library/form-input/editor.css	229 B
build/styles/block-library/form-input/style-rtl.css	366 B
build/styles/block-library/form-input/style.css	366 B
build/styles/block-library/form-submission-notification/editor-rtl.css	344 B
build/styles/block-library/form-submission-notification/editor.css	341 B
build/styles/block-library/form-submit-button/style-rtl.css	69 B
build/styles/block-library/form-submit-button/style.css	69 B
build/styles/block-library/freeform/editor-rtl.css	2.59 kB
build/styles/block-library/freeform/editor.css	2.59 kB
build/styles/block-library/gallery/editor-rtl.css	615 B
build/styles/block-library/gallery/editor.css	616 B
build/styles/block-library/gallery/style-rtl.css	1.84 kB
build/styles/block-library/gallery/style.css	1.84 kB
build/styles/block-library/gallery/theme-rtl.css	108 B
build/styles/block-library/gallery/theme.css	108 B
build/styles/block-library/group/editor-rtl.css	335 B
build/styles/block-library/group/editor.css	335 B
build/styles/block-library/group/style-rtl.css	103 B
build/styles/block-library/group/style.css	103 B
build/styles/block-library/group/theme-rtl.css	79 B
build/styles/block-library/group/theme.css	79 B
build/styles/block-library/heading/style-rtl.css	205 B
build/styles/block-library/heading/style.css	205 B
build/styles/block-library/html/editor-rtl.css	419 B
build/styles/block-library/html/editor.css	419 B
build/styles/block-library/image/editor-rtl.css	763 B
build/styles/block-library/image/editor.css	763 B
build/styles/block-library/image/style-rtl.css	1.6 kB
build/styles/block-library/image/style.css	1.59 kB
build/styles/block-library/image/theme-rtl.css	137 B
build/styles/block-library/image/theme.css	137 B
build/styles/block-library/latest-comments/style-rtl.css	355 B
build/styles/block-library/latest-comments/style.css	354 B
build/styles/block-library/latest-posts/editor-rtl.css	139 B
build/styles/block-library/latest-posts/editor.css	138 B
build/styles/block-library/latest-posts/style-rtl.css	520 B
build/styles/block-library/latest-posts/style.css	520 B
build/styles/block-library/list/style-rtl.css	107 B
build/styles/block-library/list/style.css	107 B
build/styles/block-library/loginout/style-rtl.css	61 B
build/styles/block-library/loginout/style.css	61 B
build/styles/block-library/math/editor-rtl.css	105 B
build/styles/block-library/math/editor.css	105 B
build/styles/block-library/math/style-rtl.css	61 B
build/styles/block-library/math/style.css	61 B
build/styles/block-library/media-text/editor-rtl.css	321 B
build/styles/block-library/media-text/editor.css	320 B
build/styles/block-library/media-text/style-rtl.css	543 B
build/styles/block-library/media-text/style.css	542 B
build/styles/block-library/more/editor-rtl.css	393 B
build/styles/block-library/more/editor.css	393 B
build/styles/block-library/navigation-link/editor-rtl.css	645 B
build/styles/block-library/navigation-link/editor.css	647 B
build/styles/block-library/navigation-link/style-rtl.css	190 B
build/styles/block-library/navigation-link/style.css	188 B
build/styles/block-library/navigation-submenu/editor-rtl.css	295 B
build/styles/block-library/navigation-submenu/editor.css	294 B
build/styles/block-library/navigation/editor-rtl.css	2.25 kB
build/styles/block-library/navigation/editor.css	2.26 kB
build/styles/block-library/navigation/style-rtl.css	2.27 kB
build/styles/block-library/navigation/style.css	2.25 kB
build/styles/block-library/nextpage/editor-rtl.css	392 B
build/styles/block-library/nextpage/editor.css	392 B
build/styles/block-library/page-list/editor-rtl.css	356 B
build/styles/block-library/page-list/editor.css	356 B
build/styles/block-library/page-list/style-rtl.css	192 B
build/styles/block-library/page-list/style.css	192 B
build/styles/block-library/paragraph/editor-rtl.css	251 B
build/styles/block-library/paragraph/editor.css	251 B
build/styles/block-library/paragraph/style-rtl.css	341 B
build/styles/block-library/paragraph/style.css	340 B
build/styles/block-library/post-author-biography/style-rtl.css	74 B
build/styles/block-library/post-author-biography/style.css	74 B
build/styles/block-library/post-author-name/style-rtl.css	69 B
build/styles/block-library/post-author-name/style.css	69 B
build/styles/block-library/post-author/style-rtl.css	188 B
build/styles/block-library/post-author/style.css	189 B
build/styles/block-library/post-comments-count/style-rtl.css	72 B
build/styles/block-library/post-comments-count/style.css	72 B
build/styles/block-library/post-comments-form/editor-rtl.css	96 B
build/styles/block-library/post-comments-form/editor.css	96 B
build/styles/block-library/post-comments-form/style-rtl.css	525 B
build/styles/block-library/post-comments-form/style.css	525 B
build/styles/block-library/post-comments-link/style-rtl.css	71 B
build/styles/block-library/post-comments-link/style.css	71 B
build/styles/block-library/post-content/style-rtl.css	61 B
build/styles/block-library/post-content/style.css	61 B
build/styles/block-library/post-date/style-rtl.css	62 B
build/styles/block-library/post-date/style.css	62 B
build/styles/block-library/post-excerpt/editor-rtl.css	71 B
build/styles/block-library/post-excerpt/editor.css	71 B
build/styles/block-library/post-excerpt/style-rtl.css	155 B
build/styles/block-library/post-excerpt/style.css	155 B
build/styles/block-library/post-featured-image/editor-rtl.css	719 B
build/styles/block-library/post-featured-image/editor.css	717 B
build/styles/block-library/post-featured-image/style-rtl.css	347 B
build/styles/block-library/post-featured-image/style.css	347 B
build/styles/block-library/post-navigation-link/style-rtl.css	215 B
build/styles/block-library/post-navigation-link/style.css	214 B
build/styles/block-library/post-template/style-rtl.css	414 B
build/styles/block-library/post-template/style.css	414 B
build/styles/block-library/post-terms/style-rtl.css	96 B
build/styles/block-library/post-terms/style.css	96 B
build/styles/block-library/post-time-to-read/style-rtl.css	70 B
build/styles/block-library/post-time-to-read/style.css	70 B
build/styles/block-library/post-title/style-rtl.css	162 B
build/styles/block-library/post-title/style.css	162 B
build/styles/block-library/preformatted/style-rtl.css	125 B
build/styles/block-library/preformatted/style.css	125 B
build/styles/block-library/pullquote/editor-rtl.css	133 B
build/styles/block-library/pullquote/editor.css	133 B
build/styles/block-library/pullquote/style-rtl.css	365 B
build/styles/block-library/pullquote/style.css	365 B
build/styles/block-library/pullquote/theme-rtl.css	176 B
build/styles/block-library/pullquote/theme.css	176 B
build/styles/block-library/query-pagination-numbers/editor-rtl.css	121 B
build/styles/block-library/query-pagination-numbers/editor.css	118 B
build/styles/block-library/query-pagination/editor-rtl.css	154 B
build/styles/block-library/query-pagination/editor.css	154 B
build/styles/block-library/query-pagination/style-rtl.css	237 B
build/styles/block-library/query-pagination/style.css	237 B
build/styles/block-library/query-title/style-rtl.css	64 B
build/styles/block-library/query-title/style.css	64 B
build/styles/block-library/query-total/style-rtl.css	64 B
build/styles/block-library/query-total/style.css	64 B
build/styles/block-library/query/editor-rtl.css	438 B
build/styles/block-library/query/editor.css	438 B
build/styles/block-library/quote/style-rtl.css	238 B
build/styles/block-library/quote/style.css	238 B
build/styles/block-library/quote/theme-rtl.css	233 B
build/styles/block-library/quote/theme.css	236 B
build/styles/block-library/read-more/style-rtl.css	131 B
build/styles/block-library/read-more/style.css	131 B
build/styles/block-library/reset-rtl.css	472 B
build/styles/block-library/reset.css	472 B
build/styles/block-library/rss/editor-rtl.css	126 B
build/styles/block-library/rss/editor.css	126 B
build/styles/block-library/rss/style-rtl.css	284 B
build/styles/block-library/rss/style.css	283 B
build/styles/block-library/search/editor-rtl.css	199 B
build/styles/block-library/search/editor.css	199 B
build/styles/block-library/search/style-rtl.css	665 B
build/styles/block-library/search/style.css	666 B
build/styles/block-library/search/theme-rtl.css	113 B
build/styles/block-library/search/theme.css	113 B
build/styles/block-library/separator/editor-rtl.css	100 B
build/styles/block-library/separator/editor.css	100 B
build/styles/block-library/separator/style-rtl.css	248 B
build/styles/block-library/separator/style.css	248 B
build/styles/block-library/separator/theme-rtl.css	195 B
build/styles/block-library/separator/theme.css	195 B
build/styles/block-library/shortcode/editor-rtl.css	286 B
build/styles/block-library/shortcode/editor.css	286 B
build/styles/block-library/site-logo/editor-rtl.css	773 B
build/styles/block-library/site-logo/editor.css	770 B
build/styles/block-library/site-logo/style-rtl.css	218 B
build/styles/block-library/site-logo/style.css	218 B
build/styles/block-library/site-tagline/editor-rtl.css	87 B
build/styles/block-library/site-tagline/editor.css	87 B
build/styles/block-library/site-tagline/style-rtl.css	65 B
build/styles/block-library/site-tagline/style.css	65 B
build/styles/block-library/site-title/editor-rtl.css	85 B
build/styles/block-library/site-title/editor.css	85 B
build/styles/block-library/site-title/style-rtl.css	143 B
build/styles/block-library/site-title/style.css	143 B
build/styles/block-library/social-link/editor-rtl.css	314 B
build/styles/block-library/social-link/editor.css	314 B
build/styles/block-library/social-links/editor-rtl.css	339 B
build/styles/block-library/social-links/editor.css	338 B
build/styles/block-library/social-links/style-rtl.css	1.51 kB
build/styles/block-library/social-links/style.css	1.51 kB
build/styles/block-library/spacer/editor-rtl.css	346 B
build/styles/block-library/spacer/editor.css	346 B
build/styles/block-library/spacer/style-rtl.css	48 B
build/styles/block-library/spacer/style.css	48 B
build/styles/block-library/style-rtl.css	16.5 kB
build/styles/block-library/style.css	16.5 kB
build/styles/block-library/tab/style-rtl.css	202 B
build/styles/block-library/tab/style.css	202 B
build/styles/block-library/table-of-contents/style-rtl.css	83 B
build/styles/block-library/table-of-contents/style.css	83 B
build/styles/block-library/table/editor-rtl.css	394 B
build/styles/block-library/table/editor.css	394 B
build/styles/block-library/table/style-rtl.css	641 B
build/styles/block-library/table/style.css	640 B
build/styles/block-library/table/theme-rtl.css	152 B
build/styles/block-library/table/theme.css	152 B
build/styles/block-library/tabs/editor-rtl.css	236 B
build/styles/block-library/tabs/editor.css	236 B
build/styles/block-library/tabs/style-rtl.css	983 B
build/styles/block-library/tabs/style.css	983 B
build/styles/block-library/tag-cloud/editor-rtl.css	92 B
build/styles/block-library/tag-cloud/editor.css	92 B
build/styles/block-library/tag-cloud/style-rtl.css	248 B
build/styles/block-library/tag-cloud/style.css	248 B
build/styles/block-library/template-part/editor-rtl.css	368 B
build/styles/block-library/template-part/editor.css	368 B
build/styles/block-library/template-part/theme-rtl.css	113 B
build/styles/block-library/template-part/theme.css	113 B
build/styles/block-library/term-count/style-rtl.css	63 B
build/styles/block-library/term-count/style.css	63 B
build/styles/block-library/term-description/style-rtl.css	126 B
build/styles/block-library/term-description/style.css	126 B
build/styles/block-library/term-name/style-rtl.css	62 B
build/styles/block-library/term-name/style.css	62 B
build/styles/block-library/term-template/editor-rtl.css	225 B
build/styles/block-library/term-template/editor.css	225 B
build/styles/block-library/term-template/style-rtl.css	114 B
build/styles/block-library/term-template/style.css	114 B
build/styles/block-library/text-columns/editor-rtl.css	95 B
build/styles/block-library/text-columns/editor.css	95 B
build/styles/block-library/text-columns/style-rtl.css	165 B
build/styles/block-library/text-columns/style.css	165 B
build/styles/block-library/theme-rtl.css	715 B
build/styles/block-library/theme.css	719 B
build/styles/block-library/verse/style-rtl.css	123 B
build/styles/block-library/verse/style.css	123 B
build/styles/block-library/video/editor-rtl.css	415 B
build/styles/block-library/video/editor.css	416 B
build/styles/block-library/video/style-rtl.css	202 B
build/styles/block-library/video/style.css	202 B
build/styles/block-library/video/theme-rtl.css	134 B
build/styles/block-library/video/theme.css	134 B
build/styles/commands/style-rtl.css	1.72 kB
build/styles/commands/style.css	1.72 kB
build/styles/components/style-rtl.css	14 kB
build/styles/components/style.css	14 kB
build/styles/customize-widgets/style-rtl.css	1.44 kB
build/styles/customize-widgets/style.css	1.44 kB
build/styles/edit-post/classic-rtl.css	426 B
build/styles/edit-post/classic.css	427 B
build/styles/edit-post/style-rtl.css	3.38 kB
build/styles/edit-post/style.css	3.38 kB
build/styles/edit-site/style-rtl.css	15.9 kB
build/styles/edit-site/style.css	15.9 kB
build/styles/edit-widgets/style-rtl.css	4.62 kB
build/styles/edit-widgets/style.css	4.62 kB
build/styles/format-library/style-rtl.css	326 B
build/styles/format-library/style.css	326 B
build/styles/list-reusable-blocks/style-rtl.css	1.02 kB
build/styles/list-reusable-blocks/style.css	1.02 kB
build/styles/media-utils/style-rtl.css	400 B
build/styles/media-utils/style.css	400 B
build/styles/nux/style-rtl.css	622 B
build/styles/nux/style.css	618 B
build/styles/patterns/style-rtl.css	611 B
build/styles/patterns/style.css	611 B
build/styles/preferences/style-rtl.css	415 B
build/styles/preferences/style.css	415 B
build/styles/reusable-blocks/style-rtl.css	275 B
build/styles/reusable-blocks/style.css	275 B
build/styles/widgets/style-rtl.css	1.17 kB
build/styles/widgets/style.css	1.18 kB

_{compressed-size-action}

[github-actions[bot]]

Flaky tests detected in 2e38185f1eb6167c92c8c04eeaeb819bb8fa2eee. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20105294258 📝 Reported issues:

• #68604 in /test/e2e/specs/site-editor/template-revert.spec.js

[ramonjd]

Just looking at an existing POC to see what can be combined and what tasks we can record for follow ups/further development:

• https://github.com/WordPress/gutenberg/pull/73735

At first glance, it looks to address most of what I was looking at and works in a very similar way. I estimate we're the same page about future follow ups too.

There are only a few, minor differences.

The device icons, and inspector bar hints are a great addition to reduce user forgetfulness or new user confusion as to why some blocks are disappearing.

Like you've also noted, it was mentioned, and I may as well quote myself, that it'd be helpful to the user to have "a way for users to quickly locate them and toggle all hidden blocks on and off in one place, rather than have the user click around trying to remember which of their blocks they've hidden".

Your PR has a slightly larger scope in some ways, e.g., "responsive editing mode" (related to https://github.com/WordPress/gutenberg/issues/19909?) but reduced in others.

In https://github.com/WordPress/gutenberg/pull/73735, I was trying to honour the viewport width in conjunction with the preview toggler, which is more how the frontend would work. So in "Desktop", narrowing the window width would also trigger the breakpoints. Probably simpler to leave that out, and focus on the preview categories.

Another architectural question for later that should help make the other pending tasks (I'm mainly thinking of configurable values in theme.json e.g., https://github.com/WordPress/gutenberg/issues/27107) is that I think we need a single source of truth for both breakpoints AND device type selection. For example, by extending the @wordpress/viewport store, or even finding a home for this in @wordpress/global-styles-engine. Breakpoint logic is duplicated across 3+ packages. Related comment.

How do you want to proceed? Happy to close my PR if you want to continue here.

My idea was to use the POCs to list out a series of smaller, iterable tasks, e.g., set up PHP backend + unit tests, create responsive store + CSS in the editor, hook up with current block visibility etc.

Cheers!

[danieliser]

Adding duplicate comments here as this seems relevant place for them as well.

---

FWIW This is what we do in [Content Control](, add a floating icon indicator directly on the blocks with visiblity controls applied.

I'd be all for an official way to add Block Indicators of some kind, device symbols for Device controls, custom ones for our user based restrictions etc.

---

As for choosing them, sidebar inspector for us. Can be copied from block to block, disabled etc.

Also we have global block rules in our pro version, so the idea of applying it to all blocks of a type is also possible.

[annezazu]

Gave this a test and found it works really well between the List view interaction, the snackbar notice, and the intuitiveness in the hiding/showing feature. Where it falls apart are in some of the smaller interactions. In particular:

• The block settings only says the block is hidden on the view you have whereas the list view and block toolbar reflects everywhere it's hidden.
• The hide/show option in the block toolbar has incorrect spacing.
• The hide/show option in the block toolbar is confusing in terms of being able to toggle on/off hiding/showing but only for whatever view you are looking at. This took me a while to understand. I'd almost expect a dropdown option to hide show or to only show where it's hidden everywhere based on the view you have (desktop, tablet, mobile).

Here's a quick view of me testing and running into some of this:

https://github.com/user-attachments/assets/7d4aca40-d050-40c8-a2bc-33cfdf3abd27

I love the bones of this though!

[jasmussen]

Exciting work, finally we touch this aspect, it's been a long time coming.

There are a lot of little details to refine and polish (CC: @WordPress/gutenberg-design for awareness), but honestly as far as a basic interface for this, it's working surprisingly well for me. Here's a visual flow:

To be reductive about it: there's a screen size dropdown that allows you to apply a change to that breakpoint only.

While there's much more nuance and details to hammer out, that's really the crux of the user experience, and commenting on just this, I'm into it. What it enables is specifically what has been outlined in older issues, that even if intrinsic reponsiveness carries its own benefits, there will always be a need for certain actions to apply only to certain breakpoints.

I'd love for as many people as possible to test this PR and provide their feedback, so that what we can refine and land in 7.0 is the best possible default experience. Top of mind for me is solving the paradox of discoverability: in order to use these responsive tools and accurately preview each breakpoint, hidden blocks need to be actually hidden from the WYSIWYG canvas. At the same time, we are hearing a lot of feedback from users that once a block is hidden, it's—well—hard to find again.

[sinanisler]

I think it should be just enabled by default that switch shouldnt be even needed it is not intuitive. it would be easier for theme and plugins developers as well.

[jameskoster]

Agree with Anne on the block toolbar interactions. Since the tools are only available when 'responsive editing' couldn't the eye icon just be a toggle button?

That said... I also tend to agree with @sinanisler that the switch isn't super intuitive. Does this really need to be another mode? What if clicking the eye icon always opened a menu/modal, regardless of preview size:

This could work the same way in List View too.

[fabiankaegy]

Just wanted to link this back to some of the discovery work that was done in https://github.com/WordPress/gutenberg/issues/57719 I still think that some of the ideas outlined there were good ones! Though I agree that some of the UI affordances like tying it into the responsive device dropdown are really nice in this approach here :)

[mtias]

In https://github.com/WordPress/gutenberg/pull/73735, I was trying to honour the viewport width in conjunction with the preview toggler, which is more how the frontend would work. So in "Desktop", narrowing the window width would also trigger the breakpoints. Probably simpler to leave that out, and focus on the preview categories.

Yes, I think we should follow up on this as part of making the breakpoints also configurable instead of the hardcoded values we have now.

@ramonjd in terms of moving forwards, I think we should probably put it inside an experiment because we'll need to do a few ongoing tweaks and a series of long running branches is going to be tough to manage.

---

Redundancy in some of these interfaces seems important to make sure states are always clear. We can certainly introduce a panel for "visibility" that includes the viewport settings. We need to consider that "visibility" will expand to account for conditional rendering (like logged-in/logged-out), so a dropdown seems like it may become inadequate to provide the full context. The modal and sidebar panel seem better candidates there. Of course we can start more nimble and iterate there.

---

@jameskoster I didn't push it on this branch because it was too much, but I have a working version were style attributes are also viewport-specific, and it becomes a lot easier to work with if you can just make style modifications across multiple blocks and they all get set together as part of the viewport. We can still (and I'd argue it's also necessary for clarity) show these icons or settings next to the tools they modify. But this will get super busy super fast. I wonder if that needs to be treated as part of the broad work on style inheritance / global / local clarity.

[jessefriedman]

Amazing! Can't wait for this.

Quick question, will hiding on mobile prevent it from loading in the browser? Or does it load in under a css "display:none" tag?

I ask because users were 100% use this to hide heavy file size items with the intention of serving something smaller on mobile.

[jasmussen]

Yes, I think we should follow up on this as part of making the breakpoints also configurable instead of the hardcoded values we have now.

Oh nice, maybe you can use this:

[mtias]

Oh nice, maybe you can use this

Yes, but I think we need to consider the option of creating more breakpoints as well and see how that scales.

[hanneslsm]

Thanks for working on this @mtias! Exited to test it soon!

I like @jameskoster's idea of opening a menu when clicking the eye icon. I think @jasmussen's mockup would be the goal for the editor, but as long it's not possible to also change padding, text-alignment et cetera per viewport, I agree that this can be confusing to some users.

Yes, but I think we need to consider the option of creating more breakpoints as well and see how that scales.

In that case I wonder how future proof names like mobile, tablet, and desktop are, given how device categories keep shifting (for example phablets in the past and foldable devices might become a thing again). In packages/components/src/utils/breakpoint-values.js mobile is also mixed with t-shirt sizes, which makes the naming a bit inconsistent. I do not have a strong proposal for a better naming scheme right now, but I thought it is worth mentioning this.

[theaminuli]

How can I achieve the outcome described in this GitHub issue: https://github.com/WordPress/gutenberg/issues/13363?

[ramonjd]

In that case I wonder how future proof names like mobile, tablet, and desktop are, given how device categories keep shifting (for example phablets in the past and foldable devices might become a thing again). In packages/components/src/utils/breakpoint-values.js mobile is also mixed with t-shirt sizes, which makes the naming a bit inconsistent.

Good question. I'd speculate that these values would be default, and then one day overridable in theme.json.

At some stage I think we'll be forced to introduce a single source of truth for both breakpoints AND device type selection. Various constants and lists of such things are scattered about the Gutenberg codebase like wedding confetti and it'll just lead to hangovers later. The @wordpress/viewport package came to mind, possible @wordpress/global-styles-engine would be more appropriate if the view is to have theme.json config.

[eirichmond]

This is a great start, and my initial testing works really well. However, I’ve noticed some confusing behaviour when using the Delete key in the list view with a Paragraph block while in Responsive Editing mode.

When you first select a Paragraph block from the list view and press Delete, the block is removed as expected. But if you click it twice while in Responsive mode, the Paragraph block toggles the hidden attribute instead. I’m not sure if this is the intended behaviour or there is a valid reason for this but thought I would report it.

This is in Firefox but also replicates the same way in Chrome...

https://github.com/user-attachments/assets/2321ea65-e8cd-4b0a-aeb1-703d6eaf9873

[eirichmond]

Just to follow up on my previous comment, this is more of a question really. This feature introduces responsive editing, specifically for showing or hiding blocks, which appears to add a new class to the element: wp-block-visibility-{device}.

My question is: is the intention to extend this approach to other attributes such as alignment, padding, or margin? Or is it solely intended for controlling block visibility between responsive breakpoints for 7.0?

[mtias]

@eirichmond thanks for testing! This is indeed meant to expand to other block style attributes in the future, but the initial aim is just to account for block visibility to keep it manageable and narrow down the system and interactions.

For example, I had it working with style attributes (both dimensions and font sizes) but it should be done step by step:

https://github.com/user-attachments/assets/aa671ce1-7d81-4033-87b1-7483368d0f98

[eirichmond]

@mtias realised mp4 is incompatible, how about a .mov file...

https://github.com/user-attachments/assets/87e0211e-6e88-49c1-a98a-3be40a44393e

[ramonjd]

I had it working with style attributes (both dimensions and font sizes)

This issue appears relevant.

• Blocks: States

I believe it's something we're nudging at with extending metadata, and perhaps the metadata attribute could actually accept a block-supports-like model, e.g., metadata.typography.fontSize{ $breakpoint }: '14px'

Maybe that's what were you experimenting with anyway? 😄 Just wanted to note it. Cheers!

[eirichmond]

To address the discoverability paradox, the simplest approach is to replicate the visual indicators already used in Live View directly within the canvas, reusing the same colour logic as the top toolbar.

Regardless of which view the user is in, when Responsive Editing mode is active and a block is hidden for a specific breakpoint, the hidden icon should be visible along with its relevant device indicator. That device icon could also act as a control to switch the canvas to that view, giving the user a direct and intuitive way to unhide the block. The familiar purple used for synced patterns could also be reused as a subtle dividing line to clearly signal where a block is hidden.

As previously suggested, floating device icons positioned near the block itself would make it immediately obvious where visibility rules are applied.

Overall, the design rationale introduces subtle visual cues, such as muted thin lines and small icons, to improve discoverability without relying solely on the Block Inspector or the List View, which currently surface visibility states via notices and indicators.

[hanneslsm]

To address the discoverability paradox, the simplest approach is to replicate the visual indicators already used in Live View directly within the canvas, reusing the same colour logic as the top toolbar.

Great mockups @eirichmond! The issue with this approach is that it becomes tricky to represent correct block spacing and alignment.

Imagine a stack with “space between”, containing an image, a paragraph, and a button. Now hide the button. Will the paragraph move down (as it should with space-between)? If it does, what should the distance be between the paragraph and the hide indicator? Another case: I want to visualize a Row with two elements and no gap, but at certain viewports there are elements inserted in between them. I think this will get cluttered quickly with multiple elements, especially when they’re small and laid out horizontally. @jasmussen mentioned the idea of a floating indicator on the right, next to or instead of the Notes panel and I like the idea.

This is probably a bigger discussion, so we should move it to a dedicated issue.

[jasmussen]

I think this will get cluttered quickly with multiple elements, especially when they’re small and laid out horizontally. @jasmussen mentioned the idea of a floating indicator on the right, next to or instead of the Notes panel and I like the idea.

Fantastic discussion, thanks for sharing mockups, I just want to echo that.

To elaborate a bit, and I believe this is an instinct Matías has shared as well: one of the things we can explore is similar to what has been added for notes. When you add a note to a block, a new "margin" shows up on the right, a clearance with space to show the note itself. This is a loose thought so far, but one thing we could do here is exactly the same: show a message: "Hidden paragraph", or "Hidden image". Click the message to show the block. Crucially this would maintain the WYSIWYG of the canvas itself.

We need a visual to validate the idea, whether it is obnoxious or just right, and there's a balancing act in getting this right for responsive breakpoints. And there are some concerns with this idea, as well as other ideas for showing tokens in the main body. For example:

• Patterns that just work: I insert a lavish pre-built core pattern, customize it, and my site works across breakpoints because the pattern configured it just right: I don't have to mess with anything unless I actually want to.
• Patterns with toggles: block visibility not only affords hiding blocks situationally, it also has the potential to create progressively configurable patterns. Imagine a pattern author creating an elaborate Hero pattern that features a background image, a title, a tagline, CTAs, and social links (hidden in the pattern by default). You insert this pattern, and in the new pattern editing view for it, it appears as a single block. You customize all the pieces and realize you'd like social links: and there it already is shown in the inspector, just unhide the block the pattern author prepared for you.

A visual for the pattern hiding feature:

Perhaps the solution just is: if it's inside a pattern, we don't need to show blocks that are hidden, whether responsively or from the DOM.

[jasmussen]

Let me actually visualize the notes idea:

It's stretching a little bit the metaphor of what the Notes feature is for, but there's an argument that Notes is an editorial tool, as is the ability to hide blocks.

I still think it important that if a block inside a pattern is hidden, responsively or otherwise, it does not need to get surfaced here, because the pattern is a curation mechanism. In fact, depending on how this feels, we might even show them in the Notes tray only, and have them indicated in the canvas only optionally:

Something to figure out!