Skip to content

Commit 416f2ad

Browse files
ellatrixim3dabasia
authored andcommitted
Zoom out: fix for inserter (WordPress#67495)
Makes previousIsZoomedOut a proper ref, and assumes a starting zoom level of 1.
1 parent ad594e1 commit 416f2ad

File tree

1 file changed

+15
-12
lines changed

1 file changed

+15
-12
lines changed

packages/block-editor/src/components/iframe/use-scale-canvas.js

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@
22
* WordPress dependencies
33
*/
44
import { useEffect, useRef, useCallback } from '@wordpress/element';
5-
import {
6-
usePrevious,
7-
useReducedMotion,
8-
useResizeObserver,
9-
} from '@wordpress/compose';
5+
import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
106

117
/**
128
* @typedef {Object} TransitionState
@@ -284,28 +280,35 @@ export function useScaleCanvas( {
284280
transitionFromRef.current = transitionToRef.current;
285281
}, [ iframeDocument ] );
286282

287-
const previousIsZoomedOut = usePrevious( isZoomedOut );
283+
const previousIsZoomedOut = useRef( false );
284+
288285
/**
289286
* Runs when zoom out mode is toggled, and sets the startAnimation flag
290287
* so the animation will start when the next useEffect runs. We _only_
291288
* want to animate when the zoom out mode is toggled, not when the scale
292289
* changes due to the container resizing.
293290
*/
294291
useEffect( () => {
295-
if ( ! iframeDocument || previousIsZoomedOut === isZoomedOut ) {
296-
return;
297-
}
292+
const trigger =
293+
iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
298294

299-
if ( isZoomedOut ) {
300-
iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
295+
previousIsZoomedOut.current = isZoomedOut;
296+
297+
if ( ! trigger ) {
298+
return;
301299
}
302300

303301
startAnimationRef.current = true;
304302

303+
if ( ! isZoomedOut ) {
304+
return;
305+
}
306+
307+
iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
305308
return () => {
306309
iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
307310
};
308-
}, [ iframeDocument, isZoomedOut, previousIsZoomedOut ] );
311+
}, [ iframeDocument, isZoomedOut ] );
309312

310313
/**
311314
* This handles:

0 commit comments

Comments
 (0)