WordPress
Add a zoomed out view to the site editor
Related #39281 #40319
Alternative to #40376
What?
The idea of this PR is that the exploded view has proven to be very challenging and might not be worth it. So I'm just trying a zoomed out view instead like it's being discussed in https://github.com/WordPress/gutenberg/issues/39281
See https://github.com/WordPress/gutenberg/issues/39281#issuecomment-1084648592
The zoom-out view is the idea that on the site editor, you can enter a mode where the focus is more on site building and composing patterns, rather than editing granular blocks.
The current PR is the first step to that:
- When you enter the zoom-out view, the whole layout is zoomed out a bit.
- Click blocks always selects the top level block/section. It's not possible to select inner blocks.
- In-between inserters are rendered between all visible top level blocks.
- You can move select and move top level blocks
- The quick inserters favor patterns instead of blocks.
Testing instructions
- Open the site editor.
- Click the "zoom-out" mode toggle on the header toolbar.
- Play a bit with the top-level blocks and inserters.
Size Change: +1.23 kB (0%)
Total Size: 1.25 MB
| Filename | Size | Change |
|---|---|---|
build/block-editor/index.min.js |
162 kB | +820 B (+1%) |
build/block-editor/style-rtl.css |
15.2 kB | +62 B (0%) |
build/block-editor/style.css |
15.2 kB | +64 B (0%) |
build/block-library/index.min.js |
188 kB | -100 B (0%) |
build/dom/index.min.js |
4.7 kB | +7 B (0%) |
build/edit-site/index.min.js |
58.2 kB | +296 B (+1%) |
build/edit-site/style-rtl.css |
8.23 kB | +35 B (0%) |
build/edit-site/style.css |
8.22 kB | +34 B (0%) |
build/edit-widgets/index.min.js |
16.5 kB | +15 B (0%) |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
build/a11y/index.min.js |
982 B |
build/annotations/index.min.js |
2.76 kB |
build/api-fetch/index.min.js |
2.26 kB |
build/autop/index.min.js |
2.14 kB |
build/blob/index.min.js |
475 B |
build/block-directory/index.min.js |
7.05 kB |
build/block-directory/style-rtl.css |
990 B |
build/block-directory/style.css |
991 B |
build/block-editor/default-editor-styles-rtl.css |
378 B |
build/block-editor/default-editor-styles.css |
378 B |
build/block-library/blocks/archives/editor-rtl.css |
61 B |
build/block-library/blocks/archives/editor.css |
60 B |
build/block-library/blocks/archives/style-rtl.css |
65 B |
build/block-library/blocks/archives/style.css |
65 B |
build/block-library/blocks/audio/editor-rtl.css |
150 B |
build/block-library/blocks/audio/editor.css |
150 B |
build/block-library/blocks/audio/style-rtl.css |
122 B |
build/block-library/blocks/audio/style.css |
122 B |
build/block-library/blocks/audio/theme-rtl.css |
126 B |
build/block-library/blocks/audio/theme.css |
126 B |
build/block-library/blocks/avatar/editor-rtl.css |
116 B |
build/block-library/blocks/avatar/editor.css |
116 B |
build/block-library/blocks/avatar/style-rtl.css |
84 B |
build/block-library/blocks/avatar/style.css |
84 B |
build/block-library/blocks/block/editor-rtl.css |
161 B |
build/block-library/blocks/block/editor.css |
161 B |
build/block-library/blocks/button/editor-rtl.css |
441 B |
build/block-library/blocks/button/editor.css |
441 B |
build/block-library/blocks/button/style-rtl.css |
505 B |
build/block-library/blocks/button/style.css |
505 B |
build/block-library/blocks/buttons/editor-rtl.css |
292 B |
build/block-library/blocks/buttons/editor.css |
292 B |
build/block-library/blocks/buttons/style-rtl.css |
275 B |
build/block-library/blocks/buttons/style.css |
275 B |
build/block-library/blocks/calendar/style-rtl.css |
207 B |
build/block-library/blocks/calendar/style.css |
207 B |
build/block-library/blocks/categories/editor-rtl.css |
84 B |
build/block-library/blocks/categories/editor.css |
83 B |
build/block-library/blocks/categories/style-rtl.css |
100 B |
build/block-library/blocks/categories/style.css |
100 B |
build/block-library/blocks/code/editor-rtl.css |
53 B |
build/block-library/blocks/code/editor.css |
53 B |
build/block-library/blocks/code/style-rtl.css |
103 B |
build/block-library/blocks/code/style.css |
103 B |
build/block-library/blocks/code/theme-rtl.css |
124 B |
build/block-library/blocks/code/theme.css |
124 B |
build/block-library/blocks/columns/editor-rtl.css |
108 B |
build/block-library/blocks/columns/editor.css |
108 B |
build/block-library/blocks/columns/style-rtl.css |
406 B |
build/block-library/blocks/columns/style.css |
406 B |
build/block-library/blocks/comment-author-avatar/editor-rtl.css |
125 B |
build/block-library/blocks/comment-author-avatar/editor.css |
125 B |
build/block-library/blocks/comment-content/style-rtl.css |
92 B |
build/block-library/blocks/comment-content/style.css |
92 B |
build/block-library/blocks/comment-template/style-rtl.css |
187 B |
build/block-library/blocks/comment-template/style.css |
185 B |
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css |
123 B |
build/block-library/blocks/comments-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/comments-pagination/editor-rtl.css |
222 B |
build/block-library/blocks/comments-pagination/editor.css |
209 B |
build/block-library/blocks/comments-pagination/style-rtl.css |
235 B |
build/block-library/blocks/comments-pagination/style.css |
231 B |
build/block-library/blocks/comments-title/editor-rtl.css |
75 B |
build/block-library/blocks/comments-title/editor.css |
75 B |
build/block-library/blocks/comments/editor-rtl.css |
834 B |
build/block-library/blocks/comments/editor.css |
832 B |
build/block-library/blocks/comments/style-rtl.css |
632 B |
build/block-library/blocks/comments/style.css |
630 B |
build/block-library/blocks/cover/editor-rtl.css |
605 B |
build/block-library/blocks/cover/editor.css |
607 B |
build/block-library/blocks/cover/style-rtl.css |
1.55 kB |
build/block-library/blocks/cover/style.css |
1.55 kB |
build/block-library/blocks/embed/editor-rtl.css |
293 B |
build/block-library/blocks/embed/editor.css |
293 B |
build/block-library/blocks/embed/style-rtl.css |
410 B |
build/block-library/blocks/embed/style.css |
410 B |
build/block-library/blocks/embed/theme-rtl.css |
126 B |
build/block-library/blocks/embed/theme.css |
126 B |
build/block-library/blocks/file/editor-rtl.css |
300 B |
build/block-library/blocks/file/editor.css |
300 B |
build/block-library/blocks/file/style-rtl.css |
253 B |
build/block-library/blocks/file/style.css |
254 B |
build/block-library/blocks/file/view.min.js |
346 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.44 kB |
build/block-library/blocks/freeform/editor.css |
2.44 kB |
build/block-library/blocks/gallery/editor-rtl.css |
948 B |
build/block-library/blocks/gallery/editor.css |
950 B |
build/block-library/blocks/gallery/style-rtl.css |
1.53 kB |
build/block-library/blocks/gallery/style.css |
1.53 kB |
build/block-library/blocks/gallery/theme-rtl.css |
108 B |
build/block-library/blocks/gallery/theme.css |
108 B |
build/block-library/blocks/group/editor-rtl.css |
337 B |
build/block-library/blocks/group/editor.css |
337 B |
build/block-library/blocks/group/style-rtl.css |
57 B |
build/block-library/blocks/group/style.css |
57 B |
build/block-library/blocks/group/theme-rtl.css |
78 B |
build/block-library/blocks/group/theme.css |
78 B |
build/block-library/blocks/heading/style-rtl.css |
76 B |
build/block-library/blocks/heading/style.css |
76 B |
build/block-library/blocks/html/editor-rtl.css |
327 B |
build/block-library/blocks/html/editor.css |
329 B |
build/block-library/blocks/image/editor-rtl.css |
876 B |
build/block-library/blocks/image/editor.css |
873 B |
build/block-library/blocks/image/style-rtl.css |
627 B |
build/block-library/blocks/image/style.css |
630 B |
build/block-library/blocks/image/theme-rtl.css |
126 B |
build/block-library/blocks/image/theme.css |
126 B |
build/block-library/blocks/latest-comments/style-rtl.css |
284 B |
build/block-library/blocks/latest-comments/style.css |
284 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
213 B |
build/block-library/blocks/latest-posts/editor.css |
212 B |
build/block-library/blocks/latest-posts/style-rtl.css |
463 B |
build/block-library/blocks/latest-posts/style.css |
462 B |
build/block-library/blocks/list/style-rtl.css |
88 B |
build/block-library/blocks/list/style.css |
88 B |
build/block-library/blocks/media-text/editor-rtl.css |
266 B |
build/block-library/blocks/media-text/editor.css |
263 B |
build/block-library/blocks/media-text/style-rtl.css |
507 B |
build/block-library/blocks/media-text/style.css |
505 B |
build/block-library/blocks/more/editor-rtl.css |
431 B |
build/block-library/blocks/more/editor.css |
431 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
705 B |
build/block-library/blocks/navigation-link/editor.css |
703 B |
build/block-library/blocks/navigation-link/style-rtl.css |
115 B |
build/block-library/blocks/navigation-link/style.css |
115 B |
build/block-library/blocks/navigation-submenu/editor-rtl.css |
296 B |
build/block-library/blocks/navigation-submenu/editor.css |
295 B |
build/block-library/blocks/navigation-submenu/view.min.js |
423 B |
build/block-library/blocks/navigation/editor-rtl.css |
1.99 kB |
build/block-library/blocks/navigation/editor.css |
2 kB |
build/block-library/blocks/navigation/style-rtl.css |
2.15 kB |
build/block-library/blocks/navigation/style.css |
2.14 kB |
build/block-library/blocks/navigation/view-modal.min.js |
2.78 kB |
build/block-library/blocks/navigation/view.min.js |
443 B |
build/block-library/blocks/nextpage/editor-rtl.css |
395 B |
build/block-library/blocks/nextpage/editor.css |
395 B |
build/block-library/blocks/page-list/editor-rtl.css |
363 B |
build/block-library/blocks/page-list/editor.css |
363 B |
build/block-library/blocks/page-list/style-rtl.css |
175 B |
build/block-library/blocks/page-list/style.css |
175 B |
build/block-library/blocks/paragraph/editor-rtl.css |
174 B |
build/block-library/blocks/paragraph/editor.css |
174 B |
build/block-library/blocks/paragraph/style-rtl.css |
260 B |
build/block-library/blocks/paragraph/style.css |
260 B |
build/block-library/blocks/post-author/style-rtl.css |
175 B |
build/block-library/blocks/post-author/style.css |
176 B |
build/block-library/blocks/post-comments-form/editor-rtl.css |
96 B |
build/block-library/blocks/post-comments-form/editor.css |
96 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
493 B |
build/block-library/blocks/post-comments-form/style.css |
493 B |
build/block-library/blocks/post-date/style-rtl.css |
61 B |
build/block-library/blocks/post-date/style.css |
61 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
73 B |
build/block-library/blocks/post-excerpt/editor.css |
73 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
69 B |
build/block-library/blocks/post-excerpt/style.css |
69 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
507 B |
build/block-library/blocks/post-featured-image/editor.css |
505 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
166 B |
build/block-library/blocks/post-featured-image/style.css |
166 B |
build/block-library/blocks/post-template/editor-rtl.css |
99 B |
build/block-library/blocks/post-template/editor.css |
98 B |
build/block-library/blocks/post-template/style-rtl.css |
282 B |
build/block-library/blocks/post-template/style.css |
282 B |
build/block-library/blocks/post-terms/style-rtl.css |
73 B |
build/block-library/blocks/post-terms/style.css |
73 B |
build/block-library/blocks/post-title/style-rtl.css |
100 B |
build/block-library/blocks/post-title/style.css |
100 B |
build/block-library/blocks/preformatted/style-rtl.css |
103 B |
build/block-library/blocks/preformatted/style.css |
103 B |
build/block-library/blocks/pullquote/editor-rtl.css |
135 B |
build/block-library/blocks/pullquote/editor.css |
135 B |
build/block-library/blocks/pullquote/style-rtl.css |
326 B |
build/block-library/blocks/pullquote/style.css |
325 B |
build/block-library/blocks/pullquote/theme-rtl.css |
167 B |
build/block-library/blocks/pullquote/theme.css |
167 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
221 B |
build/block-library/blocks/query-pagination/editor.css |
211 B |
build/block-library/blocks/query-pagination/style-rtl.css |
282 B |
build/block-library/blocks/query-pagination/style.css |
278 B |
build/block-library/blocks/query-title/style-rtl.css |
63 B |
build/block-library/blocks/query-title/style.css |
63 B |
build/block-library/blocks/query/editor-rtl.css |
439 B |
build/block-library/blocks/query/editor.css |
439 B |
build/block-library/blocks/quote/style-rtl.css |
213 B |
build/block-library/blocks/quote/style.css |
213 B |
build/block-library/blocks/quote/theme-rtl.css |
223 B |
build/block-library/blocks/quote/theme.css |
226 B |
build/block-library/blocks/read-more/style-rtl.css |
132 B |
build/block-library/blocks/read-more/style.css |
132 B |
build/block-library/blocks/rss/editor-rtl.css |
202 B |
build/block-library/blocks/rss/editor.css |
204 B |
build/block-library/blocks/rss/style-rtl.css |
289 B |
build/block-library/blocks/rss/style.css |
288 B |
build/block-library/blocks/search/editor-rtl.css |
165 B |
build/block-library/blocks/search/editor.css |
165 B |
build/block-library/blocks/search/style-rtl.css |
396 B |
build/block-library/blocks/search/style.css |
393 B |
build/block-library/blocks/search/theme-rtl.css |
114 B |
build/block-library/blocks/search/theme.css |
114 B |
build/block-library/blocks/separator/editor-rtl.css |
146 B |
build/block-library/blocks/separator/editor.css |
146 B |
build/block-library/blocks/separator/style-rtl.css |
233 B |
build/block-library/blocks/separator/style.css |
233 B |
build/block-library/blocks/separator/theme-rtl.css |
194 B |
build/block-library/blocks/separator/theme.css |
194 B |
build/block-library/blocks/shortcode/editor-rtl.css |
464 B |
build/block-library/blocks/shortcode/editor.css |
464 B |
build/block-library/blocks/site-logo/editor-rtl.css |
488 B |
build/block-library/blocks/site-logo/editor.css |
488 B |
build/block-library/blocks/site-logo/style-rtl.css |
203 B |
build/block-library/blocks/site-logo/style.css |
203 B |
build/block-library/blocks/site-tagline/editor-rtl.css |
86 B |
build/block-library/blocks/site-tagline/editor.css |
86 B |
build/block-library/blocks/site-title/editor-rtl.css |
84 B |
build/block-library/blocks/site-title/editor.css |
84 B |
build/block-library/blocks/social-link/editor-rtl.css |
184 B |
build/block-library/blocks/social-link/editor.css |
184 B |
build/block-library/blocks/social-links/editor-rtl.css |
674 B |
build/block-library/blocks/social-links/editor.css |
673 B |
build/block-library/blocks/social-links/style-rtl.css |
1.4 kB |
build/block-library/blocks/social-links/style.css |
1.39 kB |
build/block-library/blocks/spacer/editor-rtl.css |
322 B |
build/block-library/blocks/spacer/editor.css |
322 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B |
build/block-library/blocks/spacer/style.css |
48 B |
build/block-library/blocks/table/editor-rtl.css |
494 B |
build/block-library/blocks/table/editor.css |
494 B |
build/block-library/blocks/table/style-rtl.css |
611 B |
build/block-library/blocks/table/style.css |
609 B |
build/block-library/blocks/table/theme-rtl.css |
190 B |
build/block-library/blocks/table/theme.css |
190 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
239 B |
build/block-library/blocks/tag-cloud/style.css |
239 B |
build/block-library/blocks/template-part/editor-rtl.css |
235 B |
build/block-library/blocks/template-part/editor.css |
235 B |
build/block-library/blocks/template-part/theme-rtl.css |
101 B |
build/block-library/blocks/template-part/theme.css |
101 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B |
build/block-library/blocks/text-columns/editor.css |
95 B |
build/block-library/blocks/text-columns/style-rtl.css |
166 B |
build/block-library/blocks/text-columns/style.css |
166 B |
build/block-library/blocks/verse/style-rtl.css |
87 B |
build/block-library/blocks/verse/style.css |
87 B |
build/block-library/blocks/video/editor-rtl.css |
561 B |
build/block-library/blocks/video/editor.css |
563 B |
build/block-library/blocks/video/style-rtl.css |
174 B |
build/block-library/blocks/video/style.css |
174 B |
build/block-library/blocks/video/theme-rtl.css |
126 B |
build/block-library/blocks/video/theme.css |
126 B |
build/block-library/common-rtl.css |
1.02 kB |
build/block-library/common.css |
1.02 kB |
build/block-library/editor-elements-rtl.css |
75 B |
build/block-library/editor-elements.css |
75 B |
build/block-library/editor-rtl.css |
11 kB |
build/block-library/editor.css |
11 kB |
build/block-library/elements-rtl.css |
54 B |
build/block-library/elements.css |
54 B |
build/block-library/reset-rtl.css |
478 B |
build/block-library/reset.css |
478 B |
build/block-library/style-rtl.css |
12 kB |
build/block-library/style.css |
12 kB |
build/block-library/theme-rtl.css |
719 B |
build/block-library/theme.css |
722 B |
build/block-serialization-default-parser/index.min.js |
1.1 kB |
build/block-serialization-spec-parser/index.min.js |
2.83 kB |
build/blocks/index.min.js |
49.6 kB |
build/components/index.min.js |
198 kB |
build/components/style-rtl.css |
11.5 kB |
build/components/style.css |
11.5 kB |
build/compose/index.min.js |
12 kB |
build/core-data/index.min.js |
15.5 kB |
build/customize-widgets/index.min.js |
11.3 kB |
build/customize-widgets/style-rtl.css |
1.38 kB |
build/customize-widgets/style.css |
1.38 kB |
build/data-controls/index.min.js |
653 B |
build/data/index.min.js |
8.06 kB |
build/date/index.min.js |
32.1 kB |
build/deprecated/index.min.js |
507 B |
build/dom-ready/index.min.js |
324 B |
build/edit-navigation/index.min.js |
16 kB |
build/edit-navigation/style-rtl.css |
3.99 kB |
build/edit-navigation/style.css |
4 kB |
build/edit-post/classic-rtl.css |
546 B |
build/edit-post/classic.css |
547 B |
build/edit-post/index.min.js |
30.7 kB |
build/edit-post/style-rtl.css |
6.94 kB |
build/edit-post/style.css |
6.94 kB |
build/edit-widgets/style-rtl.css |
4.34 kB |
build/edit-widgets/style.css |
4.34 kB |
build/editor/index.min.js |
41.6 kB |
build/editor/style-rtl.css |
3.66 kB |
build/editor/style.css |
3.65 kB |
build/element/index.min.js |
4.68 kB |
build/escape-html/index.min.js |
537 B |
build/format-library/index.min.js |
6.75 kB |
build/format-library/style-rtl.css |
571 B |
build/format-library/style.css |
571 B |
build/hooks/index.min.js |
1.64 kB |
build/html-entities/index.min.js |
448 B |
build/i18n/index.min.js |
3.77 kB |
build/is-shallow-equal/index.min.js |
527 B |
build/keyboard-shortcuts/index.min.js |
1.78 kB |
build/keycodes/index.min.js |
1.81 kB |
build/list-reusable-blocks/index.min.js |
1.74 kB |
build/list-reusable-blocks/style-rtl.css |
835 B |
build/list-reusable-blocks/style.css |
835 B |
build/media-utils/index.min.js |
2.93 kB |
build/notices/index.min.js |
953 B |
build/nux/index.min.js |
2.05 kB |
build/nux/style-rtl.css |
732 B |
build/nux/style.css |
728 B |
build/plugins/index.min.js |
1.94 kB |
build/preferences-persistence/index.min.js |
2.22 kB |
build/preferences/index.min.js |
1.3 kB |
build/primitives/index.min.js |
933 B |
build/priority-queue/index.min.js |
612 B |
build/react-i18n/index.min.js |
696 B |
build/react-refresh-entry/index.min.js |
8.44 kB |
build/react-refresh-runtime/index.min.js |
7.31 kB |
build/redux-routine/index.min.js |
2.74 kB |
build/reusable-blocks/index.min.js |
2.21 kB |
build/reusable-blocks/style-rtl.css |
256 B |
build/reusable-blocks/style.css |
256 B |
build/rich-text/index.min.js |
10.4 kB |
build/server-side-render/index.min.js |
1.61 kB |
build/shortcode/index.min.js |
1.53 kB |
build/token-list/index.min.js |
644 B |
build/url/index.min.js |
3.61 kB |
build/vendors/react-dom.min.js |
38.5 kB |
build/vendors/react.min.js |
4.34 kB |
build/viewport/index.min.js |
1.09 kB |
build/warning/index.min.js |
268 B |
build/widgets/index.min.js |
7.19 kB |
build/widgets/style-rtl.css |
1.18 kB |
build/widgets/style.css |
1.19 kB |
build/wordcount/index.min.js |
1.06 kB |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@tellthemachines Thanks for the review
move to
I'm not familiar with this feature personally, in my testing in both trunk and this branch, it works very weirdly if you're a mouse user. Or I should say, it doesn't work if you're a mouse user. It took me some time to figure out that it works using keyboard only and it seems to behave in the same way for me in both here and trunk. Maybe I'm missing something?
A slight issue I noticed in testing is that the in-between inserter tends to disappear after a block is moved
Yeah, I noticed this, there's a number of situations where these inserters don't seem to respond properly. I haven't been able to find the reasons for these yet. I'm considering only showing the inserters relative to the selected block to try to mitigate this but I'll try to figure out more.
It took me some time to figure out that it works using keyboard only and it seems to behave in the same way for me in both here and trunk. Maybe I'm missing something?
No, that's how it works. Ideally it should work with mouse too, but we never found a good way of doing that. As it is, it's the only way of moving blocks between nesting levels with keyboard only, so if we were to re-think it we'd have to keep that in mind.
Yesterday I was testing with Gutenberg.run, but I now checked out this branch and can confirm it's working properly. Not sure what happened there 😅
Yesterday I was testing with Gutenberg.run, but I now checked out this branch and can confirm it's working properly.
There was a bug in one of the selectors I changed, I didn't fix it specifically for this issue but maybe it was a side effect there too.
Side note on the "Move to" action, would it make sense to trigger one of the bottom left notifications when engaged explaining how it works? "Use the keyboard to position the block"
I've improved I think the positioning update of the in-between inserters, it's almost fluid. We can do better maybe but it's acceptable I think.
What do you all think is missing from this PR to consider it good enough for merge (v1)?
Thinking about the broader UX I believe this zoomed out view could represent an opportunity to fuse the template editor with the site editor. I shared a concept in https://github.com/WordPress/gutenberg/issues/27847#issuecomment-1135934534 which illustrates how we can use it to toggle the visibility of the full layout while working on a post. It is also conceivable that it could be the default site editing view as well.
However in both of those cases some of the features of this PR can be undesirable... I may still want to edit child blocks even while zoomed out to view the template, or I might want to concentrate on patterns while zoomed all the way in to my post. That's not to say that these features are not valuable, they are! But I think they might be more useful when you are zoomed further out (something that Matias alluded to in https://github.com/WordPress/gutenberg/issues/39281#issuecomment-1133599840). If zoom is a feature of the site/template editor, then maybe these features come online at a certain zoom level, and perhaps this PR could represent phase one of that implementation?
So to bring all this back to something actionable... I think it might be good to try zooming out even further, and to ideate on the entry-point a bit.
I noticed it's still possible to select child blocks via List View. Should we adjust list view so that only root-level blocks are listed?
One other small thing: The gap beneath the document is disproportionately larger than the one above when zoomed out.
I think it might be good to try zooming out even further, and to ideate on the entry-point a bit.
You mean instead of 0.8 scale, try something like 0.7? Just making sure I understood properly the idea here :)
I noticed it's still possible to select child blocks via List View. Should we adjust list view so that only root-level blocks are listed?
I can do that
The gap beneath the document is disproportionately larger than the one above when zoomed out.
Yeah, I know it's unclear how to solve it (maybe a negative margin). The gap comes from the fact that we're using "scale" which doesn't impact the height of the element, just scale it down, meaning any extra space is left.
You mean instead of 0.8 scale, try something like 0.7? Just making sure I understood properly the idea here :)
Yeah, we can probably try a few options to get a feel for what works best. I've seen similar features in other apps scale all the way down to ~0.4.
Not saying we should go that low, but we can probably be a bit more aggressive. Something like .7 or .6 would be good to try.
Since the quick inserters prioritise patterns, do you think the main inserter should do the same? A simple adjustment would be to make "Patterns" the default tab.
One other observation – the device previews don't work so well when zoomed out, perhaps we should just disable them in this view?
Yes, that's what I meant to say — to go very low in the scale so you can see more sections at a time and reordering becomes easier.
In terms of the entry point, perhaps something like this could work:
This approach could position us nicely for a more fluid zoom affordance in the future:
https://user-images.githubusercontent.com/846565/170320195-a155257e-ab1a-49d7-a57f-69caaf2a6cb3.mp4
In terms of the entry point, perhaps something like this could work:
That menu is already too long to be honest.
- I've scaled down to 0.7
- I've removed the preview
- I've prioritized patterns in the main inserter
I wanted to note that I won't be able to work on the PR after this week as I'll start a long AFK, it would be good to be able to land a V1 before then.
That menu is already too long to be honest.
I see that as something we can address separately, but ok :) Perhaps a different icon would work better, but I suppose we can explore that detail in a follow-up 👍
0.7 scale feels like an improvement, I think we can probably go down to 0.6 though and get more of the document visible in the viewport.
There's a couple of issues remaining with the toolbar...
- It loses position when you open the Inserter of List View
- Isn't visible when selecting the last block in the stack, until you hover something like an inline inserter.
https://user-images.githubusercontent.com/846565/170456150-3e0ef27b-c525-4a75-8cf0-c39123f72314.mp4
One other issue that I'm not 100% sure how best to solve... dragging blocks from the inserter onto a group will insert them within that group:
https://user-images.githubusercontent.com/846565/170457369-5042446d-5e91-43a3-aa7b-7a845a036e48.mp4
This feels kind of antithetical to this view mode (which is all about working with the root level blocks) and can be frustrating since I cannot select the block I just inserted. A couple of possible solutions:
- Dropping a block on the canvas will place it at the root, regardless of drop target
- Provide a pathway to edit group children – maybe double-clicking a group exits the view?
It loses position when you open the Inserter of List View
This is actually a bug that is already happening on trunk, you can select a block and open the inserter (in the site editor). It's a bit hard to fix because basically we need to "watch" the position of the block on the screen and move the toolbar accordingly. The problem is that, there's no way to "watch" a DOM element position AFAIK, so this end up happening. The only potential fix I can think of is to have the position update on a fixed interval like 100ms or so, but it won't be smooth, we'll see a small but noticeable delay until the position updates and if we try to reduce that timeout (100ms) we may expose ourselves to performance issues. I wonder if anyone has any other alternative here. cc @Mamaduka @mcsf
Isn't visible when selecting the last block in the stack, until you hover something like an inline inserter.
This should be fixed.
@jameskoster The drop zone doesn't work consistently for me even in trunk that said, now I disabled it for blocks that are inside container blocks with "overlays". That should disable it inside the sections in the zoom out view.
Provide a pathway to edit group children – maybe double-clicking a group exits the view?
Unfortunately, I won't have time to implement this properly today and tomorrow because it involves some code and we'll need to be careful there as it's another "mode" for a block. Also an alternative which I though could be good would be to have a "focus mode" (same as the one we have now for template parts) per block. That said, I believe it should be explored separately as this PR is probably too big already.
Thanks for all the updates :)
Thinking some more about the block problem, it might be better to hide the "Blocks" tab in the inserter altogether. That will solve the drag/drop issue and better align with the idea of this view being all about high-level actions – adding sections, reordering, etc.
To further communicate that shift in focus to the user, it might be also be good to match the inserter colors to the canvas material, though I acknowledge this might be something to do in a follow-up:
Additionally a stronger overlay could be warranted, seeing as it's not possible to edit the child blocks in this view anyway. I noticed the .1 opaque overlay can get a bit lost on certain background colors. I'll try some options there, and adjust the scale value as well.
I understand why you've done this, but now the toolbar looks misaligned;
Since the padding that was creating those gutters on the left/right is coming from the theme, perhaps it's ok?
We might need some different logic for the bottom margin to stop this:
https://user-images.githubusercontent.com/846565/170482643-8ee19b85-ac83-446c-afd6-cf73e3ff955e.mp4
On larger screens the bottom of the document is going to disappear.
Would it be harmful to remove this margin in zoomed out view?
I think it's only there to accommodate the inserter button (?), but in this view it's probably ok for it to sit 'on top' of the sections:
@youknowriad, the toolbar positioning issue might be related to the recent Popover refactor.
Gutenberg 13.2.2
https://user-images.githubusercontent.com/240569/170484378-324a63de-468c-4134-95f8-3cac77003b83.mp4
Gutenberg trunk
https://user-images.githubusercontent.com/240569/170484309-63887d43-2330-4a0b-8c01-527cfcb65e7e.mp4
@Mamaduka I'm having trouble understand how the previous implementation "recomputed" the position? Any idea?
I think it's only there to accommodate the inserter button (?), but in this view it's probably ok for it to sit 'on top' of the sections:
@jameskoster No that margin is the actual block gap defined by the theme, it's not an editor only thing so I don't think we should remove it.
@jameskoster for the margin bottom, I haven't been able to find a satisfying solution yet. The source of the issue is that scaling down doesn't impact the height so it creates a space in the bottom, I tried using a negative margin bottom trick but it doesn't seem to work properly in all cases. That said I've not seen the document being cut, I've seen the margin disappear entirely (no gray area at the bottom) but never cut.
I've seen the margin disappear entirely (no gray area at the bottom) but never cut.
That's probably ok, then!
Unsure if this is related to the fix you applied for the drag/drop but I can now bypass the overlay:
https://user-images.githubusercontent.com/846565/170494424-783d8eff-bb3c-4283-bec2-f9738d6c1d20.mp4
This wasn't happening before 🤔
Since the padding that was creating those gutters on the left/right is coming from the theme, perhaps it's ok?
@jameskoster I think the presence of paddings break the model entirely because the overlays / sections don't feel top level units anymore. I'm less concerned with the toolbar, especially if we'll be exploring some other displays to the side of sections.
@Mamaduka It seems it's not related to "recomputing", even if recompute it end up in the wrong position but I'm failing to find where the computing logic is failing :)
Unsure if this is related to the fix you applied for the drag/drop but I can now bypass the overlay:
That's fixed now.