Remove iframe resize refs

WordPress · Nov 12, 2024 · 035b913 · 035b913
1 parent bbbf3b5
commit 035b913
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 42 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -235,36 +235,6 @@ function Iframe( {
 		};
 	}, [] );
 
-	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
-
-	const iframeResizeRef = useRefEffect( ( node ) => {
-		const nodeWindow = node.ownerDocument.defaultView;
-
-		setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		const onResize = () => {
-			setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		};
-		nodeWindow.addEventListener( 'resize', onResize );
-		return () => {
-			nodeWindow.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
-	const [ windowInnerWidth, setWindowInnerWidth ] = useState();
-
-	const windowResizeRef = useRefEffect( ( node ) => {
-		const nodeWindow = node.ownerDocument.defaultView;
-
-		setWindowInnerWidth( nodeWindow.innerWidth );
-		const onResize = () => {
-			setWindowInnerWidth( nodeWindow.innerWidth );
-		};
-		nodeWindow.addEventListener( 'resize', onResize );
-		return () => {
-			nodeWindow.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
 	const isZoomedOut = scale !== 1;
 
 	useEffect( () => {
@@ -284,9 +254,7 @@ function Iframe( {
 				: scale,
 		contentHeight,
 		containerWidth,
-		windowInnerWidth,
 		iframeDocument,
-		iframeWindowInnerHeight,
 		isZoomedOut,
 		scaleContainerWidth,
 	} );
@@ -298,10 +266,6 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		// Avoid resize listeners when not needed, these will trigger
-		// unnecessary re-renders when animating the iframe width, or when
-		// expanding preview iframes.
-		isZoomedOut ? iframeResizeRef : null,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -422,7 +386,7 @@ function Iframe( {
 	);
 
 	return (
-		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
+		<div className="block-editor-iframe__container">
 			{ containerResizeListener }
 			<div
 				className={ clsx(

diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js
@@ -7,17 +7,24 @@ import { useReducedMotion } from '@wordpress/compose';
 /**
  * Handles scaling the canvas for the zoom out mode and animating between
  * the states.
+ *
+ * @param {Object}   root0
+ * @param {number}   root0.contentHeight The height of the content in the iframe.
+ * @param {number}   root0.containerWidth The width of the container.
+ * @param {number}   root0.frameSize The size of the frame around the content.
+ * @param {Document} root0.iframeDocument The document of the iframe.
+ * @param {boolean}  root0.isZoomedOut Whether the canvas is in zoom out mode.
+ * @param {number}   root0.scale The scale of the canvas.
+ * @param {number}   root0.scaleContainerWidth The width of the container at the scaled size.
  */
 export function useScaleCanvas( {
 	contentHeight,
 	containerWidth,
 	frameSize,
 	iframeDocument,
-	iframeWindowInnerHeight,
 	isZoomedOut,
 	scale,
 	scaleContainerWidth,
-	windowInnerWidth,
 } ) {
 	const prefersReducedMotion = useReducedMotion();
 
@@ -236,12 +243,14 @@ export function useScaleCanvas( {
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-inner-height',
-			`${ iframeWindowInnerHeight }px`
+			`${ iframeDocument.documentElement.clientHeight }px`
 		);
+
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-container-width',
 			`${ containerWidth }px`
 		);
+
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale-container-width',
 			`${ scaleContainerWidth }px`
@@ -270,10 +279,8 @@ export function useScaleCanvas( {
 		scale,
 		frameSize,
 		iframeDocument,
-		iframeWindowInnerHeight,
 		contentHeight,
 		containerWidth,
-		windowInnerWidth,
 		scaleContainerWidth,
 	] );
 }