@wordpress/block-editor 14.7.1-next.082ed6819.0 → 14.8.0

package/src/components/iframe/index.js

@@ -12,16 +12,9 @@ import {
 	forwardRef,
 	useMemo,
 	useEffect,
-	useRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	useResizeObserver,
-	useMergeRefs,
-	useRefEffect,
-	useDisabled,
-	useReducedMotion,
-} from '@wordpress/compose';
+import { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
@@ -31,6 +24,7 @@ import { useSelect } from '@wordpress/data';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
+import { useScaleCanvas } from './use-scale-canvas';
 import { store as blockEditorStore } from '../../store';
 
 function bubbleEvent( event, Constructor, frame ) {
@@ -124,15 +118,9 @@ function Iframe( {
 	const { styles = '', scripts = '' } = resolvedAssets;
 	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const initialContainerWidthRef = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
-	const prefersReducedMotion = useReducedMotion();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -228,61 +216,16 @@ 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( () => {
-		if ( ! isZoomedOut ) {
-			initialContainerWidthRef.current = containerWidth;
-		}
-	}, [ containerWidth, isZoomedOut ] );
-
-	const scaleContainerWidth = Math.max(
-		initialContainerWidthRef.current,
-		containerWidth
-	);
-
-	const frameSizeValue = parseInt( frameSize );
-
-	const maxWidth = 750;
-	const scaleValue =
-		scale === 'auto-scaled'
-			? ( Math.min( containerWidth, maxWidth ) - frameSizeValue * 2 ) /
-			  scaleContainerWidth
-			: scale;
-
-	const prevScaleRef = useRef( scaleValue );
-	const prevFrameSizeRef = useRef( frameSizeValue );
-	const prevClientHeightRef = useRef( /* Initialized in the useEffect. */ );
+	const {
+		contentResizeListener,
+		containerResizeListener,
+		isZoomedOut,
+		scaleContainerWidth,
+	} = useScaleCanvas( {
+		scale,
+		frameSize: parseInt( frameSize ),
+		iframeDocument,
+	} );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -291,10 +234,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
@@ -336,245 +275,6 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	useEffect( () => {
-		if (
-			! iframeDocument ||
-			// HACK: Checking if isZoomedOut differs from prevIsZoomedOut here
-			// instead of the dependency array to appease the linter.
-			( scaleValue === 1 ) === ( prevScaleRef.current === 1 )
-		) {
-			return;
-		}
-
-		// Unscaled height of the current iframe container.
-		const clientHeight = iframeDocument.documentElement.clientHeight;
-
-		// Scaled height of the current iframe content.
-		const scrollHeight = iframeDocument.documentElement.scrollHeight;
-
-		// Previous scale value.
-		const prevScale = prevScaleRef.current;
-
-		// Unscaled size of the previous padding around the iframe content.
-		const prevFrameSize = prevFrameSizeRef.current;
-
-		// Unscaled height of the previous iframe container.
-		const prevClientHeight = prevClientHeightRef.current ?? clientHeight;
-
-		// We can't trust the set value from contentHeight, as it was measured
-		// before the zoom out mode was changed. After zoom out mode is changed,
-		// appenders may appear or disappear, so we need to get the height from
-		// the iframe at this point when we're about to animate the zoom out.
-		// The iframe scrollTop, scrollHeight, and clientHeight will all be
-		// accurate. The client height also does change when the zoom out mode
-		// is toggled, as the bottom bar about selecting the template is
-		// added/removed when toggling zoom out mode.
-		const scrollTop = iframeDocument.documentElement.scrollTop;
-
-		// Step 0: Start with the current scrollTop.
-		let scrollTopNext = scrollTop;
-
-		// Step 1: Undo the effects of the previous scale and frame around the
-		// midpoint of the visible area.
-		scrollTopNext =
-			( scrollTopNext + prevClientHeight / 2 - prevFrameSize ) /
-				prevScale -
-			prevClientHeight / 2;
-
-		// Step 2: Apply the new scale and frame around the midpoint of the
-		// visible area.
-		scrollTopNext =
-			( scrollTopNext + clientHeight / 2 ) * scaleValue +
-			frameSizeValue -
-			clientHeight / 2;
-
-		// Step 3: Handle an edge case so that you scroll to the top of the
-		// iframe if the top of the iframe content is visible in the container.
-		// The same edge case for the bottom is skipped because changing content
-		// makes calculating it impossible.
-		scrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;
-
-		// This is the scrollTop value if you are scrolled to the bottom of the
-		// iframe. We can't just let the browser handle it because we need to
-		// animate the scaling.
-		const maxScrollTop =
-			scrollHeight * ( scaleValue / prevScale ) +
-			frameSizeValue * 2 -
-			clientHeight;
-
-		// Step 4: Clamp the scrollTopNext between the minimum and maximum
-		// possible scrollTop positions. Round the value to avoid subpixel
-		// truncation by the browser which sometimes causes a 1px error.
-		scrollTopNext = Math.round(
-			Math.min(
-				Math.max( 0, scrollTopNext ),
-				Math.max( 0, maxScrollTop )
-			)
-		);
-
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-scroll-top',
-			`${ scrollTop }px`
-		);
-
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-scroll-top-next',
-			`${ scrollTopNext }px`
-		);
-
-		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
-
-		function onZoomOutTransitionEnd() {
-			// Remove the position fixed for the animation.
-			iframeDocument.documentElement.classList.remove(
-				'zoom-out-animation'
-			);
-
-			// Update previous values.
-			prevClientHeightRef.current = clientHeight;
-			prevFrameSizeRef.current = frameSizeValue;
-			prevScaleRef.current = scaleValue;
-
-			// Set the final scroll position that was just animated to.
-			// Disable reason: Eslint isn't smart enough to know that this is a
-			// DOM element. https://github.com/facebook/react/issues/31483
-			// eslint-disable-next-line react-compiler/react-compiler
-			iframeDocument.documentElement.scrollTop = scrollTopNext;
-		}
-
-		let raf;
-		if ( prefersReducedMotion ) {
-			// Hack: Wait for the window values to recalculate.
-			raf = iframeDocument.defaultView.requestAnimationFrame(
-				onZoomOutTransitionEnd
-			);
-		} else {
-			iframeDocument.documentElement.addEventListener(
-				'transitionend',
-				onZoomOutTransitionEnd,
-				{ once: true }
-			);
-		}
-
-		return () => {
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scroll-top'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scroll-top-next'
-			);
-			iframeDocument.documentElement.classList.remove(
-				'zoom-out-animation'
-			);
-			if ( prefersReducedMotion ) {
-				iframeDocument.defaultView.cancelAnimationFrame( raf );
-			} else {
-				iframeDocument.documentElement.removeEventListener(
-					'transitionend',
-					onZoomOutTransitionEnd
-				);
-			}
-		};
-	}, [ iframeDocument, scaleValue, frameSizeValue, prefersReducedMotion ] );
-
-	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
-	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
-	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
-	// number of dependencies.
-	useEffect( () => {
-		if ( ! iframeDocument ) {
-			return;
-		}
-
-		if ( isZoomedOut ) {
-			iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
-		} else {
-			// HACK: Since we can't remove this in the cleanup, we need to do it here.
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
-		}
-
-		return () => {
-			// HACK: Skipping cleanup because it causes issues with the zoom out
-			// animation. More refactoring is needed to fix this properly.
-			// iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
-		};
-	}, [ iframeDocument, isZoomedOut ] );
-
-	// Calculate the scaling and CSS variables for the zoom out canvas
-	useEffect( () => {
-		if ( ! iframeDocument ) {
-			return;
-		}
-
-		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
-		// initialContainerWidthRef will be smaller than the full page, and reflow will happen
-		// when the canvas area becomes larger due to sidebars closing. This is a known but
-		// minor divergence for now.
-
-		// This scaling calculation has to happen within the JS because CSS calc() can
-		// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
-		// but calc( 100px / 2px ) is not.
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-scale',
-			scaleValue
-		);
-
-		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-frame-size',
-			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-content-height',
-			`${ contentHeight }px`
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-inner-height',
-			`${ iframeWindowInnerHeight }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`
-		);
-
-		return () => {
-			// HACK: Skipping cleanup because it causes issues with the zoom out
-			// animation. More refactoring is needed to fix this properly.
-			// iframeDocument.documentElement.style.removeProperty(
-			// 	'--wp-block-editor-iframe-zoom-out-scale'
-			// );
-			// iframeDocument.documentElement.style.removeProperty(
-			// 	'--wp-block-editor-iframe-zoom-out-frame-size'
-			// );
-			// iframeDocument.documentElement.style.removeProperty(
-			// 	'--wp-block-editor-iframe-zoom-out-content-height'
-			// );
-			// iframeDocument.documentElement.style.removeProperty(
-			// 	'--wp-block-editor-iframe-zoom-out-inner-height'
-			// );
-			// iframeDocument.documentElement.style.removeProperty(
-			// 	'--wp-block-editor-iframe-zoom-out-container-width'
-			// );
-			// iframeDocument.documentElement.style.removeProperty(
-			// 	'--wp-block-editor-iframe-zoom-out-scale-container-width'
-			// );
-		};
-	}, [
-		scaleValue,
-		frameSize,
-		iframeDocument,
-		iframeWindowInnerHeight,
-		contentHeight,
-		containerWidth,
-		windowInnerWidth,
-		isZoomedOut,
-		scaleContainerWidth,
-	] );
-
 	// Make sure to not render the before and after focusable div elements in view
 	// mode. They're only needed to capture focus in edit mode.
 	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
@@ -654,7 +354,7 @@ function Iframe( {
 	);
 
 	return (
-		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
+		<div className="block-editor-iframe__container">
 			{ containerResizeListener }
 			<div
 				className={ clsx(