Scale the zoom out mode to fit available space

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

@@ -30,7 +30,7 @@ import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { store as blockEditorStore } from '../../store';
-
+import calculateScale from '../../utils/calculate-scale';
 function bubbleEvent( event, Constructor, frame ) {
 	const init = {};
 
@@ -104,26 +104,52 @@ function Iframe( {
 	contentRef,
 	children,
 	tabIndex = 0,
-	scale = 1,
-	frameSize = 0,
+	shouldZoom = false,
 	readonly,
 	forwardedRef: ref,
 	...props
 } ) {
-	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return {
-			resolvedAssets: settings.__unstableResolvedAssets,
-			isPreviewMode: settings.__unstableIsPreviewMode,
-		};
-	}, [] );
+	const { resolvedAssets, isPreviewMode, isZoomOutMode } = useSelect(
+		( select ) => {
+			const { getSettings, __unstableGetEditorMode } =
+				select( blockEditorStore );
+			const settings = getSettings();
+			return {
+				resolvedAssets: settings.__unstableResolvedAssets,
+				isPreviewMode: settings.__unstableIsPreviewMode,
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			};
+		},
+		[]
+	);
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
+	const [
+		contentResizeListener,
+		{ height: contentHeight, width: contentWidth },
+	] = useResizeObserver();
+
+	// When zoom-out mode is enabled, the iframe is scaled down to fit the
+	// content within the viewport.
+	// At 1000px wide, the iframe is scaled to 45%.
+	// At 400px wide, the iframe is scaled to 90%.
+	const scale =
+		isZoomOutMode && shouldZoom
+			? calculateScale(
+					{
+						maxWidth: 1000,
+						minWidth: 400,
+						maxScale: 0.45,
+						minScale: 0.9,
+					},
+					contentWidth
+			  )
+			: 1;
+	const frameSize = isZoomOutMode ? 100 : 0;
+
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
 			setIframeDocument( node.contentDocument );

packages/block-editor/src/utils/calculate-scale.js

@@ -0,0 +1,20 @@
+const clamp = ( lowerlimit, width, upperlimit ) => {
+	if ( width < lowerlimit ) return lowerlimit;
+	if ( width > upperlimit ) return upperlimit;
+	return width;
+};
+
+export default function calculateScale( scaleConfig, width ) {
+	const scaleSlope =
+		( scaleConfig.maxScale - scaleConfig.minScale ) /
+		( scaleConfig.maxWidth - scaleConfig.minWidth );
+
+	const scaleIntercept =
+		scaleConfig.minScale - scaleSlope * scaleConfig.minWidth;
+
+	return clamp(
+		scaleConfig.maxScale,
+		scaleSlope * width + scaleIntercept,
+		scaleConfig.minScale
+	);
+}

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

@@ -26,10 +26,9 @@ import {
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
 function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
-		useSelect( ( select ) => {
-			const { getBlockCount, __unstableGetEditorMode } =
-				select( blockEditorStore );
+	const { hasBlocks, isFocusMode, templateType, canvasMode } = useSelect(
+		( select ) => {
+			const { getBlockCount } = select( blockEditorStore );
 			const { getEditedPostType, getCanvasMode } = unlock(
 				select( editSiteStore )
 			);
@@ -38,11 +37,12 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			return {
 				templateType: _templateType,
 				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				canvasMode: getCanvasMode(),
 				hasBlocks: !! getBlockCount(),
 			};
-		}, [] );
+		},
+		[]
+	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -107,8 +107,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				scale: isZoomOutMode ? 0.45 : undefined,
-				frameSize: isZoomOutMode ? 100 : undefined,
+				shouldZoom: true,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{