From 11991fe56d47e331ca15b4a04ee6af18b8797721 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Mon, 2 Dec 2024 19:15:40 +0100
Subject: [PATCH] Zoom out: fix for inserter (#67495)

Makes previousIsZoomedOut a proper ref, and assumes a starting zoom level of 1.
---
 .../src/components/iframe/use-scale-canvas.js | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js
index 2d8cb217a3255c..732fe583d46ac8 100644
--- a/packages/block-editor/src/components/iframe/use-scale-canvas.js
+++ b/packages/block-editor/src/components/iframe/use-scale-canvas.js
@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useRef, useCallback } from '@wordpress/element';
-import {
-	usePrevious,
-	useReducedMotion,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
 
 /**
  * @typedef {Object} TransitionState
@@ -284,7 +280,8 @@ export function useScaleCanvas( {
 		transitionFromRef.current = transitionToRef.current;
 	}, [ iframeDocument ] );
 
-	const previousIsZoomedOut = usePrevious( isZoomedOut );
+	const previousIsZoomedOut = useRef( false );
+
 	/**
 	 * Runs when zoom out mode is toggled, and sets the startAnimation flag
 	 * so the animation will start when the next useEffect runs. We _only_
@@ -292,20 +289,26 @@ export function useScaleCanvas( {
 	 * changes due to the container resizing.
 	 */
 	useEffect( () => {
-		if ( ! iframeDocument || previousIsZoomedOut === isZoomedOut ) {
-			return;
-		}
+		const trigger =
+			iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
 
-		if ( isZoomedOut ) {
-			iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+		previousIsZoomedOut.current = isZoomedOut;
+
+		if ( ! trigger ) {
+			return;
 		}
 
 		startAnimationRef.current = true;
 
+		if ( ! isZoomedOut ) {
+			return;
+		}
+
+		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 		return () => {
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 		};
-	}, [ iframeDocument, isZoomedOut, previousIsZoomedOut ] );
+	}, [ iframeDocument, isZoomedOut ] );
 
 	/**
 	 * This handles: