From c77bd16e57fe54a8de6fbf1544fd1d3652d4e16e Mon Sep 17 00:00:00 2001 From: Karen Attfield Date: Thu, 1 May 2025 18:52:12 +0100 Subject: [PATCH 1/3] Convert useResizeObserver usage in Image Compare block to new usage expectations --- .../extensions/blocks/image-compare/edit.js | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js b/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js index 82b90463813a2..ea6ebf3466a06 100644 --- a/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js +++ b/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 (
- { resizeListener } From 55fb9a3a2d3b6023d18d89016adeb8a039a4e954 Mon Sep 17 00:00:00 2001 From: Karen Attfield Date: Thu, 1 May 2025 18:52:57 +0100 Subject: [PATCH 2/3] Convert useResizeObserver usage in Story block to new usage expectations --- .../blocks/story/player/player-ui.js | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js b/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js index 8dafec1da799d..e9d171167528e 100644 --- a/projects/plugins/jetpack/extensions/blocks/story/player/player-ui.js +++ b/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 (
- { resizeListener }
Date: Thu, 1 May 2025 18:59:41 +0100 Subject: [PATCH 3/3] changelog --- .../jetpack/changelog/update-useResizeObserver-hook-usage | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/update-useResizeObserver-hook-usage diff --git a/projects/plugins/jetpack/changelog/update-useResizeObserver-hook-usage b/projects/plugins/jetpack/changelog/update-useResizeObserver-hook-usage new file mode 100644 index 0000000000000..d69812ef137d1 --- /dev/null +++ b/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.