Blocks: use new useResizeObserver hook

projects/plugins/jetpack/changelog/update-useResizeObserver-hook-usage

@@ -0,0 +1,4 @@
+Significance: minor
+Type: compat
+
+Blocks: Update useResizeObserver hook usage to meet new API expectations.

projects/plugins/jetpack/extensions/blocks/image-compare/edit.js

@@ -1,7 +1,7 @@
 import { InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
 import { Placeholder } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
-import { useLayoutEffect, useRef } from '@wordpress/element';
+import { useLayoutEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { photonizedImgProps } from '../tiled-gallery/utils';
 import ImageCompareControls from './controls';
@@ -17,9 +17,18 @@ const Edit = ( { attributes, clientId, isSelected, setAttributes } ) => {
 
 	const blockProps = useBlockProps();
 	const juxtaposeRef = useRef( undefined );
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
 
 	// Let's look for resize so we can trigger the thing.
-	const [ resizeListener, sizes ] = useResizeObserver();
+	const setElement = useResizeObserver(
+		resizeObserverEntries => {
+			const width = resizeObserverEntries[ 0 ]?.contentRect.width;
+			if ( width ) {
+				setContainerWidth( width );
+			}
+		},
+		{ box: 'border-box' }
+	);
 
 	useDebounce(
 		sz => {
@@ -36,7 +45,7 @@ const Edit = ( { attributes, clientId, isSelected, setAttributes } ) => {
 			}
 		},
 		200,
-		sizes.width
+		containerWidth
 	);
 
 	// Initial state if attributes already set or not.
@@ -47,13 +56,15 @@ const Edit = ( { attributes, clientId, isSelected, setAttributes } ) => {
 	// Watching for changes to key variables to trigger scan.
 	useLayoutEffect( () => {
 		if ( imageBefore.url && imageAfter.url && typeof juxtapose !== 'undefined' ) {
-			juxtapose.makeSlider( juxtaposeRef?.current );
+			if ( juxtaposeRef.current ) {
+				setElement( juxtaposeRef.current );
+				juxtapose.makeSlider( juxtaposeRef?.current );
+			}
 		}
-	}, [ align, imageBefore, imageAfter, orientation ] );
+	}, [ align, imageBefore, imageAfter, orientation, setElement ] );
 
 	return (
 		<figure { ...blockProps } id={ clientId }>
-			{ resizeListener }
 			<InspectorControls key="controls">
 				<ImageCompareControls { ...{ attributes, setAttributes } } />
 			</InspectorControls>

projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js

@@ -44,7 +44,15 @@ export default function PlayerUI( { id, slides, metadata, disabled } ) {
 
 	const slideContainerRef = useRef( undefined );
 	const [ maxSlideWidth, setMaxSlideWidth ] = useState( null );
-	const [ resizeListener, { width, height } ] = useResizeObserver();
+	const setElement = useResizeObserver(
+		resizeObserverEntries => {
+			const width = resizeObserverEntries[ 0 ]?.contentRect.width;
+			if ( width ) {
+				setMaxSlideWidth( width );
+			}
+		},
+		{ box: 'border-box' }
+	);
 	const [ targetAspectRatio, setTargetAspectRatio ] = useState( settings.defaultAspectRatio );
 	const uploading = some( slides, media => isBlobURL( media.url ) );
 	const isVideo = slideIndex => {
@@ -112,29 +120,21 @@ export default function PlayerUI( { id, slides, metadata, disabled } ) {
 
 	// Max slide width is used to display the story in portrait mode on desktop
 	useLayoutEffect( () => {
-		if ( ! slideContainerRef.current ) {
+		const containerHeight = slideContainerRef?.current.offsetHeight;
+		if ( ! slideContainerRef.current || ! settings.defaultAspectRatio || containerHeight <= 0 ) {
 			return;
 		}
-		let ratioBasedWidth = Math.round(
-			settings.defaultAspectRatio * slideContainerRef.current.offsetHeight
-		);
+		setElement( slideContainerRef.current );
+		let ratioBasedWidth = Math.round( settings.defaultAspectRatio * containerHeight );
 		if ( fullscreen ) {
+			const width = slideContainerRef.current.offsetWidth; // Get the current width
 			ratioBasedWidth =
 				Math.abs( 1 - ratioBasedWidth / width ) < settings.cropUpTo ? width : ratioBasedWidth;
 		}
 		setMaxSlideWidth( ratioBasedWidth );
+		setTargetAspectRatio( ratioBasedWidth / containerHeight );
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ width, height, fullscreen ] );
-
-	useLayoutEffect( () => {
-		if (
-			maxSlideWidth &&
-			slideContainerRef.current &&
-			slideContainerRef.current.offsetHeight > 0
-		) {
-			setTargetAspectRatio( maxSlideWidth / slideContainerRef.current.offsetHeight );
-		}
-	}, [ maxSlideWidth ] );
+	}, [ setElement, fullscreen ] );
 
 	let label;
 	if ( fullscreen ) {
@@ -159,7 +159,6 @@ export default function PlayerUI( { id, slides, metadata, disabled } ) {
 	/* eslint-disable jsx-a11y/click-events-have-key-events */
 	return (
 		<div className="wp-story-display-contents">
-			{ resizeListener }
 			<div
 				role={ role }
 				aria-label={ label }