Finish merge

WordPress · May 10, 2024 · 54584eb · 54584eb
1 parent 1a4f079
commit 54584eb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -26,6 +26,7 @@
 	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
 	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width);
 
 	transform: scale(#{$scale});
 

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -104,7 +104,7 @@ function Iframe( {
 	contentRef,
 	children,
 	tabIndex = 0,
-	scale: scaleProp = 1,
+	scale = 1,
 	frameSize = 0,
 	readonly,
 	forwardedRef: ref,
@@ -237,15 +237,6 @@ function Iframe( {
 		};
 	}, [] );
 
-	const scale = useMemo( () => {
-		return typeof scaleProp === 'function'
-			? scaleProp( {
-					containerWidth,
-					windowInnerWidth,
-			  } )
-			: scaleProp;
-	}, [ scaleProp, containerWidth, windowInnerWidth ] );
-
 	const isZoomedOut = scale !== 1;
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
@@ -306,13 +297,16 @@ function Iframe( {
 
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
+		const maxWidth = 800;
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			`${ scale }`
+			scale === 'default'
+				? Math.min( containerWidth, maxWidth ) / windowInnerWidth
+				: scale
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-frame-size',
-			`${ frameSize }px`
+			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-content-height',
@@ -322,6 +316,10 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-inner-height',
 			`${ iframeWindowInnerHeight }px`
 		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-container-width',
+			`${ containerWidth }px`
+		);
 
 		return () => {
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
@@ -338,13 +336,18 @@ function Iframe( {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-inner-height'
 			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-container-width'
+			);
 		};
 	}, [
 		scale,
 		frameSize,
 		iframeDocument,
 		iframeWindowInnerHeight,
 		contentHeight,
+		containerWidth,
+		windowInnerWidth,
 		isZoomedOut,
 	] );
 

diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -50,13 +50,6 @@ const DESIGN_POST_TYPES = [
 	'wp_template_part',
 ];
 
-const FRAME_SIZE = 20;
-const ZOOM_OUT_MAX_WIDTH = 800;
-
-function computeZoomOutScale( { containerWidth, windowInnerWidth } ) {
-	return Math.min( containerWidth, ZOOM_OUT_MAX_WIDTH ) / windowInnerWidth;
-}
-
 /**
  * Given an array of nested blocks, find the first Post Content
  * block inside it, recursing through any nesting levels,
@@ -330,6 +323,13 @@ function EditorCanvas( {
 		} ),
 	] );
 
+	const zoomOutProps = isZoomOutMode
+		? {
+				scale: 'default',
+				frameSize: '20px',
+		  }
+		: {};
+
 	return (
 		<BlockCanvas
 			shouldIframe={
@@ -343,12 +343,11 @@ function EditorCanvas( {
 					'has-editor-padding': showEditorPadding,
 				} ),
 				...iframeProps,
+				...zoomOutProps,
 				style: {
 					...iframeProps?.style,
 					...deviceStyles,
 				},
-				scale: isZoomOutMode ? computeZoomOutScale : undefined,
-				frameSize: isZoomOutMode ? FRAME_SIZE : undefined,
 			} }
 		>
 			{ themeSupportsLayout &&