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

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -219,7 +219,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         <button
                           aria-label="Color: red"
                           aria-selected="true"
-                          class="components-button components-circular-option-picker__option"
+                          class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
@@ -247,7 +247,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   class="components-circular-option-picker__custom-clear-wrapper"
                 >
                   <button
-                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
                     type="button"
                   >
                     Clear

package/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool',
 	component: AspectRatioTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/dimensions-tool/stories/index.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool',
 	component: DimensionsTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/dimensions-tool/stories/scale-tool.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool',
 	component: ScaleTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/dimensions-tool/stories/width-height-tool.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool',
 	component: WidthHeightTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/font-appearance-control/index.js

@@ -153,6 +153,7 @@ export default function FontAppearanceControl( props ) {
 				{ ...otherProps }
 				className="components-font-appearance-control"
 				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }

package/src/components/font-family/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -18,6 +23,7 @@ export default function FontFamilyControl( {
 	value = '',
 	onChange,
 	fontFamilies,
+	className,
 	...props
 } ) {
 	const [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );
@@ -55,10 +61,14 @@ export default function FontFamilyControl( {
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font' ) }
 			value={ value }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
 			options={ options }
+			className={ clsx( 'block-editor-font-family-control', className, {
+				'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
+			} ) }
 			{ ...props }
 		/>
 	);

package/src/components/font-family/style.scss

@@ -0,0 +1,5 @@
+.block-editor-font-family-control {
+	&:not(.is-next-has-no-margin-bottom) {
+		margin-bottom: $grid-unit-10;
+	}
+}

package/src/components/global-styles/dimensions-panel.js

@@ -444,17 +444,6 @@ export default function DimensionsPanel( {
 
 	const onMouseLeaveControls = () => onVisualize( false );
 
-	const inputProps = {
-		min: minMarginValue,
-		onDragStart: () => {
-			//Reset to 0 in case the value was negative.
-			setMinMarginValue( 0 );
-		},
-		onDragEnd: () => {
-			setMinMarginValue( minimumMargin );
-		},
-	};
-
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -545,8 +534,10 @@ export default function DimensionsPanel( {
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialPadding }
-							onMouseOver={ onMouseOverPadding }
-							onMouseOut={ onMouseLeaveControls }
+							inputProps={ {
+								onMouseOver: onMouseOverPadding,
+								onMouseOut: onMouseLeaveControls,
+							} }
 						/>
 					) }
 					{ showSpacingPresetsControl && (
@@ -581,14 +572,23 @@ export default function DimensionsPanel( {
 							__next40pxDefaultSize
 							values={ marginValues }
 							onChange={ setMarginValues }
-							inputProps={ inputProps }
+							inputProps={ {
+								min: minMarginValue,
+								onDragStart: () => {
+									// Reset to 0 in case the value was negative.
+									setMinMarginValue( 0 );
+								},
+								onDragEnd: () => {
+									setMinMarginValue( minimumMargin );
+								},
+								onMouseOver: onMouseOverMargin,
+								onMouseOut: onMouseLeaveControls,
+							} }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialMargin }
-							onMouseOver={ onMouseOverMargin }
-							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
 					{ showSpacingPresetsControl && (

package/src/components/iframe/content.scss

@@ -4,68 +4,66 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// We don't want to animate the transform of the translateX because it is used
-	// to "center" the canvas. Leaving it on causes the canvas to slide around in
-	// odd ways.
-	@include editor-canvas-resize-animation( transform 0s, scale 0s, padding 0s, translate 0s);
+	// Prevents a flash of background color change when entering/exiting zoom out
+	transition: background-color 400ms;
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
 		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
 
 		position: fixed;
 		left: 0;
 		right: 0;
 		top: calc(-1 * #{$scroll-top});
 		bottom: 0;
-		translate: 0 calc(#{$scroll-top} - #{$scroll-top-next});
 		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
 		// and removing the scrollbar causes the content to shift.
-		overflow-y: scroll;
-
-		// We only want to animate the scaling when entering zoom out. When sidebars
-		// are toggled, the resizing of the iframe handles scaling the canvas as well,
-		// and the doubled animations cause very odd animations.
-		@include editor-canvas-resize-animation( transform 0s, top 0s, bottom 0s, right 0s, left 0s );
+		overflow-y: $overflow-behavior;
 	}
-}
 
-.block-editor-iframe__html.is-zoomed-out {
-	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
-	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
-	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	// Apply an X translation to center the scaled content within the available space.
-	transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
-	scale: #{$scale};
-	background-color: $gray-300;
+	&.is-zoomed-out {
+		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
+		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+		$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
+		$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+		// Apply an X translation to center the scaled content within the available space.
+		transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
+		scale: $scale;
+		background-color: $gray-300;
 
-	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
-	// so we need to adjust the height of the content to match the scale by using negative margins.
-	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
-	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
-	margin-bottom: calc(-1 * #{$total-height});
-	// Add the top/bottom frame size. We use scaling to account for the left/right, as
-	// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
-	// of the content.
-	padding-top: calc(#{$frame-size} / #{$scale});
-	padding-bottom: calc(#{$frame-size} / #{$scale});
+		// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
+		// so we need to adjust the height of the content to match the scale by using negative margins.
+		$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
+		$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
+		$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
+		margin-bottom: calc(-1 * #{$total-height});
 
-	body {
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+		// Add the top/bottom frame size. We use scaling to account for the left/right, as
+		// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
+		// of the content.
+		padding-top: calc(#{$frame-size} / #{$scale});
+		padding-bottom: calc(#{$frame-size} / #{$scale});
 
-		> .is-root-container:not(.wp-block-post-content) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
+		body {
+			min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
 
-			> main {
+			> .is-root-container:not(.wp-block-post-content) {
 				flex: 1;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+
+				> main {
+					flex: 1;
+				}
 			}
 		}
+
+		.wp-block[draggable] {
+			cursor: grab;
+		}
 	}
 }

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(