Remove deprecated usage of useResizeObserver

WordPress · Dec 3, 2024 · 9eadab8 · 9eadab8
1 parent 7631986
commit 9eadab8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -217,8 +217,8 @@ function Iframe( {
 	}, [] );
 
 	const {
-		contentResizeListener,
-		containerResizeListener,
+		contentRefCallback,
+		containerRefCallback,
 		isZoomedOut,
 		scaleContainerWidth,
 	} = useScaleCanvas( {
@@ -234,6 +234,7 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
+		contentRefCallback,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -341,7 +342,6 @@ function Iframe( {
 								...bodyClasses
 							) }
 						>
-							{ contentResizeListener }
 							<StyleProvider document={ iframeDocument }>
 								{ children }
 							</StyleProvider>
@@ -354,8 +354,10 @@ function Iframe( {
 	);
 
 	return (
-		<div className="block-editor-iframe__container">
-			{ containerResizeListener }
+		<div
+			className="block-editor-iframe__container"
+			ref={ containerRefCallback }
+		>
 			<div
 				className={ clsx(
 					'block-editor-iframe__scale-container',

diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js
@@ -120,6 +120,14 @@ function getAnimationKeyframes( transitionFrom, transitionTo ) {
 	];
 }
 
+function extractSize( entries ) {
+	const contentBlockSize = entries.at( -1 ).contentBoxSize[ 0 ];
+	return {
+		width: contentBlockSize.inlineSize,
+		height: contentBlockSize.blockSize,
+	};
+}
+
 /**
  * @typedef {Object} ScaleCanvasResult
  * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.
@@ -145,12 +153,14 @@ export function useScaleCanvas( {
 	maxContainerWidth = 750,
 	scale,
 } ) {
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
-	const [
-		containerResizeListener,
-		{ width: containerWidth, height: containerHeight },
-	] = useResizeObserver();
+	const contentRectRef = useRef( { width: null, height: null } );
+	const contentRefCallback = useResizeObserver( ( entries ) => {
+		contentRectRef.current = extractSize( entries );
+	} );
+	const containerRectRef = useRef( { width: null, height: null } );
+	const containerRefCallback = useResizeObserver( ( entries ) => {
+		containerRectRef.current = extractSize( entries );
+	} );
 
 	const initialContainerWidthRef = useRef( 0 );
 	const isZoomedOut = scale !== 1;
@@ -164,19 +174,19 @@ export function useScaleCanvas( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			initialContainerWidthRef.current = containerWidth;
+			initialContainerWidthRef.current = containerRectRef.current.width;
 		}
-	}, [ containerWidth, isZoomedOut ] );
+	}, [ isZoomedOut ] );
 
 	const scaleContainerWidth = Math.max(
 		initialContainerWidthRef.current,
-		containerWidth
+		containerRectRef.current.width
 	);
 
 	const scaleValue = isAutoScaled
 		? calculateScale( {
 				frameSize,
-				containerWidth,
+				containerWidth: containerRectRef.current.width,
 				maxContainerWidth,
 				scaleContainerWidth,
 		  } )
@@ -330,9 +340,9 @@ export function useScaleCanvas( {
 			// exiting.
 			transitionFromRef.current.scaleValue = calculateScale( {
 				frameSize: transitionFromRef.current.frameSize,
-				containerWidth,
+				containerWidth: containerRectRef.current.width,
 				maxContainerWidth,
-				scaleContainerWidth: containerWidth,
+				scaleContainerWidth: containerRectRef.current.width,
 			} );
 		}
 
@@ -354,17 +364,17 @@ export function useScaleCanvas( {
 
 			iframeDocument.documentElement.style.setProperty(
 				'--wp-block-editor-iframe-zoom-out-content-height',
-				`${ contentHeight }px`
+				`${ contentRectRef.current.height }px`
 			);
 
 			iframeDocument.documentElement.style.setProperty(
 				'--wp-block-editor-iframe-zoom-out-inner-height',
-				`${ containerHeight }px`
+				`${ containerRectRef.current.height }px`
 			);
 
 			iframeDocument.documentElement.style.setProperty(
 				'--wp-block-editor-iframe-zoom-out-container-width',
-				`${ containerWidth }px`
+				`${ containerRectRef.current.width }px`
 			);
 			iframeDocument.documentElement.style.setProperty(
 				'--wp-block-editor-iframe-zoom-out-scale-container-width',
@@ -411,7 +421,7 @@ export function useScaleCanvas( {
 				// the most accurate.
 				transitionFromRef.current.containerHeight =
 					transitionFromRef.current.containerHeight ??
-					containerHeight; // Use containerHeight, as it's the previous container height value if none was set.
+					containerRectRef.current.height; // Use containerHeight, as it's the previous container height value if none was set.
 				transitionFromRef.current.scrollTop =
 					iframeDocument.documentElement.scrollTop;
 				transitionFromRef.current.scrollHeight =
@@ -446,17 +456,14 @@ export function useScaleCanvas( {
 		scaleValue,
 		frameSize,
 		iframeDocument,
-		contentHeight,
-		containerWidth,
-		containerHeight,
 		maxContainerWidth,
 		scaleContainerWidth,
 	] );
 
 	return {
 		isZoomedOut,
 		scaleContainerWidth,
-		contentResizeListener,
-		containerResizeListener,
+		contentRefCallback,
+		containerRefCallback,
 	};
 }