Block Editor: Animate useScaleCanvas() only when toggling zoomed out …

…mode (#67481) Co-authored-by: tyxla <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · Dec 2, 2024 · d8a457b · d8a457b · github-actions · Dec 2, 2024
1 parent 1d06b35
commit d8a457b
Showing 1 changed file with 8 additions and 3 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
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useEffect, useRef, useCallback } from '@wordpress/element';
-import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
+import {
+	usePrevious,
+	useReducedMotion,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * @typedef {Object} TransitionState
@@ -280,14 +284,15 @@ export function useScaleCanvas( {
 		transitionFromRef.current = transitionToRef.current;
 	}, [ iframeDocument ] );
 
+	const previousIsZoomedOut = usePrevious( isZoomedOut );
 	/**
 	 * Runs when zoom out mode is toggled, and sets the startAnimation flag
 	 * so the animation will start when the next useEffect runs. We _only_
 	 * want to animate when the zoom out mode is toggled, not when the scale
 	 * changes due to the container resizing.
 	 */
 	useEffect( () => {
-		if ( ! iframeDocument ) {
+		if ( ! iframeDocument || previousIsZoomedOut === isZoomedOut ) {
 			return;
 		}
 
@@ -300,7 +305,7 @@ export function useScaleCanvas( {
 		return () => {
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 		};
-	}, [ iframeDocument, isZoomedOut ] );
+	}, [ iframeDocument, isZoomedOut, previousIsZoomedOut ] );
 
 	/**
 	 * This handles: