Try Zoom Out improvements

[stokesman]

What?

Improvements to “Zoom Out”.

• Keep the scrollbar inside the visible area
• Prevent changing scale during user actions e.g. resizing the window
• Better centering of the canvas (currently it’s off-center only on devices whose scrollbars aren’t overlaid)
• Maintain scroll position (obviating #61465)
• Improve parity of layout (document width) from unzoomed to zoomed
• Simplify implementation

Why?

Initially this was made to improve the centering of the canvas, have the scrollbar visible and stop having the scale change during window resizing. Along the way I found ways to simplify and noticed this may improve some other things like the scroll position and layout parity.

How?

• Revises the CSS calculations for greater accuracy (and they happen to become simpler too).
• Adds some logic/state to prevent ongoing scale calculation after the initial zoom out has finished.
• Applies the transform to the iframe instead of the html This wasn’t necessary for most of the simplification or improvements but I realized that with the transform on the html, making the scrollbars visible made the effective breakpoint different when changing between zoomed/unzoomed views. This is because the iframe’s width determines the breakpoint even when its document is adjusted to appear the same width. The only ways I can see to have unchanged breakpoints is to either do like before where the iframe’s width is preserved and thus scrollbars are pushed outside the visible area or to do as in this PR and scale the iframe itself.

Testing Instructions

TL:DR; Have the Zoom Out experiment enabled and test everything. You may find something I've missed. What follows are some specific scenarios that should be tested.

vh units

There was a time when Zoom Out did scale the iframe and that was changed in #59334 apparently due to an issue with vh units #49299 causing the iframe editor content to infinitely grow in height. This branch doesn’t regress the issue from my testing. Here are the testing instructions from that issue.

• Activate "Zoomed out view" from the Gutenberg > Experiments menu.
• Open the site editor.
• Insert a group block in one of the templates.
• Set min.Height to 100vh from the Dimensions panel.
• Click the "zoom out" view button or access "Browse styles" menu.

Note the iframe’s content height is stable in this branch

Parity of layout from unzoomed to zoomed

#61424 didn’t have an accompanying issue but it was made to:

avoids layout shifting when you zoom out.

In my testing this branch improves layout parity.

1. With the inserter open to Patterns
2. Note the layout and text wrapping of the contents of the canvas
3. Open a pattern category in the inserter
4. Note the layout and text wrapping of the contents should be the same

No double scrollbars

From issue #61093

1. Enable the zoom-out mode experiment.
2. Go the site editor and select a page to edit.
3. Trigger the zoom out mode by trying to insert a pattern from the inserter and after that resize the window width until you see the double scrollbar

This should not be reproducible on this branch. I reverted a bit of code from the PR merged to "fix" that issue.

Maintained scroll position

1. With the inserter open to Patterns and a page with ample overflow
2. Scroll the page and note the position
3. Open a pattern category in the inserter
4. Note the scroll position is maintained

Drag chip positioning over scaled iframe

Scaling the iframe does throw off the drag chip position when dragging over the iframe and required some changes to compensate. This was a thing experimented with previously #56889 when the scaling was applied to the iframe.

1. Open the global inserter and select a pattern category to initiate zoom out
2. Drag a block or pattern from the inserter over the scaled iframe
3. Note the position of the drag chip is as expected (the same relative to the pointer whether over the iframe or not).

Expansion of main content area in Zoom Out

See #59512

1. Create an empty page in the site editor (for a block based theme).
2. Click the zoom-out mode button in the top toolbar.
3. Note the footer goes to the bottom of the available space so the content area appears as a big empty space.

General canvas scrolling

This PR removes some wrapping elements whose introduction seem to have been the cause of some recent canvas scrollbar issues across different modes of the editor. They all seem to have been fixed so it’s important to test all permutations to make sure all content is scrollable and there are no extraneous scrollbars.

• non-iframed editor
  • Post editor with metaboxes (custom fields preference set to show)
  • Any editor with blocks < v3 registered (if the Gutenberg plugin is active this also depends on having a classic (non-block) theme active).
• Mobile or tablet preview
• Pattern editor
• All the above with notices (wp.data.dispatch( 'core/notices' ).createInfoNotice( 'Notice' );)

Testing Instructions for Keyboard

Screenshots or screencast

Layout parity

trunk	this branch

On trunk, note that the zoomed out width is so narrow that it should be a mobile breakpoint (at least for this theme’s navigation). I think the shortcoming is that the border around the document frameSize is not factored into the scaling. This should be fixable without moving the scaling to the iframe but that would still leave the scrollbars outside the visible area.

This branch could be further improved by compensating the scale for the counter-scaled scrollbar width but I'm not certain the counter-scaled scrollbar is something to keep. Also some devices with overlaid scrollbars won’t have the scrollbar width adjusted and for them the document unzoomed/zoomed width is at 100% parity.

[github-actions[bot]]

Size Change: -679 B (-0.04%)

Total Size: 1.77 MB

Filename	Size	Change
build/block-editor/content-rtl.css	4.21 kB	-244 B (-5.48%)	✅
build/block-editor/content.css	4.2 kB	-244 B (-5.49%)	✅
build/block-editor/index.min.js	256 kB	-298 B (-0.12%)
build/block-editor/style-rtl.css	15.4 kB	+91 B (+0.59%)
build/block-editor/style.css	15.4 kB	+88 B (+0.57%)
build/edit-widgets/style-rtl.css	4.17 kB	-17 B (-0.41%)
build/edit-widgets/style.css	4.17 kB	-17 B (-0.41%)
build/editor/index.min.js	103 kB	-2 B (0%)
build/editor/style-rtl.css	9.31 kB	-18 B (-0.19%)
build/editor/style.css	9.32 kB	-18 B (-0.19%)

ℹ️ View Unchanged

Filename	Size
build-module/a11y/index.min.js	482 B
build-module/block-library/file/view.min.js	447 B
build-module/block-library/image/view.min.js	1.78 kB
build-module/block-library/navigation/view.min.js	1.16 kB
build-module/block-library/query/view.min.js	743 B
build-module/block-library/search/view.min.js	616 B
build-module/interactivity-router/index.min.js	3 kB
build-module/interactivity/debug.min.js	16.7 kB
build-module/interactivity/index.min.js	13.4 kB
build/a11y/index.min.js	952 B
build/annotations/index.min.js	2.26 kB
build/api-fetch/index.min.js	2.32 kB
build/autop/index.min.js	2.12 kB
build/blob/index.min.js	579 B
build/block-directory/index.min.js	7.26 kB
build/block-directory/style-rtl.css	1.07 kB
build/block-directory/style.css	1.07 kB
build/block-editor/default-editor-styles-rtl.css	394 B
build/block-editor/default-editor-styles.css	394 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	90 B
build/block-library/blocks/archives/style.css	90 B
build/block-library/blocks/audio/editor-rtl.css	149 B
build/block-library/blocks/audio/editor.css	151 B
build/block-library/blocks/audio/style-rtl.css	132 B
build/block-library/blocks/audio/style.css	132 B
build/block-library/blocks/audio/theme-rtl.css	134 B
build/block-library/blocks/audio/theme.css	134 B
build/block-library/blocks/avatar/editor-rtl.css	115 B
build/block-library/blocks/avatar/editor.css	115 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/button/editor-rtl.css	265 B
build/block-library/blocks/button/editor.css	265 B
build/block-library/blocks/button/style-rtl.css	538 B
build/block-library/blocks/button/style.css	538 B
build/block-library/blocks/buttons/editor-rtl.css	291 B
build/block-library/blocks/buttons/editor.css	291 B
build/block-library/blocks/buttons/style-rtl.css	345 B
build/block-library/blocks/buttons/style.css	345 B
build/block-library/blocks/calendar/style-rtl.css	240 B
build/block-library/blocks/calendar/style.css	240 B
build/block-library/blocks/categories/editor-rtl.css	132 B
build/block-library/blocks/categories/editor.css	131 B
build/block-library/blocks/categories/style-rtl.css	152 B
build/block-library/blocks/categories/style.css	152 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	121 B
build/block-library/blocks/code/style.css	121 B
build/block-library/blocks/code/theme-rtl.css	122 B
build/block-library/blocks/code/theme.css	122 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	420 B
build/block-library/blocks/columns/style.css	420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	124 B
build/block-library/blocks/comment-author-avatar/editor.css	124 B
build/block-library/blocks/comment-author-name/style-rtl.css	72 B
build/block-library/blocks/comment-author-name/style.css	72 B
build/block-library/blocks/comment-content/style-rtl.css	120 B
build/block-library/blocks/comment-content/style.css	120 B
build/block-library/blocks/comment-date/style-rtl.css	65 B
build/block-library/blocks/comment-date/style.css	65 B
build/block-library/blocks/comment-edit-link/style-rtl.css	70 B
build/block-library/blocks/comment-edit-link/style.css	70 B
build/block-library/blocks/comment-reply-link/style-rtl.css	71 B
build/block-library/blocks/comment-reply-link/style.css	71 B
build/block-library/blocks/comment-template/style-rtl.css	200 B
build/block-library/blocks/comment-template/style.css	199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	228 B
build/block-library/blocks/comments-pagination/editor.css	217 B
build/block-library/blocks/comments-pagination/style-rtl.css	234 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	832 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	631 B
build/block-library/blocks/cover/editor-rtl.css	641 B
build/block-library/blocks/cover/editor.css	642 B
build/block-library/blocks/cover/style-rtl.css	1.62 kB
build/block-library/blocks/cover/style.css	1.6 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	86 B
build/block-library/blocks/details/style.css	86 B
build/block-library/blocks/embed/editor-rtl.css	331 B
build/block-library/blocks/embed/editor.css	331 B
build/block-library/blocks/embed/style-rtl.css	419 B
build/block-library/blocks/embed/style.css	419 B
build/block-library/blocks/embed/theme-rtl.css	133 B
build/block-library/blocks/embed/theme.css	133 B
build/block-library/blocks/file/editor-rtl.css	326 B
build/block-library/blocks/file/editor.css	326 B
build/block-library/blocks/file/style-rtl.css	278 B
build/block-library/blocks/file/style.css	279 B
build/block-library/blocks/file/view.min.js	324 B
build/block-library/blocks/footnotes/style-rtl.css	198 B
build/block-library/blocks/footnotes/style.css	197 B
build/block-library/blocks/form-input/editor-rtl.css	229 B
build/block-library/blocks/form-input/editor.css	229 B
build/block-library/blocks/form-input/style-rtl.css	357 B
build/block-library/blocks/form-input/style.css	357 B
build/block-library/blocks/form-submission-notification/editor-rtl.css	344 B
build/block-library/blocks/form-submission-notification/editor.css	341 B
build/block-library/blocks/form-submit-button/style-rtl.css	69 B
build/block-library/blocks/form-submit-button/style.css	69 B
build/block-library/blocks/form/view.min.js	470 B
build/block-library/blocks/freeform/editor-rtl.css	2.6 kB
build/block-library/blocks/freeform/editor.css	2.6 kB
build/block-library/blocks/gallery/editor-rtl.css	946 B
build/block-library/blocks/gallery/editor.css	951 B
build/block-library/blocks/gallery/style-rtl.css	1.83 kB
build/block-library/blocks/gallery/style.css	1.82 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	334 B
build/block-library/blocks/group/editor.css	334 B
build/block-library/blocks/group/style-rtl.css	103 B
build/block-library/blocks/group/style.css	103 B
build/block-library/blocks/group/theme-rtl.css	79 B
build/block-library/blocks/group/theme.css	79 B
build/block-library/blocks/heading/style-rtl.css	188 B
build/block-library/blocks/heading/style.css	188 B
build/block-library/blocks/html/editor-rtl.css	346 B
build/block-library/blocks/html/editor.css	347 B
build/block-library/blocks/image/editor-rtl.css	785 B
build/block-library/blocks/image/editor.css	787 B
build/block-library/blocks/image/style-rtl.css	1.59 kB
build/block-library/blocks/image/style.css	1.59 kB
build/block-library/blocks/image/theme-rtl.css	137 B
build/block-library/blocks/image/theme.css	137 B
build/block-library/blocks/image/view.min.js	1.65 kB
build/block-library/blocks/latest-comments/style-rtl.css	355 B
build/block-library/blocks/latest-comments/style.css	354 B
build/block-library/blocks/latest-posts/editor-rtl.css	179 B
build/block-library/blocks/latest-posts/editor.css	179 B
build/block-library/blocks/latest-posts/style-rtl.css	509 B
build/block-library/blocks/latest-posts/style.css	510 B
build/block-library/blocks/list/style-rtl.css	107 B
build/block-library/blocks/list/style.css	107 B
build/block-library/blocks/loginout/style-rtl.css	61 B
build/block-library/blocks/loginout/style.css	61 B
build/block-library/blocks/media-text/editor-rtl.css	321 B
build/block-library/blocks/media-text/editor.css	320 B
build/block-library/blocks/media-text/style-rtl.css	558 B
build/block-library/blocks/media-text/style.css	556 B
build/block-library/blocks/more/editor-rtl.css	427 B
build/block-library/blocks/more/editor.css	427 B
build/block-library/blocks/navigation-link/editor-rtl.css	644 B
build/block-library/blocks/navigation-link/editor.css	645 B
build/block-library/blocks/navigation-link/style-rtl.css	192 B
build/block-library/blocks/navigation-link/style.css	191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	295 B
build/block-library/blocks/navigation-submenu/editor.css	294 B
build/block-library/blocks/navigation/editor-rtl.css	2.19 kB
build/block-library/blocks/navigation/editor.css	2.2 kB
build/block-library/blocks/navigation/style-rtl.css	2.25 kB
build/block-library/blocks/navigation/style.css	2.23 kB
build/block-library/blocks/navigation/view.min.js	1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css	392 B
build/block-library/blocks/nextpage/editor.css	392 B
build/block-library/blocks/page-list/editor-rtl.css	378 B
build/block-library/blocks/page-list/editor.css	378 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	236 B
build/block-library/blocks/paragraph/editor.css	236 B
build/block-library/blocks/paragraph/style-rtl.css	341 B
build/block-library/blocks/paragraph/style.css	340 B
build/block-library/blocks/post-author-biography/style-rtl.css	74 B
build/block-library/blocks/post-author-biography/style.css	74 B
build/block-library/blocks/post-author-name/style-rtl.css	69 B
build/block-library/blocks/post-author-name/style.css	69 B
build/block-library/blocks/post-author/editor-rtl.css	107 B
build/block-library/blocks/post-author/editor.css	107 B
build/block-library/blocks/post-author/style-rtl.css	188 B
build/block-library/blocks/post-author/style.css	189 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	527 B
build/block-library/blocks/post-comments-form/style.css	528 B
build/block-library/blocks/post-content/style-rtl.css	61 B
build/block-library/blocks/post-content/style.css	61 B
build/block-library/blocks/post-date/style-rtl.css	62 B
build/block-library/blocks/post-date/style.css	62 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	155 B
build/block-library/blocks/post-excerpt/style.css	155 B
build/block-library/blocks/post-featured-image/editor-rtl.css	729 B
build/block-library/blocks/post-featured-image/editor.css	726 B
build/block-library/blocks/post-featured-image/style-rtl.css	347 B
build/block-library/blocks/post-featured-image/style.css	347 B
build/block-library/blocks/post-navigation-link/style-rtl.css	215 B
build/block-library/blocks/post-navigation-link/style.css	214 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	399 B
build/block-library/blocks/post-template/style.css	398 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-time-to-read/style-rtl.css	70 B
build/block-library/blocks/post-time-to-read/style.css	70 B
build/block-library/blocks/post-title/style-rtl.css	162 B
build/block-library/blocks/post-title/style.css	162 B
build/block-library/blocks/preformatted/style-rtl.css	125 B
build/block-library/blocks/preformatted/style.css	125 B
build/block-library/blocks/pullquote/editor-rtl.css	134 B
build/block-library/blocks/pullquote/editor.css	134 B
build/block-library/blocks/pullquote/style-rtl.css	342 B
build/block-library/blocks/pullquote/style.css	342 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	121 B
build/block-library/blocks/query-pagination-numbers/editor.css	118 B
build/block-library/blocks/query-pagination/editor-rtl.css	154 B
build/block-library/blocks/query-pagination/editor.css	154 B
build/block-library/blocks/query-pagination/style-rtl.css	237 B
build/block-library/blocks/query-pagination/style.css	237 B
build/block-library/blocks/query-title/style-rtl.css	64 B
build/block-library/blocks/query-title/style.css	64 B
build/block-library/blocks/query/editor-rtl.css	452 B
build/block-library/blocks/query/editor.css	451 B
build/block-library/blocks/query/view.min.js	958 B
build/block-library/blocks/quote/style-rtl.css	238 B
build/block-library/blocks/quote/style.css	238 B
build/block-library/blocks/quote/theme-rtl.css	233 B
build/block-library/blocks/quote/theme.css	236 B
build/block-library/blocks/read-more/style-rtl.css	138 B
build/block-library/blocks/read-more/style.css	138 B
build/block-library/blocks/rss/editor-rtl.css	101 B
build/block-library/blocks/rss/editor.css	101 B
build/block-library/blocks/rss/style-rtl.css	288 B
build/block-library/blocks/rss/style.css	287 B
build/block-library/blocks/search/editor-rtl.css	199 B
build/block-library/blocks/search/editor.css	199 B
build/block-library/blocks/search/style-rtl.css	672 B
build/block-library/blocks/search/style.css	671 B
build/block-library/blocks/search/theme-rtl.css	113 B
build/block-library/blocks/search/theme.css	113 B
build/block-library/blocks/search/view.min.js	475 B
build/block-library/blocks/separator/editor-rtl.css	100 B
build/block-library/blocks/separator/editor.css	100 B
build/block-library/blocks/separator/style-rtl.css	248 B
build/block-library/blocks/separator/style.css	248 B
build/block-library/blocks/separator/theme-rtl.css	195 B
build/block-library/blocks/separator/theme.css	195 B
build/block-library/blocks/shortcode/editor-rtl.css	286 B
build/block-library/blocks/shortcode/editor.css	286 B
build/block-library/blocks/site-logo/editor-rtl.css	806 B
build/block-library/blocks/site-logo/editor.css	803 B
build/block-library/blocks/site-logo/style-rtl.css	218 B
build/block-library/blocks/site-logo/style.css	218 B
build/block-library/blocks/site-tagline/editor-rtl.css	87 B
build/block-library/blocks/site-tagline/editor.css	87 B
build/block-library/blocks/site-tagline/style-rtl.css	65 B
build/block-library/blocks/site-tagline/style.css	65 B
build/block-library/blocks/site-title/editor-rtl.css	85 B
build/block-library/blocks/site-title/editor.css	85 B
build/block-library/blocks/site-title/style-rtl.css	143 B
build/block-library/blocks/site-title/style.css	143 B
build/block-library/blocks/social-link/editor-rtl.css	338 B
build/block-library/blocks/social-link/editor.css	338 B
build/block-library/blocks/social-links/editor-rtl.css	729 B
build/block-library/blocks/social-links/editor.css	727 B
build/block-library/blocks/social-links/style-rtl.css	1.51 kB
build/block-library/blocks/social-links/style.css	1.5 kB
build/block-library/blocks/spacer/editor-rtl.css	346 B
build/block-library/blocks/spacer/editor.css	346 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-of-contents/style-rtl.css	83 B
build/block-library/blocks/table-of-contents/style.css	83 B
build/block-library/blocks/table/editor-rtl.css	394 B
build/block-library/blocks/table/editor.css	394 B
build/block-library/blocks/table/style-rtl.css	640 B
build/block-library/blocks/table/style.css	639 B
build/block-library/blocks/table/theme-rtl.css	152 B
build/block-library/blocks/table/theme.css	152 B
build/block-library/blocks/tag-cloud/editor-rtl.css	144 B
build/block-library/blocks/tag-cloud/editor.css	144 B
build/block-library/blocks/tag-cloud/style-rtl.css	266 B
build/block-library/blocks/tag-cloud/style.css	265 B
build/block-library/blocks/template-part/editor-rtl.css	368 B
build/block-library/blocks/template-part/editor.css	368 B
build/block-library/blocks/template-part/theme-rtl.css	113 B
build/block-library/blocks/template-part/theme.css	113 B
build/block-library/blocks/term-description/style-rtl.css	126 B
build/block-library/blocks/term-description/style.css	126 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	165 B
build/block-library/blocks/text-columns/style.css	165 B
build/block-library/blocks/verse/style-rtl.css	98 B
build/block-library/blocks/verse/style.css	98 B
build/block-library/blocks/video/editor-rtl.css	396 B
build/block-library/blocks/video/editor.css	397 B
build/block-library/blocks/video/style-rtl.css	192 B
build/block-library/blocks/video/style.css	192 B
build/block-library/blocks/video/theme-rtl.css	134 B
build/block-library/blocks/video/theme.css	134 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.1 kB
build/block-library/common.css	1.1 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.7 kB
build/block-library/editor.css	11.7 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/index.min.js	219 kB
build/block-library/reset-rtl.css	472 B
build/block-library/reset.css	472 B
build/block-library/style-rtl.css	14.9 kB
build/block-library/style.css	14.9 kB
build/block-library/theme-rtl.css	708 B
build/block-library/theme.css	712 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/blocks/index.min.js	52.5 kB
build/commands/index.min.js	16.1 kB
build/commands/style-rtl.css	955 B
build/commands/style.css	952 B
build/components/index.min.js	227 kB
build/components/style-rtl.css	12.3 kB
build/components/style.css	12.3 kB
build/compose/index.min.js	12.7 kB
build/core-commands/index.min.js	3.11 kB
build/core-data/index.min.js	73.4 kB
build/customize-widgets/index.min.js	11 kB
build/customize-widgets/style-rtl.css	1.35 kB
build/customize-widgets/style.css	1.35 kB
build/data-controls/index.min.js	641 B
build/data/index.min.js	8.98 kB
build/date/index.min.js	18 kB
build/deprecated/index.min.js	458 B
build/dom-ready/index.min.js	325 B
build/dom/index.min.js	4.66 kB
build/edit-post/classic-rtl.css	578 B
build/edit-post/classic.css	580 B
build/edit-post/index.min.js	13.6 kB
build/edit-post/style-rtl.css	2.54 kB
build/edit-post/style.css	2.54 kB
build/edit-site/index.min.js	218 kB
build/edit-site/posts-rtl.css	7.35 kB
build/edit-site/posts.css	7.35 kB
build/edit-site/style-rtl.css	12.6 kB
build/edit-site/style.css	12.6 kB
build/edit-widgets/index.min.js	17.8 kB
build/element/index.min.js	4.83 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	8.11 kB
build/format-library/style-rtl.css	476 B
build/format-library/style.css	476 B
build/hooks/index.min.js	1.65 kB
build/html-entities/index.min.js	445 B
build/i18n/index.min.js	3.58 kB
build/is-shallow-equal/index.min.js	526 B
build/keyboard-shortcuts/index.min.js	1.31 kB
build/keycodes/index.min.js	1.46 kB
build/list-reusable-blocks/index.min.js	2.19 kB
build/list-reusable-blocks/style-rtl.css	852 B
build/list-reusable-blocks/style.css	852 B
build/media-utils/index.min.js	3.2 kB
build/notices/index.min.js	946 B
build/nux/index.min.js	1.62 kB
build/nux/style-rtl.css	749 B
build/nux/style.css	745 B
build/patterns/index.min.js	7.34 kB
build/patterns/style-rtl.css	687 B
build/patterns/style.css	685 B
build/plugins/index.min.js	1.81 kB
build/preferences-persistence/index.min.js	2.06 kB
build/preferences/index.min.js	2.9 kB
build/preferences/style-rtl.css	554 B
build/preferences/style.css	554 B
build/primitives/index.min.js	829 B
build/priority-queue/index.min.js	1.54 kB
build/private-apis/index.min.js	960 B
build/react-i18n/index.min.js	630 B
build/react-refresh-entry/index.min.js	9.47 kB
build/react-refresh-runtime/index.min.js	6.76 kB
build/redux-routine/index.min.js	2.69 kB
build/reusable-blocks/index.min.js	2.55 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	10.1 kB
build/router/index.min.js	1.96 kB
build/server-side-render/index.min.js	1.94 kB
build/shortcode/index.min.js	1.4 kB
build/style-engine/index.min.js	2.04 kB
build/token-list/index.min.js	581 B
build/url/index.min.js	3.9 kB
build/vendors/react-dom.min.js	41.7 kB
build/vendors/react-jsx-runtime.min.js	560 B
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	965 B
build/warning/index.min.js	250 B
build/widgets/index.min.js	7.17 kB
build/widgets/style-rtl.css	1.16 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.03 kB

_{compressed-size-action}

[stokesman]

I am pinging some folks who’ve worked on Zoom Out but not asking for a complete review. I’d appreciate any testing or any cursory opinions on how worthwhile this looks. @ajlende, @ellatrix, @scruffian, @MaggieCabrera please ping anyone else if you feel they’d have interest.

There’s been a few e2e tests that have failed consistently on this branch but so far they’re mysterious to me. The tests also fail locally but so far I can’t reproduce with manual testing of the same scenarios. It’s also hard to see how the changes here would affect them anyway. I’ll continue looking into it.

[MaggieCabrera]

Thanks for this PR, @stokesman !

I'm unsure about the margin at the bottom when there's enough content to scroll. It feels like it's cutoff. I'll let @richtabor give design feedback on that though

[MaggieCabrera]

The overflow is cutting off things like the focus borders of the section and messing with the position of the toolbar. This screenshot is FF on a mac with dark mode enabled and always visible scrollbars, and it looks like this:

[scruffian]

This is looking good to me. It would be good to get a review from someone who is more familiar with the code.

[stokesman]

The overflow is cutting off things like the focus borders of the section and messing with the position of the toolbar.

Thanks for highlighting this. I thought it would be a good thing in that it better aligns Zoom Out with Device Previews which do the same: But I do think it doesn’t go as well with the vertical toolbar.

---

UPDATE: I’ve pushed a couple of commits aimed at addressing this but just for proofing (they’d be better done in follow-ups). Now the toolbar sticks at the top of the iframe and I tried adding a “border” that might help clipping be expected. It looks like this:

The toolbar position would probably have to be a follow up because it requires changing Popover and here it’s done in too naive a way. The “border” is simple enough we could include it if favorable but we’d probably want to do a follow-up doing the same on Device previews. I’m pretty sure those used to have a border and I'm not sure why that would have changed.

[scruffian]

Do you think it's work adding the custom-scrollbars-on-hover mixin` so that the scrollbars have the same treatment as elsewhere in the editor?

[MaggieCabrera]

Do you think it's work adding the custom-scrollbars-on-hover mixin` so that the scrollbars have the same treatment as elsewhere in the editor?

Good call, it might be what we need here

[stokesman]

Do you think it's work adding the custom-scrollbars-on-hover mixin

Thanks for the suggestion. I tried it but am uncertain of how advantageous it is in this case. There any several details to consider so I’ll start with my overall take-away. For this PR, I think the best thing would be to remove the current customization of the scrollbar and not add the mixin. That way there are fewer factors to evaluate. The sole purpose of the current customization was to prevent a shrunken scrollbar when transforming the iframe. Yet it only worked in Chrome and when the scrollbar is not overlaid. Finally, a shrunken scrollbar shouldn’t be a blocker (especially in contrast to the inaccessible scrollbar in trunk).

Now to detail what I found trying the mixin. Here’s what it does that needs overridden for this case and/or creates a tradeoff (Though none of this seems to apply for overlaid scrollbars):

• adds a gutter on both sides This makes the apparent spacing around the iframe unequal between vertical and horizontal sides. That’s without the frame border that was a recent proofing addition. With such a border it makes for an odd band on either side of the content.
• makes the scrollbar thin This compounds how thin the scrollbar goes due to scaling the iframe though it’s an easy override to not have it that way. Further, I couldn’t manage to both use the mixin and counter-scale its width (though this only ever worked for Chrome anyway).
• makes the track background transparent Without a frame border this is okay as long as we don’t mind it’s part of the unequal horizontal/vertical apparent spacing around the iframe mention in the first point.

Here’s a video to help illustrate:

https://github.com/user-attachments/assets/c0222289-3018-45f4-9bef-e6770a3757db

Oh, one last tidbit. It seems to really have our way with the scrollbar it would require a library like simplebar but the compromise there is a small bundle size increase.

[richtabor]

A few notes:

1. Wide zoom feels off

When I zoom out, I don't expect the site to be fullwidth while in zoom out. It negates the effect of zooming a bit, utilizing space that is unnecessary to cover. The perception of content and spacing seems off, when it can be so wide:

Trunk	This PR

2. Allow full scrolling

I don't think we should loose the space above the site when zoomed out, but allow the site to scroll like in trunk, into that space:

Trunk	This PR

3. Distracting omnipresent scrollbar

This scrollbar should not be omnipresent. It is positioned better, but never goes away and is distracting.

4. Improved scaling

The scaling of content is better (testing with this pattern). Trunk has a few oddities, as seen below:

Trunk:

https://github.com/user-attachments/assets/8d019be8-2f31-4ada-813d-9a28cc9a426b

PR:

https://github.com/user-attachments/assets/5df9fded-31f2-4f80-82d4-6adc6c0f788d

[stokesman]

Thanks for testing this Rich! Pardon the pause on getting back to this one.

1. Wide zoom feels off
2. Distracting omnipresent scrollbar

Both of those are addressed. The latter had been on my todo anyway.

2. Allow full scrolling

This one is tricky on this branch. Here are some ways I've tried doing it. I put screen recordings in the details.

Put the vertical spacing inside the iframe. This is like how it is in trunk but it makes for an odd scrollbar on this branch. It can be somewhat alleviated by also putting the horizontal spacing inside the iframe but that helps only as long as the viewport is narrower than canvas maximum width.

https://github.com/user-attachments/assets/3f616d99-ee54-4bea-b4d1-b111d00e795a

Shift the canvas vertically per document scroll progress. This one comes close in feeling but it’s not the same thing.

https://github.com/user-attachments/assets/6c9cc6a9-c7ad-4778-8d0b-8532a1257915

After exploring those, I did have another idea for how it can be made just like trunk and did some dev on it. There is promise but it’s pretty involved and would be better left to a separate PR.

There’s also room to try simpler ideas like reducing the vertical spacing or removing it from the bottom edge.

[richtabor]

@stokesman I like the big PR for pulling ideas together, but is there any part of this that can be abstracted and potentially pushed as a standalone PR?

The scaling of content is better (testing with this pattern). Trunk has a few oddities, as seen below:

I'm thinking this specifically.

[richtabor]

I'm missing the fluidity of what's in trunk, when zoom out is engaged:

https://github.com/user-attachments/assets/14576576-d715-42c5-ab5e-e338549f6fcc

[scruffian]

is there any part of this that can be abstracted and potentially pushed as a standalone PR?

I think this is a good idea. This PR is really big which makes it hard to see how all the changes interact. Maybe if you could break it into smaller PRs it would be easier to review.

[stokesman]

I'm missing the fluidity of what's in trunk, when zoom out is engaged:

I think the restoration of the maximum width made it quite obvious the iframe no longer had a transition. I restored the transition now. Be on the look out to see if it reintroduced oddities when scaling the content (in regards to "The scaling of content is better"). The transition may be prone to oddities until the final scale can be specified the instant that zoom out is engaged. As of now (and in trunk), the scale is calculated multiple times in response to the the container width changes and each one initiates a transition that’s interrupted by the next until the final one.

---

is there any part of this that can be abstracted and potentially pushed as a standalone PR?

I intend to break it up as much as possible. I’ll go ahead and look at what can be isolated but I think it’ll hard to determine and/or limited without knowing how we’ll decide on the pivotal thing here—whether Zoom Out is to keep scaling the html or change to scaling the iframe. My feeling is the feature is going to be more tenable if we switch to scaling the iframe.

[stokesman]

I've become more confident that this is something we’ll want to do. I’ve had a go at fixing some of the issues individually and it can be done yet this seems much more advantageous.

The prime example is #64117, which if fixed in a minimal way leads to more styles that have to be applied within the canvas document and have some chance of conflicting with theme styles. It also requires changing some of the styles already applied within the document and may cause regressions of past issues (or at least more work to not regress anything). It will also—as far as I’ve been able to find—induce the same UI change that this PR does where the spacing around the canvas is outside the scrollable area.

As for breaking this PR up, it could be done but not to a large degree. The change to scale the iframe instead of its html requires most everything else here just to not regress various things. I think the biggest thing that can be done separately is preventing the scale from being adjusted when the window is resized fcdf9f1ab5944429fcbd47acdadee61c4468190b so I'd be okay with doing so. One other minor thing that will be left out is c448498f3b84a6c6c7e742120a6c358515827c95. Besides that, I’ve managed to simplify and reduce the additions here.

I'm still leaving this drafted because of the e2e tests that I’ve yet to figure out. In the mean time, I'd love if anyone could have a go at fixing #64117 because either they can figure out a way that I didn’t see or it may evidence this as being the indicated solution.

[MaggieCabrera]

I'm seeing a few things:

Safari scaling (left) looks different to Firefox:

On both browsers, when I click on one of the inserters, I see a horizontal scrollbar appear, and the general shadow that we are using is messing up with the separator animation (and the background of the scrollbar doesn't look great with it either):

The blue borders on hover of the section are too small, seems like they are scaling with the rest of the content, they shouldn't. The scrollbars are scaling too, which makes it impossible to click and drag them.

[draganescu]

@stokesman twp possibly useful hints to improve review accuracy:

1. split this into multiple PR that merge into one base. Even if some of the intermediary PRs have broken bits, it's easier to highlight the iterations and review them independently.
2. do a self review and explain every change yourself

The PR is not that "big" as it is complex - e.g. from the description and title it seems we just change a CSS technique but the changeset ends up updating types.

[MaggieCabrera]

I'm having a hard time reviewing the code for this, can you please explain why you decided to change the transform to the html element?

[jeryj]

Thanks for working on this! From some initial testing, scaling the iframe does seem to address a lot of issues.

Some issues I see from this over trunk:

• The selected block either isn't focusable or the arrow keys are (correctly?) being intercepted by the iframe wrapper to be used to scroll the canvas. This is great on one hand, but it means you can't use the arrow keys to move block selection.
• The top/bottom padding away from the canvas.
• On trunk, I can scroll the gray area around the zoomed out canvas. On this, since the iframe maintains the scrolling, I have to scroll on the frame. To a user, I don't think they should need to be aware to scroll the canvas vs the area outside it. It should be one area as far as they're concerned.

I'm not sure which items are going to be the most important, or if we can get all of the things without making some concessions.

[stokesman]

Hi folks, pardon my slow response here. I’ve not thought this should be urgent so I’ve let it sit.

@getdave, thanks for having a look and reading the prior comments.

We can't merge this PR with those spaces.

I wonder how that’s concluded. As far as I can tell, the current state is a happy accident (first appearing in #59334) not a design decision. That’s not to argue it doesn’t have value but that it would seem open to consideration.

My feeling is the feature is going to be more tenable if we switch to scaling the iframe.

Noting that Zoom Out will not longer be active if the editor is not in an iframe. Does that help?

To clarify, my comment was not about whether the canvas is an iframe. It was about applying transform: scale to the iframe instead of the html. Why more tenable? I hope to clarify that in reply to Maggie’s question later on.

---

@MaggieCabrera, thanks for testing again and finding those issues.

Safari scaling (left) looks different to Firefox

So far I haven’t been able to reproduce.

when I click on one of the inserters, I see a horizontal scrollbar appear, and the general shadow that we are using is messing up with the separator animation (and the background of the scrollbar doesn't look great with it either)

I fixed the horizontal scrollbar. I removed the shadow since it’s not a thing on trunk; was causing issues when I tested in Firefox and does jar with the inserter separator’s current intended appearance as a gap. The scrollbar’s part in that at least is largely not an issue on devices that only show them when in use.

The scrollbars are scaling too, which makes it impossible to click and drag them.

I’m glad you mention this. Back when the PR was first made Zoom Out completely hid the scrollbars so the shrunken scrollbar seemed less bad in comparison. Now, on trunk the scrollbar can still end up hidden so I'm not sure there’s a clear winner on this point.

why you decided to change the transform to the html element?

Originally I started this to keep the scrollbar visible and improve the centering of the canvas when the scrollbar is not overlaid. The first commit does that without changing where the transform is applied and that seemed great. Except I noticed that it introduces breakpoint disparity issues. It wasn’t obvious to me why that is and to document it I’ve made #65595. So the first decision to transform the iframe was to get past that issue.

From there, I discovered it facilitates fixing or allows simplifying additional things, among these:

1. preserved scroll position
2. sticky positioning support
3. reduced number of elements/properties that have to animate in transitions
4. reduced amount of styles applied inside the canvas document (and potential edge cases with themes)

---

@jeryj, Thanks for giving this a look.

• The selected block either isn't focusable or the arrow keys are (correctly?) being intercepted by the iframe wrapper to be used to scroll the canvas. This is great on one hand, but it means you can't use the arrow keys to move block selection.

This is concerning, but I'm not seeing it. Granted my local branch is diverged so maybe it was fixed. I’m pushing my latest changes soon.

• The top/bottom padding away from the canvas.
• On trunk, I can scroll the gray area around the zoomed out canvas. On this, since the iframe maintains the scrolling, I have to scroll on the frame. To a user, I don't think they should need to be aware to scroll the canvas vs the area outside it. It should be one area as far as they're concerned.

These two are technically tied together and I ❤️ that you mention the latter point. It’s the feature I would most wish to keep. Yet I'm not sure I see it as essential. It’s one thing you can say that comes for free with scaling the html and here would require additional code to support. I have a branch exploring that and I suppose I need to make a PR of it based on this one so we’d be better able to compare costs.

[jeryj]

I've been playing with this and looking into it with @MaggieCabrera and @ajlende. I think the scrollbar being within the iframe instead of being able to scroll the gray area is a dealbreaker. I do appreciate that moving the scaling to the iframe does make a lot of other things simpler though. Open to ideas on how to sync up that scrolling with the outer wrapper, but it feels like that will add a lot of complexity and get us in a similar spot to where we are now.

We're focused on trying to get smaller fixes to the existing issues with the current implementation. Your PR for fixing the scaling issue is really promising, so we'll take a look at that now. Let's keep working on finding the best solution for this overall after the 6.7 release though. This <iframe /> scaling direction may be the best in the end.

[stokesman]

I think the scrollbar being within the iframe instead of being able to scroll the gray area is a dealbreaker.

I do appreciate this concern and, as I said, having the whole gray area activate scrolling is my favorite thing about the current state. Yet I think it’s worth recognizing that it was not designed that way. It was a happy accident that came about with #59334 so it doesn’t seem like a must have. Consider also that none of the other "framed" views in the editor scroll like that (Device previews or other focused editing views) and making them do so is certainly non-trivial.

We're focused on trying to get smaller fixes to the existing issues with the current implementation.

That’s understandable and why I’d mostly been letting this one sleep.

[MaggieCabrera]

I do appreciate this concern and, as I said, having the whole gray area activate scrolling is my favorite thing about the current state. Yet I think it’s worth recognizing that it was not designed that way. It was a happy accident that came about with #59334 so it doesn’t seem like a must have. Consider also that none of the other "framed" views in the editor scroll like that (Device previews or other focused editing views) and making them do so is certainly non-trivial.

Zoom out is not a device preview. We even moved it out of the dropdown because it was confusing, so they shouldn't behave the same and we don't want to change how device previews work right now, so they can stay the way they are. They are emulating a smaller screen just like browser inspectors do. Zoom out is something else and it should be closer to the site editing experience. Thanks for all your hard work here, this is a really complex problem.

[stokesman]

Zoom out is not a device preview.

Right and my point does not conflate them nor say their scrolling has to work the same. It’s largely to make the point that if device previews don’t need to scroll like that then it is not an essential thing for zoom out either. More generally, it’s something to keep in mind for broader perspective and especially with regards to whether zoom out’s "assembly" mode functions are to be forever tied to the view scaling as that seems to be under consideration. I think the view scaling has a potential to be useful outside of that. Anyway, some of this is just going to take time to sort out. I don’t wish to debate any of this right now.

[ellatrix]

There are some bugs that seen best solved by having zoom out scale the iframe instead of its html element.

Didn't read all comments here, but did you check 100vh elements? If I remember correctly the reason we switched to html (it was initially iframe) was that it breaks relative units. If you're going to stretch the viewport, it will affect these.

It worth nothing that zoom out is not purely a scaling of the viewport (iframe), it also changes the viewport. That's why it seemed better to scale the content inside instead.

[ellatrix]

Original PR:

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

[stokesman]

Didn't read all comments here, but did you check 100vh elements?

Yes, and the first thing in testing instructions is vh units and your PR.

It worth nothing that zoom out is not purely a scaling of the viewport (iframe), it also changes the viewport

Pardon me but I can’t seem to grasp what you mean. If it has to do with media queries then I think scaling the contents is certainly not simpler see #65595 and #66034.

[ellatrix]

Pardon me but I can’t seem to grasp what you mean.

If you adjust the iframe element instead, you are narrowing the width and increasing the height (so you can see more content), no? So the viewport goes from a "landscape" view to a "portrait" view, which affects the viewport units.

[ellatrix]

Whereas with scaling the content, the viewport ratio remains the exact same.