Zoom out: keep original viewport width (single scale)

packages/block-editor/src/components/iframe/index.js

@@ -104,7 +104,7 @@ function Iframe( {
 	contentRef,
 	children,
 	tabIndex = 0,
-	scale = 1,
+	scale: scaleProp = 1,
 	frameSize = 0,
 	readonly,
 	forwardedRef: ref,
@@ -124,10 +124,10 @@ function Iframe( {
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [
-		contentResizeListener,
-		{ height: contentHeight, width: contentWidth },
-	] = useResizeObserver();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -207,9 +207,10 @@ function Iframe( {
 		};
 	}, [] );
 
-	const windowResizeRef = useRefEffect( ( node ) => {
+	const iframeResizeRef = useRefEffect( ( node ) => {
 		const nodeWindow = node.ownerDocument.defaultView;
 
+		setIframeWindowInnerHeight( nodeWindow.innerHeight );
 		const onResize = () => {
 			setIframeWindowInnerHeight( nodeWindow.innerHeight );
 		};
@@ -221,6 +222,17 @@ function Iframe( {
 
 	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
 
+	const [ windowInnerWidth, setWindowInnerWidth ] = useState();
+
+	const scale = useMemo( () => {
+		return typeof scaleProp === 'function'
+			? scaleProp( {
+					containerWidth,
+					windowInnerWidth,
+			  } )
+			: scaleProp;
+	}, [ scaleProp, containerWidth, windowInnerWidth ] );
+
 	const scaleRef = useRefEffect(
 		( body ) => {
 			// Hack to get proper margins when scaling the iframe document.
@@ -255,7 +267,6 @@ function Iframe( {
 			iframeDocument,
 			contentHeight,
 			iframeWindowInnerHeight,
-			contentWidth,
 		]
 	);
 
@@ -269,7 +280,7 @@ function Iframe( {
 		// Avoid resize listeners when not needed, these will trigger
 		// unnecessary re-renders when animating the iframe width, or when
 		// expanding preview iframes.
-		scale === 1 ? null : windowResizeRef,
+		scale === 1 ? null : iframeResizeRef,
 		scale === 1 ? null : scaleRef,
 	] );
 
@@ -311,16 +322,11 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	scale =
-		typeof scale === 'function'
-			? scale( contentWidth, contentHeight )
-			: scale;
-
 	// Make sure to not render the before and after focusable div elements in view
 	// mode. They're only needed to capture focus in edit mode.
 	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
 
-	return (
+	const iframe = (
 		<>
 			{ shouldRenderFocusCaptureElements && before }
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
@@ -394,6 +400,50 @@ function Iframe( {
 			{ shouldRenderFocusCaptureElements && after }
 		</>
 	);
+
+	const windowResizeRef = useRefEffect( ( node ) => {
+		const nodeWindow = node.ownerDocument.defaultView;
+
+		setWindowInnerWidth( nodeWindow.innerWidth );
+		const onResize = () => {
+			setWindowInnerWidth( nodeWindow.innerWidth );
+		};
+		nodeWindow.addEventListener( 'resize', onResize );
+		return () => {
+			nodeWindow.removeEventListener( 'resize', onResize );
+		};
+	}, [] );
+
+	const marginCorrection = -( windowInnerWidth - containerWidth ) / 2;
+
+	return (
+		<div
+			ref={ windowResizeRef }
+			style={ {
+				width: '100%',
+				height: '100%',
+				overflowX: 'hidden',
+			} }
+		>
+			{ containerResizeListener }
+			<div
+				style={
+					scale === 1
+						? {
+								width: '100%',
+								height: '100%',
+						  }
+						: {
+								width: '100vw',
+								height: '100%',
+								marginLeft: `${ marginCorrection }px`,
+						  }
+				}
+			>
+				{ iframe }
+			</div>
+		</div>
+	);
 }
 
 function IframeIfReady( props, ref ) {

packages/edit-site/src/components/block-editor/editor-canvas.js

@@ -25,7 +25,16 @@ import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
-import { computeIFrameScale } from '../../utils/math';
+
+const FRAME_SIZE = 20;
+const ZOOM_OUT_MAX_WIDTH = 800;
+
+function computeZoomOutScale( { containerWidth, windowInnerWidth } ) {
+	return (
+		( Math.min( containerWidth, ZOOM_OUT_MAX_WIDTH ) - 2 * FRAME_SIZE ) /
+		windowInnerWidth
+	);
+}
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
@@ -139,17 +148,6 @@ function EditorCanvas( {
 		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
 	);
 
-	const frameSize = isZoomOutMode ? 20 : undefined;
-
-	const scale = isZoomOutMode
-		? ( contentWidth ) =>
-				computeIFrameScale(
-					{ width: 1000, scale: 0.55 },
-					{ width: 400, scale: 0.9 },
-					contentWidth
-				)
-		: undefined;
-
 	return (
 		<EditorCanvasRoot
 			className={ clsx( 'edit-site-editor-canvas__block-list', {
@@ -158,8 +156,8 @@ function EditorCanvas( {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				scale,
-				frameSize,
+				scale: isZoomOutMode ? computeZoomOutScale : undefined,
+				frameSize: isZoomOutMode ? FRAME_SIZE : undefined,
 				className: clsx( 'edit-site-visual-editor__editor-canvas', {
 					'is-focused': isFocused && canvasMode === 'view',
 				} ),