Restore scale adjustment to limit zoomed out maximum width

WordPress · Jul 30, 2024 · 628a357 · 628a357
1 parent a5d692d
commit 628a357
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -1,4 +1,5 @@
 iframe[name="editor-canvas"].is-zoomed-out {
+	$maxWidth: 800px; // This is also hardcoded as ZOOM_OUT_MAX_WIDTH in the iframe component and needs to be manually kept in sync.
 	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
 	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
 	position: relative;
@@ -9,9 +10,11 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	// Transform scale doesn’t affect the layout size of the element, so counterscale
 	// the width, height and negative margins to fit the untransformed size.
 	width: calc((100% - #{$inset} * 2) / #{$scale});
-	margin-inline: calc((-50% + #{$inset}) / #{$scale} + 50% - #{$inset});
 	height: calc((100% - #{$inset} * 2) / #{$scale});
 	margin-block: 0 calc(-100% / #{$scale});
+	$insetMaxWidth: "(#{$maxWidth} - #{$inset} * 2)";
+	max-width: calc(#{$insetMaxWidth} / #{$scale});
+	margin-inline: calc(max(-50% + #{$inset}, -0.5 * #{$insetMaxWidth}) / #{$scale} + 50% - #{$inset});
 }
 
 .block-editor-iframe__html {

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -104,6 +104,11 @@ function useBubbleEvents( iframeDocument ) {
 	} );
 }
 
+// The max-width for the iframe when zoomed out, though the frameSize is treated as within
+// so the actual width of the iframe will be less than this by the frameSize on each side.
+// This is also hardcoded in the styles so be sure to keep them in sync.
+const ZOOM_OUT_MAX_WIDTH = 800;
+
 function Iframe( {
 	contentRef,
 	children,
@@ -262,8 +267,11 @@ function Iframe( {
 			refZoomOutStatus.current.effect = ( isActive, nextWidth ) => {
 				if ( isActive ) {
 					const { priorContainerWidth } = refZoomOutStatus.current;
-					nextWidth -= frameSize * 2;
-					const nextScale = nextWidth / priorContainerWidth;
+					const frameInlineWidth = frameSize * 2;
+					nextWidth -= frameInlineWidth;
+					const maxWidth = ZOOM_OUT_MAX_WIDTH - frameInlineWidth;
+					const nextScale =
+						Math.min( maxWidth, nextWidth ) / priorContainerWidth;
 					actualizeZoom( nextScale, `${ frameSize }px` );
 					clearTimeout( refZoomOutStatus.current.timerId );
 					refZoomOutStatus.current.timerId = setTimeout( () => {