Redo keep scale constant after zoomed out

WordPress · Aug 5, 2024 · 762182c · 762182c
1 parent b1acf84
commit 762182c
Showing 1 changed file with 23 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -215,6 +215,22 @@ function Iframe( {
 
 	const isZoomedOut = scale !== 1;
 	const priorContainerWidth = useRef();
+	const isScaleFinal = useRef( false );
+	useEffect( () => {
+		if ( isZoomedOut ) {
+			return () => {
+				isScaleFinal.current = false;
+				const { documentElement, defaultView } = iframeDocument;
+				documentElement.classList.remove( 'is-zoomed-out' );
+				defaultView.frameElement.style.removeProperty(
+					'--wp-block-editor-iframe-zoom-out-scale'
+				);
+				defaultView.frameElement.style.removeProperty(
+					'--wp-block-editor-iframe-zoom-out-inset'
+				);
+			};
+		}
+	}, [ isZoomedOut ] );
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
@@ -257,7 +273,7 @@ function Iframe( {
 	useEffect( () => cleanup, [ cleanup ] );
 
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if ( ! iframeDocument || ! isZoomedOut || isScaleFinal.current ) {
 			return;
 		}
 		const frameInlineWidth = frameSize * 2;
@@ -276,16 +292,6 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-inset',
 			`${ frameSize }px`
 		);
-
-		return () => {
-			documentElement.classList.remove( 'is-zoomed-out' );
-			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 } =
@@ -346,6 +352,12 @@ function Iframe( {
 						);
 					}
 				} }
+				onTransitionEnd={ ( event ) => {
+					if ( event.propertyName === 'transform' && isZoomedOut ) {
+						isScaleFinal.current = true;
+					}
+					props.onTransitionEnd?.( event );
+				} }
 			>
 				{ iframeDocument &&
 					createPortal(