diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 4fc1a65d8e4d4..1cb73cc6f2ed0 100644 --- 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(