WordPress
Add block visibility breakpoints support for dynamic configuration
[!IMPORTANT] This is an experimental PR for illustrative purposes only. If the approach is sound, it'll be broken up into smaller PRs for review and refactor.
Mostly vibe coded to demonstrate a flow for https://github.com/WordPress/gutenberg/issues/72502
TODO
- [ ] The breakpoints should also trigger when changing the viewport in the dropdown, however
useViewPortisn't looking at the iframe width, but the parent window. So somehow we need to know which device the user has selected, but it's in the editor package, which can't be used in the block-editor package 🤔 Also very conveniently the values for mobile/tablet/etc are unique in the drop down. Look at the use viewport match ones. - [ ] Implement designs in https://github.com/WordPress/gutenberg/issues/72502#issuecomment-3611161242
- [ ] Split PR up for ease of reviewing
https://github.com/user-attachments/assets/dccc06f8-a547-4127-8b80-13de1e03a438
What?
Closes
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
| Before | After |
|---|---|
Size Change: +8.51 kB (+0.33%)
Total Size: 2.58 MB
| Filename | Size | Change |
|---|---|---|
build/scripts/block-editor/index.min.js |
323 kB | +8.34 kB (+2.65%) |
build/scripts/editor/index.min.js |
284 kB | +77 B (+0.03%) |
build/styles/block-editor/content-rtl.css |
4.84 kB | +47 B (+0.98%) |
build/styles/block-editor/content.css |
4.84 kB | +45 B (+0.94%) |
ℹ️ 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 |
277 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/default-editor-styles-rtl.css |
224 B |
build/styles/block-editor/default-editor-styles.css |
224 B |
build/styles/block-editor/style-rtl.css |
16.4 kB |
build/styles/block-editor/style.css |
16.4 kB |
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.24 kB |
build/styles/block-library/navigation/editor.css |
2.24 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/editor/style-rtl.css |
18.6 kB |
build/styles/editor/style.css |
18.6 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 |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Flaky tests detected in f31c36c4c44c094803998580698ef5871302f5d1. 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/20050314541 📝 Reported issues:
- #73752 in
/test/e2e/specs/site-editor/template-id-format.spec.js
I tried hiding a block only on mobile and it disappeared altogether for all breakpoints.
Yeah, lots to do still on this WIP branch. I'll take a look, thanks!
instead of just display: none? I understand that choice was made when we added the option to hide blocks regardless of breakpoint.
Is the answer in the comment above the style?
// Hidden blocks.
// In order for the block toolbar to render correctly, blocks cannot be hidden.
// Instead, use styles to visually hide blocks.
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-list/content.scss#L101-L104
instead of just display: none? I understand that choice was made when we added the option to hide blocks regardless of breakpoint.
I think I fixed that bug, but there's another issue that needs to be sorted as well. I think a user would expect the preview dropdown to work and trigger the hide/shows, however those options manipulate the iframe width. useViewportMatch looks at the canvas width!
Conveniently the values used for mobile/tablet/etc are different for the preview drop down. Here are the use viewport match ones.
So somehow we need to know which device the user has selected, but it's in the editor package, which can't be used in the block-editor package 🤔
Might need some abstraction work down first. Not sure.
for hiding blocks in the editor instead of just display: none? I understand that choice was made when we added the option to hide blocks regardless of breakpoint.
I think it is possibly to avoid the block toolbar disappearing when the flow is select block > click block toolbar kebab menu > click "hide block". I think "display: none;" might cause a focus loss in that case.
That doesn't make it invalid, I think display none is the correct thing to do, actually remove it from the DOM. Right now it's a bit weird if you have paragraph | hidden block | paragraph, and arrow key from the 2nd paragraph towards the first, it will actually pass by the hidden block still there, on its way to the first block. My instinct for the first versions would be to require use of the list view.
So somehow we need to know which device the user has selected, but it's in the editor package, which can't be used in the block-editor package 🤔 Might need some abstraction work down first. Not sure.
The latest update does this, albeit by adding another setting to the block settings.
https://github.com/user-attachments/assets/c5c8c7fc-034b-428b-ae6d-c8f1897fd092
Having gone through some past issues calling for breakpoint previewing, device preview extensions, theme.json breakpoint definitions, even block states, I'm wondering if I should create an issue proposing a single source of truth for both breakpoints AND device type selection. For example, by extending the @wordpress/viewport store.
Breakpoint logic is duplicated across 3+ packages. Currently, device type selection (Desktop/Tablet/Mobile) is managed by @wordpress/editor package via PreviewDropdown, but @wordpress/block-editor package and individual blocks cannot access this information to control behavior (e.g., hide/show blocks based on device type).
Looks good at a glance. What happens if you deselect the block after hiding it? That's the most complex aspect to ensure a good behavior for.
Looks good at a glance. What happens if you deselect the block after hiding it? That's the most complex aspect to ensure a good behavior for.
On this branch (and the other POC branch https://github.com/WordPress/gutenberg/pull/73888) this:
https://github.com/user-attachments/assets/20d9b8f9-c54f-4b0c-9c9d-5bf53e0be932
Is that what you mean? 🤔
I kinda empathize with the "dimmed" out hidden block viewport here, if only to indicate that something has happened on the canvas. Even if it's dimmed, then fades out. We can't rely on the list view or inspector being open. Maybe it's a matter of being cleverer with the notices 🤷🏻
Yep, empathise is a good way to describe what is a valid issue. What's crucial for me is we seek a solution that does not break WYSIWYG. I need to marinate more on this, but one loose idea do someting similar to what block notes does. When a document has notes, they are showin in the margin on the right, with a bubble. We can do something similar: “There's a block hidden here", and when the note is selected, so is the hidden block. The main challenge here is that this reserved margin is only available, for the moment, when "Show template" is toggled off. Ideally that margin would be available everywhere.
Noting that I just tested this and if I hide a block everywhere then hit "show" it kept showing me the same "hide" prompt:
https://github.com/user-attachments/assets/e8dd21d8-32aa-4e9b-a71e-fbe3f3cfbc38
I have to de-select hide everywhere for it to then "show". Not sure if that's the best UX if someone is explicitly selecting "show". Perhaps in this case, we shouldn't show the collapsed "hide all" and instead show the granular options for editing where to show.
if I hide a block everywhere then hit "show" it kept showing me the same "hide" prompt Perhaps in this case, we shouldn't show the collapsed "hide all" and instead show the granular options for editing where to show.
That could be me misinterpreting the designs over at https://github.com/WordPress/gutenberg/issues/72502#issuecomment-3611161242
But anyway, all this is good to know, @annezazu Thanks for testing!
This PR and the other POC PR won't be the final product I reckon, but it's great to get feedback to guide development. I've begun splitting up the PRs already to make it easier to get the groundwork in iteratively, and also ease code reviews.
I've listed them on https://github.com/WordPress/gutenberg/issues/72502
I have to de-select hide everywhere for it to then "show". Not sure if that's the best UX if someone is explicitly selecting "show". Perhaps in this case, we shouldn't show the collapsed "hide all" and instead show the granular options for editing where to show.
Thanks for recording a video, @annezazu, I've been around the block on some other tasks, so I haven't been able to follow this with super precision.
Aspects of what Ramon has built are super intentional insofar as it feels critical to me to make clear to the user that hidden content is omitted from the document, but responsively hidden content is not. The latter "leaks", it's still included on the frontend. It feels so important to get this just right, so you don't hide something thinking it's private but actually it's just display: none;'d.
The precise flow for getting that right we'll need to figure out, thank you Ramon for the PR so we can do just that. Let me just recount the precise details of the motivation for the current path, and then some other options. The present idea is this:
- You've pressed "Hide block" in the menu. The modal appears, and the checkbox is pre-checked for hiding, because you signaled your intent to hide already in the menu, in this stage you are just confirming.
- You've unchecked "Hide block", and the responsive options are revealed.
- You've chosen one breakpoint. This allows us to show a new message below that explains the important details about hiding. Note: this is not help text, this is a paragraph of text below the controls above. That makes it darker text, and perhaps more impactful.
- You apply, block is responsively hidden.
So what is the motivation for adding all these steps? It is to:
- Emphasize the hiding aspect. Most of the times you'll want to hide blocks, not responsively edit. That should be possible, but it's an extremely advanced feature you should not be using most of the time. We also still need to connect this with #73888. So in this flow, you click hide, apply, done, your block is hidden.
- Emphasize the importance of understanding the difference between hiding a block, and responsively hiding it. As I noted, this feels critical to prevent leaking private information.
An alternative which we discussed, in a chat, I think, is to use a radio group instead. Here's an ASCII mockup of what that could look like:
( · ) Hide from published document
( ) Hide on breakpoint
And when toggled to breakpoints:
Block will be hidden in the editor, and omitted from the published markup on the frontend. You can show it again by selecting it in the List View (^⌥O).
( ) Hide from published document
( · ) Hide on breakpoint
[x] Hide on desktop
[ ] Hide on tablet
[ ] Hide on mobile
Block will be hidden on desktop, visible on tablet and mobile. It is included in the published markup on the frontend. You can configure it again by selecting it in the List View (^⌥O).
The radio might be simpler for capturing the same motivations. On a final note, there's still the "visibility" paradox, for which this idea is new.