Stop keeping scale constant after zoomed out

WordPress · Oct 8, 2024 · 79ba58a · 79ba58a
1 parent 2f826fd
commit 79ba58a
Showing 1 changed file with 20 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -215,32 +215,12 @@ function Iframe( {
 
 	const isZoomedOut = scale !== 1;
 	const priorContainerWidth = useRef();
-	const isScaleFinal = useRef( false );
-	useEffect(
-		() => {
-			if ( isZoomedOut ) {
-				priorContainerWidth.current = containerWidth;
-				return () => {
-					isScaleFinal.current = false;
-					if ( iframeDocument && iframeDocument.defaultView ) {
-						const { documentElement, defaultView } = iframeDocument;
-						documentElement.classList.remove( 'is-zoomed-out' );
-						documentElement.style.removeProperty(
-							'--wp-block-editor-iframe-zoom-out-scale'
-						);
-						defaultView.frameElement.style.removeProperty(
-							'--wp-block-editor-iframe-zoom-out-scale'
-						);
-						defaultView.frameElement.style.removeProperty(
-							'--wp-block-editor-iframe-zoom-out-inset'
-						);
-					}
-				};
-			}
-		},
-		// containerWidth omitted so that its value is read once when zoom out engages.
-		[ isZoomedOut, iframeDocument ]
-	);
+
+	useEffect( () => {
+		if ( ! isZoomedOut ) {
+			priorContainerWidth.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -277,7 +257,7 @@ function Iframe( {
 	useEffect( () => cleanup, [ cleanup ] );
 
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut || isScaleFinal.current ) {
+		if ( ! iframeDocument || ! isZoomedOut ) {
 			return;
 		}
 		const frameInlineWidth = frameSize * 2;
@@ -300,6 +280,19 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-inset',
 			`${ frameSize }px`
 		);
+
+		return () => {
+			documentElement.classList.remove( 'is-zoomed-out' );
+			documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
+			);
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
+			);
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-inset'
+			);
+		};
 	}, [ containerWidth, frameSize, iframeDocument, isZoomedOut ] );
 
 	const { marginLeft, marginRight, ...styleWithoutInlineMargins } =
@@ -360,12 +353,6 @@ function Iframe( {
 						);
 					}
 				} }
-				onTransitionEnd={ ( event ) => {
-					if ( event.propertyName === 'transform' && isZoomedOut ) {
-						isScaleFinal.current = true;
-					}
-					props.onTransitionEnd?.( event );
-				} }
 			>
 				{ iframeDocument &&
 					createPortal(