From 61aa761906611ded733d2e3c125f625b869ef00a Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 2 Dec 2024 23:32:23 -0600 Subject: [PATCH 1/5] Remove deprecated usage of useResizeObserver --- .../src/components/iframe/index.js | 12 +++-- .../src/components/iframe/use-scale-canvas.js | 50 +++++++++++-------- 2 files changed, 36 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 751e940dd166cc..b00e93f5d569c6 100644 --- 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 } { children } @@ -354,8 +354,10 @@ function Iframe( { ); return ( -
- { containerResizeListener } +
{ + 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; @@ -176,19 +186,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, } ) @@ -354,9 +364,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, } ); } @@ -378,17 +388,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', @@ -438,7 +448,8 @@ export function useScaleCanvas( { transitionFromRef.current.scrollHeight = iframeDocument.documentElement.scrollHeight; // Use containerHeight, as it's the previous container height before the zoom out animation starts. - transitionFromRef.current.containerHeight = containerHeight; + transitionFromRef.current.containerHeight = + containerRectRef.current.height; transitionToRef.current = { scaleValue, @@ -474,9 +485,6 @@ export function useScaleCanvas( { scaleValue, frameSize, iframeDocument, - contentHeight, - containerWidth, - containerHeight, maxContainerWidth, scaleContainerWidth, ] ); @@ -484,7 +492,7 @@ export function useScaleCanvas( { return { isZoomedOut, scaleContainerWidth, - contentResizeListener, - containerResizeListener, + contentRefCallback, + containerRefCallback, }; } From aa571a9c482aaa00158a15c8544a167104f6dd86 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 2 Dec 2024 23:59:33 -0600 Subject: [PATCH 2/5] Use useState so resizes re-render --- .../src/components/iframe/use-scale-canvas.js | 39 +++++++++++-------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js index e16e9377c7cced..64f7e7f81914f0 100644 --- a/packages/block-editor/src/components/iframe/use-scale-canvas.js +++ b/packages/block-editor/src/components/iframe/use-scale-canvas.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useEffect, useRef, useCallback } from '@wordpress/element'; +import { useEffect, useRef, useCallback, useState } from '@wordpress/element'; import { useReducedMotion, useResizeObserver } from '@wordpress/compose'; /** @@ -132,6 +132,8 @@ function getAnimationKeyframes( transitionFrom, transitionTo ) { ]; } +const NULL_SIZE = { width: null, height: null }; + function extractSize( entries ) { const contentBlockSize = entries.at( -1 ).contentBoxSize[ 0 ]; return { @@ -165,13 +167,16 @@ export function useScaleCanvas( { maxContainerWidth = 750, scale, } ) { - const contentRectRef = useRef( { width: null, height: null } ); + const [ { height: contentHeight }, setContentRect ] = useState( NULL_SIZE ); const contentRefCallback = useResizeObserver( ( entries ) => { - contentRectRef.current = extractSize( entries ); + setContentRect( extractSize( entries ) ); } ); - const containerRectRef = useRef( { width: null, height: null } ); + const [ + { width: containerWidth, height: containerHeight }, + setContainerRect, + ] = useState( NULL_SIZE ); const containerRefCallback = useResizeObserver( ( entries ) => { - containerRectRef.current = extractSize( entries ); + setContainerRect( extractSize( entries ) ); } ); const initialContainerWidthRef = useRef( 0 ); @@ -186,19 +191,19 @@ export function useScaleCanvas( { useEffect( () => { if ( ! isZoomedOut ) { - initialContainerWidthRef.current = containerRectRef.current.width; + initialContainerWidthRef.current = containerWidth; } - }, [ isZoomedOut ] ); + }, [ containerWidth, isZoomedOut ] ); const scaleContainerWidth = Math.max( initialContainerWidthRef.current, - containerRectRef.current.width + containerWidth ); const scaleValue = isAutoScaled ? calculateScale( { frameSize, - containerWidth: containerRectRef.current.width, + containerWidth, maxContainerWidth, scaleContainerWidth, } ) @@ -364,9 +369,9 @@ export function useScaleCanvas( { // exiting. transitionFromRef.current.scaleValue = calculateScale( { frameSize: transitionFromRef.current.frameSize, - containerWidth: containerRectRef.current.width, + containerWidth, maxContainerWidth, - scaleContainerWidth: containerRectRef.current.width, + scaleContainerWidth: containerWidth, } ); } @@ -388,17 +393,17 @@ export function useScaleCanvas( { iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-content-height', - `${ contentRectRef.current.height }px` + `${ contentHeight }px` ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-inner-height', - `${ containerRectRef.current.height }px` + `${ containerHeight }px` ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-container-width', - `${ containerRectRef.current.width }px` + `${ containerWidth }px` ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-scale-container-width', @@ -448,8 +453,7 @@ export function useScaleCanvas( { transitionFromRef.current.scrollHeight = iframeDocument.documentElement.scrollHeight; // Use containerHeight, as it's the previous container height before the zoom out animation starts. - transitionFromRef.current.containerHeight = - containerRectRef.current.height; + transitionFromRef.current.containerHeight = containerHeight; transitionToRef.current = { scaleValue, @@ -485,6 +489,9 @@ export function useScaleCanvas( { scaleValue, frameSize, iframeDocument, + contentHeight, + containerWidth, + containerHeight, maxContainerWidth, scaleContainerWidth, ] ); From a9d34829b533a645f181904eb9e9b9e0a9b6d0e3 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 3 Dec 2024 09:54:17 -0600 Subject: [PATCH 3/5] Add types and details in JSDoc comments --- .../src/components/iframe/use-scale-canvas.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js index 64f7e7f81914f0..29a505d1f6df58 100644 --- a/packages/block-editor/src/components/iframe/use-scale-canvas.js +++ b/packages/block-editor/src/components/iframe/use-scale-canvas.js @@ -132,8 +132,20 @@ function getAnimationKeyframes( transitionFrom, transitionTo ) { ]; } +/** + * @typedef {Object} ObservedSize + * @property {number|null} width The width of the observed element. + * @property {number|null} height The height of the observed element. + */ +/** @type {ObservedSize} */ const NULL_SIZE = { width: null, height: null }; +/** + * Get the size of the observed element. + * + * @param {ResizeObserverEntry[]} entries Array of the new dimensions of the element after each change. + * @return {ObservedSize} Latest width and height of the observed element. + */ function extractSize( entries ) { const contentBlockSize = entries.at( -1 ).contentBoxSize[ 0 ]; return { From d00dc069696a3d4b4c9a12f28e730b1fe02a0740 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 3 Dec 2024 13:04:58 -0600 Subject: [PATCH 4/5] Fix variable name typo --- .../block-editor/src/components/iframe/use-scale-canvas.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js index 29a505d1f6df58..0d423affe768a2 100644 --- a/packages/block-editor/src/components/iframe/use-scale-canvas.js +++ b/packages/block-editor/src/components/iframe/use-scale-canvas.js @@ -147,10 +147,10 @@ const NULL_SIZE = { width: null, height: null }; * @return {ObservedSize} Latest width and height of the observed element. */ function extractSize( entries ) { - const contentBlockSize = entries.at( -1 ).contentBoxSize[ 0 ]; + const contentBoxSize = entries.at( -1 ).contentBoxSize[ 0 ]; return { - width: contentBlockSize.inlineSize, - height: contentBlockSize.blockSize, + width: contentBoxSize.inlineSize, + height: contentBoxSize.blockSize, }; } From ef60a79cd7dc1dcbb09e652ebc6837e7f0444474 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 3 Dec 2024 13:14:12 -0600 Subject: [PATCH 5/5] Rename ref callback suffixes --- .../block-editor/src/components/iframe/index.js | 11 ++++------- .../src/components/iframe/use-scale-canvas.js | 16 ++++++++-------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index b00e93f5d569c6..b1d258ffc9ec87 100644 --- 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 { - contentRefCallback, - containerRefCallback, + contentRef: scaleContentRef, + containerRef, isZoomedOut, scaleContainerWidth, } = useScaleCanvas( { @@ -234,7 +234,7 @@ function Iframe( { clearerRef, writingFlowRef, disabledRef, - contentRefCallback, + scaleContentRef, ] ); // Correct doctype is required to enable rendering in standards @@ -354,10 +354,7 @@ function Iframe( { ); return ( -
+
} contentRef A callback ref to the content element. + * @property {import('react').Ref} containerRef A callback ref to the container element. */ /** @@ -180,14 +180,14 @@ export function useScaleCanvas( { scale, } ) { const [ { height: contentHeight }, setContentRect ] = useState( NULL_SIZE ); - const contentRefCallback = useResizeObserver( ( entries ) => { + const contentRef = useResizeObserver( ( entries ) => { setContentRect( extractSize( entries ) ); } ); const [ { width: containerWidth, height: containerHeight }, setContainerRect, ] = useState( NULL_SIZE ); - const containerRefCallback = useResizeObserver( ( entries ) => { + const containerRef = useResizeObserver( ( entries ) => { setContainerRect( extractSize( entries ) ); } ); @@ -511,7 +511,7 @@ export function useScaleCanvas( { return { isZoomedOut, scaleContainerWidth, - contentRefCallback, - containerRefCallback, + contentRef, + containerRef, }; }