Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a zoomed out view to the site editor #41156

merged 15 commits into from Sep 7, 2022

Add a zoomed out view to the site editor #41156

merged 15 commits into from Sep 7, 2022


Copy link

@youknowriad youknowriad commented May 19, 2022

Related #39281 #40319

Alternative to #40376


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 #39281

See #39281 (comment)

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

  • Enable the 'zoom out' experiment in Gutenberg experiments page.
  • Open the site editor.
  • Click the "zoom-out" mode toggle on the header toolbar.
  • Play a bit with the top-level blocks and inserters.

Copy link

github-actions bot commented May 19, 2022

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


Copy link

@mcsf mcsf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is still a draft, but I'm liking it. :) Left notes as I noticed things along the way.

packages/edit-site/src/components/header/index.js Outdated Show resolved Hide resolved
packages/block-editor/src/store/actions.js Outdated Show resolved Hide resolved
packages/block-editor/src/store/reducer.js Outdated Show resolved Hide resolved
Copy link

I added some designs to the original issue some of which could be applicable here.

'You are currently in edit mode. To return to the navigation mode, press Escape.'
} else if ( mode === 'exploded' ) {
speak( __( 'You are currently in exploded mode.' ) );
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jameskoster @critterverse we need to find a good name for this state

@youknowriad youknowriad self-assigned this May 23, 2022
@youknowriad youknowriad added [Feature] Full Site Editing [Type] Feature New feature to highlight in changelogs. [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels May 23, 2022
@youknowriad youknowriad marked this pull request as ready for review May 23, 2022 09:56
Copy link

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for trying this out! I like how easy this makes it to add whole sections to the page. A slight issue I noticed in testing is that the in-between inserter tends to disappear after a block is moved (tested on Chrome/mac OS):


Another thing I'm noticing is that "Move to" in the block toolbar options is no longer working; on clicking "Move to" nothing happens except focus is transferred back to the block toolbar. It seems fine on trunk. I haven't looked through the code in-depth yet, but "Move to" works by setting navigation mode so may be something around the changes to how we're using isNavigationMode in this PR.

Copy link
Contributor Author

@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.

Copy link

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, but I now checked out this branch and can confirm it's working properly. Not sure what happened there 😅

Copy link
Contributor Author

Yesterday I was testing with, 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.

Copy link

mtias commented May 24, 2022

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"

Copy link
Contributor Author

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)?

Copy link

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 #27847 (comment) 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 #39281 (comment)). 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.

@github-actions github-actions bot added this to the Gutenberg 14.1 milestone Sep 7, 2022
right: nextRect ? nextRect.left : previousRect.right,
bottom: previousRect ? previousRect.bottom : nextRect.bottom,
right: previousRect ? previousRect.right : nextRect.left,
bottom: previousRect ? previousRect.left : nextRect.right,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just double-checking — Is this line correct? By following the same logic of the rest of the return values, it should have been previousRect ? :

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm.. it seems so, yes.. I've tested with your suggested values though and couldn't see any difference. 🤔 .

I also tried to test in your PR but it doesn't contain this PR. Can you rebase to test there as well? Since you're changing the logic in your PR, do you think it's okay to handle this there? I could create a follow up of course for this..

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and couldn't see any difference. 🤔 .

That's expected, because passing height: 0 kind of overrides the bottom value.

In #43691, I decided to pass an actual DOMRect instead of a manually-created object — which should also remove any confusion. I would therefore ask you to take a closer look to the component while reviewing that PR 🙏

@ciampo ciampo mentioned this pull request Sep 7, 2022
20 tasks
Copy link

annezazu commented Sep 8, 2022

Noting that this is on my list to include in the next call for testing for the outreach program! Great work, folks. cc @ironprogrammer as test lead for 6.1 - this is good to have on your radar.

Copy link

Nice, Anne, I would love to find out if the way this mode is invoked feels naturally discoverable, and what it instinctually gets used for! We have ideas and goals of course, but input can help inform that 👌

Copy link

ironprogrammer commented Sep 15, 2022

Update: Originally reversed the plus/minus suggestion 🤦🏼‍♂️. Corrected below.

This feature is smooth and feels very natural. A great addition for navigating template areas! 🎉

I would like to suggest using a different icon from chevronUpDown, since that icon is used elsewhere in the editor to move blocks. This can be confusing as it relates to two distinctly different user actions. For instance:


As an alternative that is consistent with many other interface tools, how about using a search ("magnifying glass") icon base, with a reset ("-") symbol* inside the circle to "zoom out" and activate this mode, and switch to a plus|create ("+") inside the circle when active to "zoom back in" (i.e. return to the normal editor state). This would still work in conjunction with reversing the colors for active/inactive state.

So the icon in the zoomed-out/active state would look something like:


Down the road, this may also set the stage for other zoom-like editor modes, such as "zooming in" another step for "Spotlight mode" to enter block isolation mode.

*There is currently no minus in this reference icon list.

Copy link

jasmussen commented Sep 16, 2022

I would agree that the chevrons aren't the best icon for it, but go a bit further and say: I'm not sure this button is the best way to invoke it. For this first version it was necessary to have a button, but I would love to see this mode integrated more seamlessly into a flow, rather than have a bespoke action on the toolbar. For example it might invoke by default as soon as you open the "pattern" tab in the inserter, or it could potentially be the default view for select mode. This is something to explore separately.

Copy link

mtias commented Sep 16, 2022

Yeah, the invocation tool is mostly for testing, but it doesn't make sense there, we should make it contextual to the actions that demand it.

@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 20, 2022
Copy link

but I would love to see this mode integrated more seamlessly into a flow, rather than have a bespoke action on the toolbar. For example it might invoke by default as soon as you open the "pattern" tab in the inserter, or it could potentially be the default view for select mode. This is something to explore separately.

When playing around with it - my instinct was that the zoomed out mode matched so naturally with thinking in patterns that I wanted them to work together that way...

  • I go to add a pattern and see the zoomed out view
  • I go to the zoomed out view and automatically see the pattern gallery

Copy link

In terms of active states - I did also notice that there's no gap between the Zoomed out view toggle, and List view toggle.

Screen Shot 2022-09-21 at 12 10 08 pm

Copy link

jasmussen commented Sep 21, 2022

Good note. Those buttons have zero gap and are 36x36, but should have 8px gap and be 32x32:

Screenshot 2022-09-21 at 10 43 48

As we make such a change, should we also consider making the 36px tall Publish/Settings buttons 32px height?

Screenshot 2022-09-21 at 10 45 38

With most buttons moving towards 40px height, the Publish button would be an exception and follow "toggle size" rules:
Screenshot 2022-09-21 at 10 48 27

What do you think, @WordPress/gutenberg-design ?

Copy link

I would love to unify the spacing in the top bar, it's all over the place right now.

Any reason not to make buttons 40px? Then they align with other controls and are easier to tap on touch devices.

Copy link

Would need to see it, but since we use 32px for toggles elsewhere already, that size already feels well established.

Copy link

Not all of the buttons are toggles though – ellipsis, undo, redo, mode switcher. Either way I'm not sure it's intuitive to unilaterally make all toggles 32px 🤔

Copy link

I can't picture 40px being a responsible use of that space, though, so I do like the idea that we have just two sizes, 32 and 40 to work with, both being base8, rather than what we have now which includes 36 in some places.

Copy link

I find it most important to focus on the usability aspect, and 32px touch targets are fairly small... iirc Material recommends a minimum of 44px. But yes, let's mock it all up and see!

Copy link

A mobile experience is crucial, though, but if the large sizes don't fit it's always an option to have desktop specific sizes as well.

Copy link

jasmussen commented Sep 21, 2022

40px looks bananas for icon buttons 🙈

Frame 1


Copy link

I don't find this offensive at all, but appreciate it's subjective 😄

Screenshot 2022-09-21 at 13 14 44

Copy link

👋 a heads up that git bisect points to this commit as having introduced #44481.

Copy link

afercia commented May 5, 2023

Yeah, the invocation tool is mostly for testing, but it doesn't make sense there, we should make it contextual to the actions that demand it.

Any update or follow-up to the flow and icon issue? I see only #44585 but I'm not sure there's any issue to keep track of the icon issue.

The icon is still there and it's terribly confusing:

Zoom-out View icon

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") Needs User Documentation Needs new user documentation [Type] Feature New feature to highlight in changelogs.
None yet

Successfully merging this pull request may close these issues.

None yet