Zoom Out: Use the zoom-level value to scale the iframe (#66280)

youknowriad · ellatrix · draganescu · web-flow · commit a02ce46b34fd · 2024-10-23T09:35:46.000+01:00
Co-authored-by: youknowriad &lt;youknowriad@git.wordpress.org&gt;
Co-authored-by: ellatrix &lt;ellatrix@git.wordpress.org&gt;
Co-authored-by: draganescu &lt;andraganescu@git.wordpress.org&gt;
Co-authored-by: getdave &lt;get_dave@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
@@ -40,14 +40,14 @@ export function ExperimentalBlockCanvas( {
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();
 	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
-	const isZoomedOut = useSelect(
-		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
+	const zoomLevel = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),
 		[]
 	);
 	const zoomOutIframeProps =
-		isZoomedOut && ! isTabletViewport
+		zoomLevel !== 100 && ! isTabletViewport
 			? {
-					scale: 'default',
+					scale: zoomLevel,
 					frameSize: '40px',
 			  }
 			: {};
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -354,7 +354,7 @@ function Iframe( {
 		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'default'
+			scale === 'auto-scaled'
 				? ( Math.min( containerWidth, maxWidth ) -
 						parseInt( frameSize ) * 2 ) /
 						scaleContainerWidth
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -28,7 +28,7 @@ export function useZoomOut( zoomOut = true ) {
 
 		return () => {
 			if ( isZoomOutOnMount && isWideViewport ) {
-				setZoomLevel( 50 );
+				setZoomLevel( 'auto-scaled' );
 			} else {
 				resetZoomLevel();
 			}
@@ -37,7 +37,7 @@ export function useZoomOut( zoomOut = true ) {
 
 	useEffect( () => {
 		if ( zoomOut && isWideViewport ) {
-			setZoomLevel( 50 );
+			setZoomLevel( 'auto-scaled' );
 		} else {
 			resetZoomLevel();
 		}
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -592,7 +592,17 @@ export function getSectionRootClientId( state ) {
  * @return {boolean} Whether the editor is zoomed.
  */
 export function isZoomOut( state ) {
-	return state.zoomLevel < 100;
+	return state.zoomLevel === 'auto-scaled' || state.zoomLevel < 100;
+}
+
+/**
+ * Returns whether the zoom level.
+ *
+ * @param {Object} state Global application state.
+ * @return {number|"auto-scaled"} Zoom level.
+ */
+export function getZoomLevel( state ) {
+	return state.zoomLevel;
 }
 
 /**
diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -31,7 +31,7 @@ const ZoomOutToggle = ( { disabled } ) => {
 		if ( isZoomOut ) {
 			resetZoomLevel();
 		} else {
-			setZoomLevel( 50 );
+			setZoomLevel( 'auto-scaled' );
 		}
 	};
 
diff --git a/storybook/stories/playground/index.story.js b/storybook/stories/playground/index.story.js
@@ -37,10 +37,13 @@ UndoRedo.parameters = {
 	sourceLink: 'storybook/stories/playground/with-undo-redo/index.js',
 };
 
-export const ZoomOut = () => {
-	return <EditorZoomOut />;
+export const ZoomOut = ( props ) => {
+	return <EditorZoomOut { ...props } />;
 };
 
 ZoomOut.parameters = {
 	sourceLink: 'storybook/stories/playground/zoom-out/index.js',
 };
+ZoomOut.argTypes = {
+	zoomLevel: { control: { type: 'range', min: 10, max: 100, step: 5 } },
+};
diff --git a/storybook/stories/playground/zoom-out/index.js b/storybook/stories/playground/zoom-out/index.js
@@ -27,17 +27,17 @@ const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
 	'@wordpress/edit-site'
 );
 
-function EnableZoomOut() {
+function EnableZoomOut( { zoomLevel } ) {
 	const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	useEffect( () => {
-		setZoomLevel( 50 );
-	}, [ setZoomLevel ] );
+		setZoomLevel( zoomLevel ? zoomLevel / 100 : 'auto-scaled' );
+	}, [ setZoomLevel, zoomLevel ] );
 
 	return null;
 }
 
-export default function EditorZoomOut() {
+export default function EditorZoomOut( { zoomLevel } ) {
 	const [ blocks, updateBlocks ] = useState( [] );
 
 	useEffect( () => {
@@ -57,7 +57,7 @@ export default function EditorZoomOut() {
 				onInput={ updateBlocks }
 				onChange={ updateBlocks }
 			>
-				<EnableZoomOut />
+				<EnableZoomOut zoomLevel={ zoomLevel } />
 				<BlockCanvas height="500px" styles={ editorStyles }>
 					<style>{ contentCss }</style>
 					<BlockList />

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ const ZoomOutToggle = ( { disabled } ) => {`
`31`	`31`	`if ( isZoomOut ) {`
`32`	`32`	`resetZoomLevel();`
`33`	`33`	`} else {`
`34`		`- setZoomLevel( 50 );`
	`34`	`+ setZoomLevel( 'auto-scaled' );`
`35`	`35`	`}`
`36`	`36`	`};`
`37`	`37`