From 9c83e9efb8ae5d21c94c47122cb88a2e4968c8d8 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 30 Jun 2024 14:17:41 -0700
Subject: [PATCH 01/25] Remove iframe wrappers; have scrollbar visible; improve
 centering

---
 .../src/components/iframe/content.scss        | 28 ++-----------
 .../src/components/iframe/index.js            | 42 ++-----------------
 2 files changed, 8 insertions(+), 62 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 90b887993bf6db..e9c280f703647b 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -2,25 +2,6 @@
 	position: relative;
 }
 
-.block-editor-iframe__container {
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-}
-
-.block-editor-iframe__scale-container.is-zoomed-out {
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
-	width: $prev-container-width;
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
-}
-
 .block-editor-iframe__html {
 	border: 0 solid $gray-300;
 	transform-origin: top center;
@@ -29,27 +10,26 @@
 
 .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);
-	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
-
 	transform: scale(#{$scale});
+	margin-inline: calc(-50% / #{$scale} + 50%);
 
 	background-color: $gray-300;
 
+	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
 	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
 	// layout, so we use border matching the background instead of margins.
 	border: calc(#{$frame-size} / #{$scale}) solid $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.
+	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
 	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
 	$total-frame-height: calc(2 * #{$frame-size});
 	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
 	margin-bottom: calc(-1 * #{$total-height});
 
 	body {
+		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
 		display: flex;
 		flex-direction: column;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3e022cf95ae556..901a8f1008ac3c 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -309,8 +309,7 @@ function Iframe( {
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
-				? Math.min( containerWidth, maxWidth ) /
-						prevContainerWidthRef.current
+				? Math.min( 1, containerWidth / prevContainerWidthRef.current )
 				: scale
 		);
 		iframeDocument.documentElement.style.setProperty(
@@ -325,14 +324,6 @@ function Iframe( {
 			'--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-prev-container-width',
-			`${ prevContainerWidthRef.current }px`
-		);
 
 		return () => {
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
@@ -349,12 +340,6 @@ function Iframe( {
 			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-prev-container-width'
-			);
 		};
 	}, [
 		scale,
@@ -371,8 +356,9 @@ function Iframe( {
 	// mode. They're only needed to capture focus in edit mode.
 	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
 
-	const iframe = (
+	return (
 		<>
+			{ containerResizeListener }
 			{ shouldRenderFocusCaptureElements && before }
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<iframe
@@ -381,7 +367,7 @@ function Iframe( {
 					...props.style,
 					height: props.style?.height,
 				} }
-				ref={ useMergeRefs( [ ref, setRef ] ) }
+				ref={ useMergeRefs( [ ref, setRef, windowResizeRef ] ) }
 				tabIndex={ tabIndex }
 				// Correct doctype is required to enable rendering in standards
 				// mode. Also preload the styles to avoid a flash of unstyled
@@ -443,26 +429,6 @@ function Iframe( {
 			{ shouldRenderFocusCaptureElements && after }
 		</>
 	);
-
-	return (
-		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
-			{ containerResizeListener }
-			<div
-				className={ clsx(
-					'block-editor-iframe__scale-container',
-					isZoomedOut && 'is-zoomed-out'
-				) }
-				style={ {
-					'--wp-block-editor-iframe-zoom-out-container-width':
-						isZoomedOut && `${ containerWidth }px`,
-					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidthRef.current }px`,
-				} }
-			>
-				{ iframe }
-			</div>
-		</div>
-	);
 }
 
 function IframeIfReady( props, ref ) {

From 98c452b72e1cbc52ab4fe58b461d6c628cc88ab0 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 2 Jul 2024 17:38:59 -0700
Subject: [PATCH 02/25] =?UTF-8?q?Avoid=20changing=20scale=20once=20?=
 =?UTF-8?q?=E2=80=9Czoomed=20out=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/iframe/index.js            | 67 ++++++++++++++++---
 1 file changed, 59 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 901a8f1008ac3c..1ec8e625461578 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -13,6 +13,7 @@ import {
 	useMemo,
 	useEffect,
 	useRef,
+	useInsertionEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -20,6 +21,7 @@ import {
 	useMergeRefs,
 	useRefEffect,
 	useDisabled,
+	useReducedMotion,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -122,7 +124,6 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidthRef = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -191,6 +192,10 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
+			iFrameDocument.addEventListener(
+				'transitionend',
+				refZoomOutStatus.current
+			);
 		}
 
 		node.addEventListener( 'load', onLoad );
@@ -239,13 +244,62 @@ function Iframe( {
 		};
 	}, [] );
 
+	const isReducedMotion = useReducedMotion();
+
 	const isZoomedOut = scale !== 1;
+	const shouldScaleToDefault = scale === 'default';
+
+	const refZoomOutStatus = useRef( {
+		isZoomOut: isZoomedOut,
+		isZoomingOut: false,
+		priorContainerWidth: null,
+		scale: null,
+		/** @param { TransitionEvent } $ */
+		handleEvent( { propertyName } ) {
+			if ( propertyName === 'transform' && this.isZoomingOut ) {
+				this.isZoomingOut = false;
+			}
+		},
+	} );
+
+	// Readies zoom out related (mutable) state once engaged.
+	useInsertionEffect( () => {
+		refZoomOutStatus.current.isZoomOut = isZoomedOut;
+		if ( isZoomedOut ) {
+			if ( ! isReducedMotion ) {
+				refZoomOutStatus.current.isZoomingOut = true;
+			}
+			if ( shouldScaleToDefault ) {
+				refZoomOutStatus.current.scale = null;
+				refZoomOutStatus.current.priorContainerWidth = containerWidth;
+			}
+		}
+	}, [ isZoomedOut, isReducedMotion, shouldScaleToDefault ] );
 
+	// Derives the scaling factor for 'default' scale as containerWidth changes
+	// yet leaves it constant after the container’s automated resize completes.
+	// This is so that container width changes caused by a user action like
+	// browser window resizing should not change the scale.
 	useEffect( () => {
-		if ( ! isZoomedOut ) {
-			prevContainerWidthRef.current = containerWidth;
+		if ( ! shouldScaleToDefault ) {
+			return;
+		}
+		const { priorContainerWidth, isZoomingOut } = refZoomOutStatus.current;
+		// Updates scale only while the container’s width transitions.
+		if ( isZoomingOut ) {
+			refZoomOutStatus.current.scale =
+				containerWidth / priorContainerWidth;
+		}
+		// With reduced motion, updates the scale only the first time
+		// containerWidth differs from priorContainerWidth.
+		else if (
+			refZoomOutStatus.current.scale === null &&
+			containerWidth !== priorContainerWidth
+		) {
+			refZoomOutStatus.current.scale =
+				containerWidth / priorContainerWidth;
 		}
-	}, [ containerWidth, isZoomedOut ] );
+	}, [ containerWidth, shouldScaleToDefault ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -305,12 +359,9 @@ function Iframe( {
 
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
-		const maxWidth = 750;
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'default'
-				? Math.min( 1, containerWidth / prevContainerWidthRef.current )
-				: scale
+			scale === 'default' ? refZoomOutStatus.current.scale : scale
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-frame-size',

From 37f79cc441b397c84540077aed1ab25188ebf15c Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 2 Jul 2024 19:01:49 -0700
Subject: [PATCH 03/25] Remove resize listeners

---
 .../src/components/iframe/content.scss        |  4 +-
 .../src/components/iframe/index.js            | 51 ++++---------------
 2 files changed, 11 insertions(+), 44 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index e9c280f703647b..a4a758752ef225 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -29,8 +29,8 @@
 	margin-bottom: calc(-1 * #{$total-height});
 
 	body {
-		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+		$container-height: var(--wp-block-editor-iframe-zoom-out-container-height);
+		min-height: calc((#{$container-height} - #{$total-frame-height}) / #{$scale});
 		display: flex;
 		flex-direction: column;
 
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 1ec8e625461578..70d5f4d04f02cb 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -129,8 +129,10 @@ function Iframe( {
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
+	const [
+		containerResizeListener,
+		{ width: containerWidth, height: containerHeight },
+	] = useResizeObserver();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -214,36 +216,6 @@ 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 isReducedMotion = useReducedMotion();
 
 	const isZoomedOut = scale !== 1;
@@ -308,10 +280,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
@@ -372,8 +340,8 @@ function Iframe( {
 			`${ contentHeight }px`
 		);
 		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-inner-height',
-			`${ iframeWindowInnerHeight }px`
+			'--wp-block-editor-iframe-zoom-out-container-height',
+			`${ containerHeight }px`
 		);
 
 		return () => {
@@ -389,17 +357,16 @@ function Iframe( {
 				'--wp-block-editor-iframe-zoom-out-content-height'
 			);
 			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inner-height'
+				'--wp-block-editor-iframe-zoom-out-container-height'
 			);
 		};
 	}, [
 		scale,
 		frameSize,
 		iframeDocument,
-		iframeWindowInnerHeight,
 		contentHeight,
 		containerWidth,
-		windowInnerWidth,
+		containerHeight,
 		isZoomedOut,
 	] );
 
@@ -418,7 +385,7 @@ function Iframe( {
 					...props.style,
 					height: props.style?.height,
 				} }
-				ref={ useMergeRefs( [ ref, setRef, windowResizeRef ] ) }
+				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
 				// Correct doctype is required to enable rendering in standards
 				// mode. Also preload the styles to avoid a flash of unstyled

From 26a67faf15f5d7382ec4bbe66a87ca54e9a7b377 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 3 Jul 2024 08:02:36 -0700
Subject: [PATCH 04/25] Try without transitions

---
 .../src/components/iframe/index.js            | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 70d5f4d04f02cb..5a801b1f9997e8 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -13,7 +13,6 @@ import {
 	useMemo,
 	useEffect,
 	useRef,
-	useInsertionEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -194,10 +193,6 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
-			iFrameDocument.addEventListener(
-				'transitionend',
-				refZoomOutStatus.current
-			);
 		}
 
 		node.addEventListener( 'load', onLoad );
@@ -222,21 +217,14 @@ function Iframe( {
 	const shouldScaleToDefault = scale === 'default';
 
 	const refZoomOutStatus = useRef( {
-		isZoomOut: isZoomedOut,
 		isZoomingOut: false,
 		priorContainerWidth: null,
 		scale: null,
-		/** @param { TransitionEvent } $ */
-		handleEvent( { propertyName } ) {
-			if ( propertyName === 'transform' && this.isZoomingOut ) {
-				this.isZoomingOut = false;
-			}
-		},
+		timerIdDetectZoomingOutEnd: -1,
 	} );
 
-	// Readies zoom out related (mutable) state once engaged.
-	useInsertionEffect( () => {
-		refZoomOutStatus.current.isZoomOut = isZoomedOut;
+	// Readies zoom out related state once engaged.
+	useEffect( () => {
 		if ( isZoomedOut ) {
 			if ( ! isReducedMotion ) {
 				refZoomOutStatus.current.isZoomingOut = true;
@@ -254,6 +242,7 @@ function Iframe( {
 	// browser window resizing should not change the scale.
 	useEffect( () => {
 		if ( ! shouldScaleToDefault ) {
+			clearTimeout( refZoomOutStatus.current.timerIdDetectZoomingOutEnd );
 			return;
 		}
 		const { priorContainerWidth, isZoomingOut } = refZoomOutStatus.current;
@@ -261,6 +250,13 @@ function Iframe( {
 		if ( isZoomingOut ) {
 			refZoomOutStatus.current.scale =
 				containerWidth / priorContainerWidth;
+			clearTimeout( refZoomOutStatus.current.timerIdDetectZoomingOutEnd );
+			refZoomOutStatus.current.timerIdDetectZoomingOutEnd = setTimeout(
+				() => {
+					refZoomOutStatus.current.isZoomingOut = false;
+				},
+				200
+			);
 		}
 		// With reduced motion, updates the scale only the first time
 		// containerWidth differs from priorContainerWidth.

From 02362aab5ac7bbf915beba42c51d381a86fdb95c Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 4 Jul 2024 17:25:41 -0700
Subject: [PATCH 05/25] Scale the iframe instead of its contents

---
 .../src/components/iframe/content.scss        |  67 +++---
 .../src/components/iframe/index.js            | 190 ++++++++----------
 2 files changed, 123 insertions(+), 134 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index a4a758752ef225..99023835dc4147 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -1,36 +1,57 @@
-.block-editor-iframe__body {
+iframe[name="editor-canvas"].is-zoomed-out {
+	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
+	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
 	position: relative;
+	inset: $inset;
+	transform: scale(#{$scale});
+	transform-origin: 50% 0;
+	// Transform scale doesn’t affect the layout size of the element, so counterscale
+	// the width, height and negative margins to fit the untransformed size.
+	width: calc((100% - #{$inset} * 2) / #{$scale});
+	margin-inline: calc((-50% + #{$inset}) / #{$scale} + 50% - #{$inset});
+	height: calc((100% - #{$inset} * 2) / #{$scale});
+	margin-block: 0 calc(-100% / #{$scale});
 }
 
-.block-editor-iframe__html {
-	border: 0 solid $gray-300;
-	transform-origin: top center;
-	@include editor-canvas-resize-animation;
+.block-editor-iframe__body {
+	position: relative;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
 	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-	transform: scale(#{$scale});
-	margin-inline: calc(-50% / #{$scale} + 50%);
 
-	background-color: $gray-300;
-
-	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
-	// Firefox and Safari don't render margin-bottom here and margin-bottom is needed for Chrome
-	// layout, so we use border matching the background instead of margins.
-	border: calc(#{$frame-size} / #{$scale}) solid $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.
-	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size});
-	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
-	margin-bottom: calc(-1 * #{$total-height});
+	// Customize the scrollbar to counterscale its width but only for devices with fine
+	// pointers as otherwise scrollbars are likely to be overlaid and not affected by
+	// scaling. This isn’t perfect as some devices might have a fine cursor but still use
+	// overlaid scrollbars. Additionally, the width of the scrollbar reduces the width of
+	// the content area so the "default" scaling should factor it in to accurately keep
+	// the content width the same as when unzoomed.
+	@media (pointer: fine) {
+		&::-webkit-scrollbar {
+			// 15px seems a de facto standard but likely not all devices. It may
+			// be possible to derive the device size with some DOM measurements
+			// if this needs to be improved.
+			width: calc(15px / #{$scale});
+		}
+		&::-webkit-scrollbar-track {
+			background-color: $gray-100;
+			border-inline-start: calc(1px / #{$scale}) solid $gray-300;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-color: $gray-400;
+			background-clip: content-box;
+			border-color: transparent;
+			border-style: solid;
+			$border-width-base: calc(3px / #{$scale});
+			border-width: $border-width-base;
+			// One more pixel on the start side to make the thumb appear centered
+			// in the track due to its one pixel border on the start side.
+			border-inline-start-width: calc(4px / #{$scale});
+			border-radius: 999px;
+		}
+	}
 
 	body {
-		$container-height: var(--wp-block-editor-iframe-zoom-out-container-height);
-		min-height: calc((#{$container-height} - #{$total-frame-height}) / #{$scale});
 		display: flex;
 		flex-direction: column;
 
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 5a801b1f9997e8..6baf0d717101f2 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -13,6 +13,7 @@ import {
 	useMemo,
 	useEffect,
 	useRef,
+	useCallback,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -20,7 +21,6 @@ import {
 	useMergeRefs,
 	useRefEffect,
 	useDisabled,
-	useReducedMotion,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -126,12 +126,8 @@ function Iframe( {
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
+	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
-	const [
-		containerResizeListener,
-		{ width: containerWidth, height: containerHeight },
-	] = useResizeObserver();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -211,62 +207,86 @@ function Iframe( {
 		};
 	}, [] );
 
-	const isReducedMotion = useReducedMotion();
-
 	const isZoomedOut = scale !== 1;
 	const shouldScaleToDefault = scale === 'default';
 
 	const refZoomOutStatus = useRef( {
-		isZoomingOut: false,
 		priorContainerWidth: null,
 		scale: null,
-		timerIdDetectZoomingOutEnd: -1,
+		timerId: -1,
+		effect: null,
 	} );
 
-	// Readies zoom out related state once engaged.
-	useEffect( () => {
-		if ( isZoomedOut ) {
-			if ( ! isReducedMotion ) {
-				refZoomOutStatus.current.isZoomingOut = true;
+	const actualizeZoom = useCallback(
+		( nextScale, inset ) => {
+			if ( ! iframeDocument ) {
+				return;
 			}
-			if ( shouldScaleToDefault ) {
-				refZoomOutStatus.current.scale = null;
-				refZoomOutStatus.current.priorContainerWidth = containerWidth;
+			const { documentElement, defaultView } = iframeDocument;
+			if ( nextScale < 1 ) {
+				documentElement.classList.add( 'is-zoomed-out' );
+				documentElement.style.setProperty(
+					'--wp-block-editor-iframe-zoom-out-scale',
+					nextScale
+				);
+				defaultView.frameElement.style.setProperty(
+					'--wp-block-editor-iframe-zoom-out-scale',
+					nextScale
+				);
+				defaultView.frameElement.style.setProperty(
+					'--wp-block-editor-iframe-zoom-out-inset',
+					inset === 'number' ? `${ inset }px` : inset
+				);
+			} else {
+				documentElement.classList.remove( 'is-zoomed-out' );
+				documentElement.style.removeProperty(
+					'--wp-block-editor-iframe-zoom-out-scale'
+				);
+				defaultView.frameElement.style.removeProperty(
+					'--wp-block-editor-iframe-zoom-out-scale'
+				);
+				defaultView.frameElement.style.removeProperty(
+					'--wp-block-editor-iframe-zoom-out-inset'
+				);
 			}
-		}
-	}, [ isZoomedOut, isReducedMotion, shouldScaleToDefault ] );
+		},
+		[ iframeDocument ]
+	);
+
+	useEffect(
+		() => {
+			if ( ! shouldScaleToDefault ) {
+				actualizeZoom( scale, frameSize );
+				return;
+			}
+			refZoomOutStatus.current.priorContainerWidth = containerWidth;
+			// Derives the scaling factor for 'default' scale as containerWidth changes
+			// yet leaves it constant after the container’s automated resize completes.
+			// This is so that container width changes caused by a user action like
+			// browser window resizing should not change the scale.
+			refZoomOutStatus.current.effect = ( isActive, nextWidth ) => {
+				if ( isActive ) {
+					const { priorContainerWidth } = refZoomOutStatus.current;
+					actualizeZoom( nextWidth / priorContainerWidth, frameSize );
+					clearTimeout( refZoomOutStatus.current.timerId );
+					refZoomOutStatus.current.timerId = setTimeout( () => {
+						refZoomOutStatus.current.effect = null;
+					}, 250 );
+				} else {
+					clearTimeout( refZoomOutStatus.current.timerId );
+				}
+			};
+		},
+		// containerWidth is purposely omitted to memoize its value once
+		// "default" scaling begins.
+		[ actualizeZoom, frameSize, isZoomedOut, scale, shouldScaleToDefault ]
+	);
 
-	// Derives the scaling factor for 'default' scale as containerWidth changes
-	// yet leaves it constant after the container’s automated resize completes.
-	// This is so that container width changes caused by a user action like
-	// browser window resizing should not change the scale.
 	useEffect( () => {
-		if ( ! shouldScaleToDefault ) {
-			clearTimeout( refZoomOutStatus.current.timerIdDetectZoomingOutEnd );
-			return;
-		}
-		const { priorContainerWidth, isZoomingOut } = refZoomOutStatus.current;
-		// Updates scale only while the container’s width transitions.
-		if ( isZoomingOut ) {
-			refZoomOutStatus.current.scale =
-				containerWidth / priorContainerWidth;
-			clearTimeout( refZoomOutStatus.current.timerIdDetectZoomingOutEnd );
-			refZoomOutStatus.current.timerIdDetectZoomingOutEnd = setTimeout(
-				() => {
-					refZoomOutStatus.current.isZoomingOut = false;
-				},
-				200
-			);
-		}
-		// With reduced motion, updates the scale only the first time
-		// containerWidth differs from priorContainerWidth.
-		else if (
-			refZoomOutStatus.current.scale === null &&
-			containerWidth !== priorContainerWidth
-		) {
-			refZoomOutStatus.current.scale =
-				containerWidth / priorContainerWidth;
-		}
+		refZoomOutStatus.current.effect?.(
+			shouldScaleToDefault,
+			containerWidth
+		);
 	}, [ containerWidth, shouldScaleToDefault ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
@@ -291,13 +311,6 @@ function Iframe( {
 				height: auto !important;
 				min-height: 100%;
 			}
-			/* Lowest specificity to not override global styles */
-			:where(body) {
-				margin: 0;
-				/* Default background color in case zoom out mode background
-				colors the html element */
-				background-color: white;
-			}
 		</style>
 		${ styles }
 		${ scripts }
@@ -316,55 +329,10 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
-			return;
-		}
-
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
-
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'default' ? refZoomOutStatus.current.scale : scale
-		);
-		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-container-height',
-			`${ containerHeight }px`
-		);
-
-		return () => {
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
-
-			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-container-height'
-			);
-		};
-	}, [
-		scale,
-		frameSize,
-		iframeDocument,
-		contentHeight,
-		containerWidth,
-		containerHeight,
-		isZoomedOut,
-	] );
+	const { marginLeft, marginRight, ...styleWithoutInlineMargins } =
+		props.style || {};
+	// Omits inline margins for zoom out so static styles don’t need !important to override them.
+	const usedStyle = ! isZoomedOut ? props.style : styleWithoutInlineMargins;
 
 	// 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.
@@ -377,10 +345,11 @@ function Iframe( {
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<iframe
 				{ ...props }
-				style={ {
-					...props.style,
-					height: props.style?.height,
-				} }
+				className={ clsx(
+					props.className,
+					isZoomedOut && 'is-zoomed-out'
+				) }
+				style={ { border: 0, ...usedStyle } }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
 				// Correct doctype is required to enable rendering in standards
@@ -432,7 +401,6 @@ function Iframe( {
 								...bodyClasses
 							) }
 						>
-							{ contentResizeListener }
 							<StyleProvider document={ iframeDocument }>
 								{ children }
 							</StyleProvider>

From 4bcf2e38ee1f2aebb94b1fc9468727b5011f0bf9 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 10 Jul 2024 19:47:12 -0700
Subject: [PATCH 06/25] Remove outdated fix for double scrollbars

---
 .../interface/src/components/interface-skeleton/style.scss  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index fb150daceadc9e..5a40af7ccf991a 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -5,10 +5,8 @@ html.interface-interface-skeleton__html-container {
 	width: 100%;
 
 	@include break-medium() {
-		&:not(:has(.is-zoom-out)) {
-			position: initial;
-			width: initial;
-		}
+		position: initial;
+		width: initial;
 	}
 }
 

From d7aaedcf57a63094e1d5366fb3c00722f7e0b280 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 11 Jul 2024 10:14:12 -0700
Subject: [PATCH 07/25] Restore main content area expansion

---
 .../src/components/iframe/content.scss        | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 99023835dc4147..ae90ec2f017094 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -51,19 +51,17 @@ iframe[name="editor-canvas"].is-zoomed-out {
 		}
 	}
 
-	body {
+	// Expands main content area.
+	// See: https://github.com/WordPress/gutenberg/pull/59512
+	&,
+	> body,
+	> body > .is-root-container:not(.wp-block-post-content) {
 		display: flex;
 		flex-direction: column;
+		flex: 1; // Doesn’t effect the html element but grouping is simpler this way.
+	}
 
-		> .is-root-container:not(.wp-block-post-content) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-
-			> main {
-				flex: 1;
-			}
-		}
+	> body > .is-root-container:not(.wp-block-post-content) > main {
+		flex: 1;
 	}
 }

From 921e97477c224c75c9afe2b4cf36a394988131a3 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 11 Jul 2024 10:18:52 -0700
Subject: [PATCH 08/25] Move styles from JS to CSS; add comments

---
 .../block-editor/src/components/iframe/content.scss | 13 +++++++++++--
 .../block-editor/src/components/iframe/index.js     |  6 ------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index ae90ec2f017094..5a4b7924cca2ed 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -13,8 +13,13 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	margin-block: 0 calc(-100% / #{$scale});
 }
 
-.block-editor-iframe__body {
-	position: relative;
+.block-editor-iframe__html {
+	// Keeps body background styles from being clipped.
+	// See: https://github.com/WordPress/gutenberg/issues/44374#issuecomment-1260784743
+	height: auto;
+	// Keeps body background image from repeating.
+	// See: https://github.com/WordPress/gutenberg/issues/46782
+	min-height: 100%;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -65,3 +70,7 @@ iframe[name="editor-canvas"].is-zoomed-out {
 		flex: 1;
 	}
 }
+
+.block-editor-iframe__body {
+	position: relative;
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 6baf0d717101f2..543f3cedbc87bd 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -306,12 +306,6 @@ function Iframe( {
 	<head>
 		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
-		<style>
-			html{
-				height: auto !important;
-				min-height: 100%;
-			}
-		</style>
 		${ styles }
 		${ scripts }
 	</head>

From f32bed22c4b877b1890cf43c98f084a8c47f99e5 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 11 Jul 2024 15:40:54 -0700
Subject: [PATCH 09/25] =?UTF-8?q?Factor=20in=20frameSize=20to=20=E2=80=9Cd?=
 =?UTF-8?q?efault=E2=80=9D=20scaling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/block-editor/src/components/iframe/index.js  | 6 ++++--
 packages/editor/src/components/visual-editor/index.js | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 543f3cedbc87bd..55da4d15ce5ef1 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -235,7 +235,7 @@ function Iframe( {
 				);
 				defaultView.frameElement.style.setProperty(
 					'--wp-block-editor-iframe-zoom-out-inset',
-					inset === 'number' ? `${ inset }px` : inset
+					inset
 				);
 			} else {
 				documentElement.classList.remove( 'is-zoomed-out' );
@@ -267,7 +267,9 @@ function Iframe( {
 			refZoomOutStatus.current.effect = ( isActive, nextWidth ) => {
 				if ( isActive ) {
 					const { priorContainerWidth } = refZoomOutStatus.current;
-					actualizeZoom( nextWidth / priorContainerWidth, frameSize );
+					nextWidth -= frameSize * 2;
+					const nextScale = nextWidth / priorContainerWidth;
+					actualizeZoom( nextScale, `${ frameSize }px` );
 					clearTimeout( refZoomOutStatus.current.timerId );
 					refZoomOutStatus.current.timerId = setTimeout( () => {
 						refZoomOutStatus.current.effect = null;
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 88d2dac8ffd77c..b5aa3fed8d1a6a 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -341,7 +341,7 @@ function VisualEditor( {
 		isZoomedOut && ! isTabletViewport
 			? {
 					scale: 'default',
-					frameSize: '48px',
+					frameSize: 48,
 			  }
 			: {};
 

From eddd3f85d1b0780f5bcc88ac6d1722bad199a2c0 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 11 Jul 2024 22:44:22 -0700
Subject: [PATCH 10/25] Factor scale into adjustment of bubbled mouse events

---
 .../block-editor/src/components/iframe/index.js  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 55da4d15ce5ef1..00e9de305c9fb0 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -40,15 +40,17 @@ function bubbleEvent( event, Constructor, frame ) {
 		init[ key ] = event[ key ];
 	}
 
-	// Check if the event is a MouseEvent generated within the iframe.
-	// If so, adjust the coordinates to be relative to the position of
-	// the iframe. This ensures that components such as Draggable
-	// receive coordinates relative to the window, instead of relative
-	// to the iframe. Without this, the Draggable event handler would
-	// result in components "jumping" position as soon as the user
-	// drags over the iframe.
+	// Check if the event is a MouseEvent generated within the iframe. If so,
+	// adjust the coordinates by the iframe’s position and scale. This ensures
+	// that components such as Draggable receive coordinates relative to the
+	// window, instead of relative to the iframe. Without this, such component’s
+	// would have to deal with "jumps" in the coordinates whenever the pointer
+	// enters or exits the iframe.
 	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
 		const rect = frame.getBoundingClientRect();
+		const scale = rect.width / frame.offsetWidth;
+		init.clientX *= scale;
+		init.clientY *= scale;
 		init.clientX += rect.left;
 		init.clientY += rect.top;
 	}

From 72d0498fe19619c133e8a200ff4ec07f7bf43db0 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 16 Jul 2024 16:06:10 -0700
Subject: [PATCH 11/25] Try padding the vertical toolbars shift range

---
 .../src/components/block-tools/zoom-out-popover.js            | 2 +-
 packages/components/src/popover/index.tsx                     | 2 +-
 packages/components/src/popover/types.ts                      | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
index a1f2990a5cc1ef..e475ea519c607a 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
@@ -24,7 +24,7 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 		...popoverProps,
 		placement: 'left-start',
 		flip: false,
-		shift: true,
+		shift: { padding: { top: 48, bottom: 48 } },
 	};
 
 	return (
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 3005f13c952ec0..9dffdfa73627c9 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -241,7 +241,7 @@ const UnforwardedPopover = (
 			shiftMiddleware( {
 				crossAxis: true,
 				limiter: limitShift(),
-				padding: 1, // Necessary to avoid flickering at the edge of the viewport.
+				padding: typeof shift === 'boolean' ? 1 : shift.padding ?? 1, // Necessary to avoid flickering at the edge of the viewport.
 			} ),
 		arrow( { element: arrowRef } ),
 	];
diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
index 427f4afb81bfb9..7793c96026f81f 100644
--- a/packages/components/src/popover/types.ts
+++ b/packages/components/src/popover/types.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ReactNode, MutableRefObject, SyntheticEvent } from 'react';
-import type { Placement } from '@floating-ui/react-dom';
+import type { Placement, ShiftOptions } from '@floating-ui/react-dom';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -139,7 +139,7 @@ export type PopoverProps = {
 	 *
 	 * @default false
 	 */
-	shift?: boolean;
+	shift?: boolean | ShiftOptions;
 	/**
 	 * Specifies the popover's style.
 	 *

From df78c42b939d3e2abdc31a57b14bfb5d332e891c Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 16 Jul 2024 16:17:23 -0700
Subject: [PATCH 12/25] Try outlining the iframe

---
 packages/block-editor/src/components/iframe/content.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 5a4b7924cca2ed..d866d40b92d296 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -3,6 +3,7 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
 	position: relative;
 	inset: $inset;
+	outline: calc(1px / #{$scale}) solid rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	transform: scale(#{$scale});
 	transform-origin: 50% 0;
 	// Transform scale doesn’t affect the layout size of the element, so counterscale

From a9c41dd9a13e816365170c230132963f9f9a3845 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 21 Jul 2024 08:24:02 -0700
Subject: [PATCH 13/25] Remove scrollbar width counter-scaling

---
 .../src/components/iframe/content.scss        | 33 -------------------
 .../src/components/iframe/index.js            |  7 ----
 2 files changed, 40 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index d866d40b92d296..8491cbb523ca9a 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -24,39 +24,6 @@ iframe[name="editor-canvas"].is-zoomed-out {
 }
 
 .block-editor-iframe__html.is-zoomed-out {
-	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-
-	// Customize the scrollbar to counterscale its width but only for devices with fine
-	// pointers as otherwise scrollbars are likely to be overlaid and not affected by
-	// scaling. This isn’t perfect as some devices might have a fine cursor but still use
-	// overlaid scrollbars. Additionally, the width of the scrollbar reduces the width of
-	// the content area so the "default" scaling should factor it in to accurately keep
-	// the content width the same as when unzoomed.
-	@media (pointer: fine) {
-		&::-webkit-scrollbar {
-			// 15px seems a de facto standard but likely not all devices. It may
-			// be possible to derive the device size with some DOM measurements
-			// if this needs to be improved.
-			width: calc(15px / #{$scale});
-		}
-		&::-webkit-scrollbar-track {
-			background-color: $gray-100;
-			border-inline-start: calc(1px / #{$scale}) solid $gray-300;
-		}
-		&::-webkit-scrollbar-thumb {
-			background-color: $gray-400;
-			background-clip: content-box;
-			border-color: transparent;
-			border-style: solid;
-			$border-width-base: calc(3px / #{$scale});
-			border-width: $border-width-base;
-			// One more pixel on the start side to make the thumb appear centered
-			// in the track due to its one pixel border on the start side.
-			border-inline-start-width: calc(4px / #{$scale});
-			border-radius: 999px;
-		}
-	}
-
 	// Expands main content area.
 	// See: https://github.com/WordPress/gutenberg/pull/59512
 	&,
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 00e9de305c9fb0..0a7f68c1d9ff47 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -227,10 +227,6 @@ function Iframe( {
 			const { documentElement, defaultView } = iframeDocument;
 			if ( nextScale < 1 ) {
 				documentElement.classList.add( 'is-zoomed-out' );
-				documentElement.style.setProperty(
-					'--wp-block-editor-iframe-zoom-out-scale',
-					nextScale
-				);
 				defaultView.frameElement.style.setProperty(
 					'--wp-block-editor-iframe-zoom-out-scale',
 					nextScale
@@ -241,9 +237,6 @@ function Iframe( {
 				);
 			} else {
 				documentElement.classList.remove( 'is-zoomed-out' );
-				documentElement.style.removeProperty(
-					'--wp-block-editor-iframe-zoom-out-scale'
-				);
 				defaultView.frameElement.style.removeProperty(
 					'--wp-block-editor-iframe-zoom-out-scale'
 				);

From 142ba05302d779206f9cf52fb6a6c599efc0c1d5 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 21 Jul 2024 11:25:24 -0700
Subject: [PATCH 14/25] Restore scale adjustment to limit zoomed out maximum
 width

---
 .../block-editor/src/components/iframe/content.scss  |  5 ++++-
 packages/block-editor/src/components/iframe/index.js | 12 ++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 8491cbb523ca9a..59247ef8d3a575 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -1,4 +1,5 @@
 iframe[name="editor-canvas"].is-zoomed-out {
+	$max-width: 750px; // This is also hardcoded as ZOOM_OUT_MAX_WIDTH in the iframe component and needs to be manually kept in sync.
 	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
 	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
 	position: relative;
@@ -9,9 +10,11 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	// Transform scale doesn’t affect the layout size of the element, so counterscale
 	// the width, height and negative margins to fit the untransformed size.
 	width: calc((100% - #{$inset} * 2) / #{$scale});
-	margin-inline: calc((-50% + #{$inset}) / #{$scale} + 50% - #{$inset});
 	height: calc((100% - #{$inset} * 2) / #{$scale});
 	margin-block: 0 calc(-100% / #{$scale});
+	$inset-max-width: "(#{$max-width} - #{$inset} * 2)";
+	max-width: calc(#{$inset-max-width} / #{$scale});
+	margin-inline: calc(max(-50% + #{$inset}, -0.5 * #{$inset-max-width}) / #{$scale} + 50% - #{$inset});
 }
 
 .block-editor-iframe__html {
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 0a7f68c1d9ff47..7a42827cae5f22 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -104,6 +104,11 @@ function useBubbleEvents( iframeDocument ) {
 	} );
 }
 
+// The max-width for the iframe when zoomed out, though the frameSize is treated as within
+// so the actual width of the iframe will be less than this by the frameSize on each side.
+// This is also hardcoded in the styles so be sure to keep them in sync.
+const ZOOM_OUT_MAX_WIDTH = 750;
+
 function Iframe( {
 	contentRef,
 	children,
@@ -262,8 +267,11 @@ function Iframe( {
 			refZoomOutStatus.current.effect = ( isActive, nextWidth ) => {
 				if ( isActive ) {
 					const { priorContainerWidth } = refZoomOutStatus.current;
-					nextWidth -= frameSize * 2;
-					const nextScale = nextWidth / priorContainerWidth;
+					const frameInlineWidth = frameSize * 2;
+					nextWidth -= frameInlineWidth;
+					const maxWidth = ZOOM_OUT_MAX_WIDTH - frameInlineWidth;
+					const nextScale =
+						Math.min( maxWidth, nextWidth ) / priorContainerWidth;
 					actualizeZoom( nextScale, `${ frameSize }px` );
 					clearTimeout( refZoomOutStatus.current.timerId );
 					refZoomOutStatus.current.timerId = setTimeout( () => {

From d553e000765d3b6024a2b801515c02a582ae0d9d Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 2 Aug 2024 15:55:34 -0700
Subject: [PATCH 15/25] Remove changes to keep scale constant after zoomed out

---
 .../src/components/iframe/index.js            | 114 ++++++------------
 1 file changed, 37 insertions(+), 77 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 7a42827cae5f22..4fc1a65d8e4d45 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -13,7 +13,6 @@ import {
 	useMemo,
 	useEffect,
 	useRef,
-	useCallback,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -215,84 +214,13 @@ function Iframe( {
 	}, [] );
 
 	const isZoomedOut = scale !== 1;
-	const shouldScaleToDefault = scale === 'default';
-
-	const refZoomOutStatus = useRef( {
-		priorContainerWidth: null,
-		scale: null,
-		timerId: -1,
-		effect: null,
-	} );
-
-	const actualizeZoom = useCallback(
-		( nextScale, inset ) => {
-			if ( ! iframeDocument ) {
-				return;
-			}
-			const { documentElement, defaultView } = iframeDocument;
-			if ( nextScale < 1 ) {
-				documentElement.classList.add( 'is-zoomed-out' );
-				defaultView.frameElement.style.setProperty(
-					'--wp-block-editor-iframe-zoom-out-scale',
-					nextScale
-				);
-				defaultView.frameElement.style.setProperty(
-					'--wp-block-editor-iframe-zoom-out-inset',
-					inset
-				);
-			} else {
-				documentElement.classList.remove( 'is-zoomed-out' );
-				defaultView.frameElement.style.removeProperty(
-					'--wp-block-editor-iframe-zoom-out-scale'
-				);
-				defaultView.frameElement.style.removeProperty(
-					'--wp-block-editor-iframe-zoom-out-inset'
-				);
-			}
-		},
-		[ iframeDocument ]
-	);
-
-	useEffect(
-		() => {
-			if ( ! shouldScaleToDefault ) {
-				actualizeZoom( scale, frameSize );
-				return;
-			}
-			refZoomOutStatus.current.priorContainerWidth = containerWidth;
-			// Derives the scaling factor for 'default' scale as containerWidth changes
-			// yet leaves it constant after the container’s automated resize completes.
-			// This is so that container width changes caused by a user action like
-			// browser window resizing should not change the scale.
-			refZoomOutStatus.current.effect = ( isActive, nextWidth ) => {
-				if ( isActive ) {
-					const { priorContainerWidth } = refZoomOutStatus.current;
-					const frameInlineWidth = frameSize * 2;
-					nextWidth -= frameInlineWidth;
-					const maxWidth = ZOOM_OUT_MAX_WIDTH - frameInlineWidth;
-					const nextScale =
-						Math.min( maxWidth, nextWidth ) / priorContainerWidth;
-					actualizeZoom( nextScale, `${ frameSize }px` );
-					clearTimeout( refZoomOutStatus.current.timerId );
-					refZoomOutStatus.current.timerId = setTimeout( () => {
-						refZoomOutStatus.current.effect = null;
-					}, 250 );
-				} else {
-					clearTimeout( refZoomOutStatus.current.timerId );
-				}
-			};
-		},
-		// containerWidth is purposely omitted to memoize its value once
-		// "default" scaling begins.
-		[ actualizeZoom, frameSize, isZoomedOut, scale, shouldScaleToDefault ]
-	);
+	const priorContainerWidth = useRef();
 
 	useEffect( () => {
-		refZoomOutStatus.current.effect?.(
-			shouldScaleToDefault,
-			containerWidth
-		);
-	}, [ containerWidth, shouldScaleToDefault ] );
+		if ( ! isZoomedOut ) {
+			priorContainerWidth.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -328,6 +256,38 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
+	useEffect( () => {
+		if ( ! iframeDocument || ! isZoomedOut ) {
+			return;
+		}
+		const frameInlineWidth = frameSize * 2;
+		const nextWidth = containerWidth - frameInlineWidth;
+		const maxWidth = ZOOM_OUT_MAX_WIDTH - frameInlineWidth;
+		const nextScale =
+			Math.min( maxWidth, nextWidth ) / priorContainerWidth.current;
+		const { documentElement, defaultView } = iframeDocument;
+
+		documentElement.classList.add( 'is-zoomed-out' );
+		defaultView.frameElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scale',
+			Math.min( nextScale, 1 )
+		);
+		defaultView.frameElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-inset',
+			`${ frameSize }px`
+		);
+
+		return () => {
+			documentElement.classList.remove( 'is-zoomed-out' );
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
+			);
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-inset'
+			);
+		};
+	}, [ containerWidth, frameSize, iframeDocument, isZoomedOut ] );
+
 	const { marginLeft, marginRight, ...styleWithoutInlineMargins } =
 		props.style || {};
 	// Omits inline margins for zoom out so static styles don’t need !important to override them.

From 35a54f1afca150ffca76b240046e5dabfa1bd3c3 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 2 Aug 2024 23:11:42 -0700
Subject: [PATCH 16/25] Redo keep scale constant after zoomed out

---
 .../src/components/iframe/index.js            | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 4fc1a65d8e4d45..5a7343eb3cfa8b 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -215,6 +215,24 @@ function Iframe( {
 
 	const isZoomedOut = scale !== 1;
 	const priorContainerWidth = useRef();
+	const isScaleFinal = useRef( false );
+	useEffect( () => {
+		if ( isZoomedOut ) {
+			return () => {
+				isScaleFinal.current = false;
+				if ( iframeDocument && iframeDocument.defaultView ) {
+					const { documentElement, defaultView } = iframeDocument;
+					documentElement.classList.remove( 'is-zoomed-out' );
+					defaultView.frameElement.style.removeProperty(
+						'--wp-block-editor-iframe-zoom-out-scale'
+					);
+					defaultView.frameElement.style.removeProperty(
+						'--wp-block-editor-iframe-zoom-out-inset'
+					);
+				}
+			};
+		}
+	}, [ isZoomedOut, iframeDocument ] );
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
@@ -257,7 +275,7 @@ function Iframe( {
 	useEffect( () => cleanup, [ cleanup ] );
 
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
+		if ( ! iframeDocument || ! isZoomedOut || isScaleFinal.current ) {
 			return;
 		}
 		const frameInlineWidth = frameSize * 2;
@@ -276,16 +294,6 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-inset',
 			`${ frameSize }px`
 		);
-
-		return () => {
-			documentElement.classList.remove( 'is-zoomed-out' );
-			defaultView.frameElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale'
-			);
-			defaultView.frameElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inset'
-			);
-		};
 	}, [ containerWidth, frameSize, iframeDocument, isZoomedOut ] );
 
 	const { marginLeft, marginRight, ...styleWithoutInlineMargins } =
@@ -346,6 +354,12 @@ function Iframe( {
 						);
 					}
 				} }
+				onTransitionEnd={ ( event ) => {
+					if ( event.propertyName === 'transform' && isZoomedOut ) {
+						isScaleFinal.current = true;
+					}
+					props.onTransitionEnd?.( event );
+				} }
 			>
 				{ iframeDocument &&
 					createPortal(

From 1f63953533a0170235fbb3f734f8b3c03c4b4a31 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 3 Aug 2024 08:55:33 -0700
Subject: [PATCH 17/25] Combine effects

---
 .../src/components/iframe/index.js            | 45 +++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 5a7343eb3cfa8b..3fb3cd2f89e347 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -216,29 +216,28 @@ function Iframe( {
 	const isZoomedOut = scale !== 1;
 	const priorContainerWidth = useRef();
 	const isScaleFinal = useRef( false );
-	useEffect( () => {
-		if ( isZoomedOut ) {
-			return () => {
-				isScaleFinal.current = false;
-				if ( iframeDocument && iframeDocument.defaultView ) {
-					const { documentElement, defaultView } = iframeDocument;
-					documentElement.classList.remove( 'is-zoomed-out' );
-					defaultView.frameElement.style.removeProperty(
-						'--wp-block-editor-iframe-zoom-out-scale'
-					);
-					defaultView.frameElement.style.removeProperty(
-						'--wp-block-editor-iframe-zoom-out-inset'
-					);
-				}
-			};
-		}
-	}, [ isZoomedOut, iframeDocument ] );
-
-	useEffect( () => {
-		if ( ! isZoomedOut ) {
-			priorContainerWidth.current = containerWidth;
-		}
-	}, [ containerWidth, isZoomedOut ] );
+	useEffect(
+		() => {
+			if ( isZoomedOut ) {
+				priorContainerWidth.current = containerWidth;
+				return () => {
+					isScaleFinal.current = false;
+					if ( iframeDocument && iframeDocument.defaultView ) {
+						const { documentElement, defaultView } = iframeDocument;
+						documentElement.classList.remove( 'is-zoomed-out' );
+						defaultView.frameElement.style.removeProperty(
+							'--wp-block-editor-iframe-zoom-out-scale'
+						);
+						defaultView.frameElement.style.removeProperty(
+							'--wp-block-editor-iframe-zoom-out-inset'
+						);
+					}
+				};
+			}
+		},
+		// containerWidth omitted so that its value is read once when zoom out engages.
+		[ isZoomedOut, iframeDocument ]
+	);
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [

From cdb3f2272a8d166d9d58f4e63159096cf2cf8571 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 3 Aug 2024 08:59:04 -0700
Subject: [PATCH 18/25] Remove singly used animation mixin

---
 packages/base-styles/_animations.scss                        | 5 -----
 packages/block-editor/src/components/block-canvas/style.scss | 3 ++-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index b17478ed24f040..e5bbf863757356 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -36,11 +36,6 @@
 	@include reduce-motion("animation");
 }
 
-@mixin editor-canvas-resize-animation() {
-	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
-	@include reduce-motion("transition");
-}
-
 // Deprecated
 @mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
 	@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 1395b5c0a437d3..c646ddefe10ba6 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,5 +4,6 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
-	@include editor-canvas-resize-animation;
+	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+	@include reduce-motion("transition");
 }

From cac6a5ed52718a20a51c2f1e7fa8c024566023c4 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 17 Aug 2024 14:36:44 -0700
Subject: [PATCH 19/25] Improve transition; revise centering; organize styles

---
 .../src/components/block-canvas/index.js      |  2 +-
 .../src/components/block-canvas/style.scss    | 17 ++++++++++++++
 .../src/components/iframe/content.scss        | 22 +++----------------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 9bad3ca22e95f7..0dad1cba38e135 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -66,7 +66,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
-			style={ { height, display: 'flex' } }
+			style={ { height, display: 'flex', justifyContent: 'center' } }
 		>
 			<Iframe
 				{ ...iframeProps }
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index c646ddefe10ba6..fc21b5db957595 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -1,4 +1,7 @@
 iframe[name="editor-canvas"] {
+	position: relative;
+	inset-block: 0;
+	flex: 0 0 auto;
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
@@ -6,4 +9,18 @@ iframe[name="editor-canvas"] {
 	background-color: transparent;
 	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
 	@include reduce-motion("transition");
+	transform-origin: 50% 0;
+}
+
+iframe[name="editor-canvas"].is-zoomed-out {
+	$max-width: 750px; // This is also hardcoded as ZOOM_OUT_MAX_WIDTH in the iframe component and needs to be manually kept in sync.
+	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
+	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
+	inset-block: $inset 0;
+	filter: drop-shadow(0 0 $grid-unit-05 rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
+	transform: scale(#{$scale});
+	flex-basis: calc((100% - #{$inset} * 2) / #{$scale});
+	height: calc((100% - #{$inset} * 2) / #{$scale});
+	$inset-max-width: "(#{$max-width} - #{$inset} * 2)";
+	max-width: calc(#{$inset-max-width} / #{$scale});
 }
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 59247ef8d3a575..5837e132daa73d 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -1,22 +1,3 @@
-iframe[name="editor-canvas"].is-zoomed-out {
-	$max-width: 750px; // This is also hardcoded as ZOOM_OUT_MAX_WIDTH in the iframe component and needs to be manually kept in sync.
-	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
-	position: relative;
-	inset: $inset;
-	outline: calc(1px / #{$scale}) solid rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
-	transform: scale(#{$scale});
-	transform-origin: 50% 0;
-	// Transform scale doesn’t affect the layout size of the element, so counterscale
-	// the width, height and negative margins to fit the untransformed size.
-	width: calc((100% - #{$inset} * 2) / #{$scale});
-	height: calc((100% - #{$inset} * 2) / #{$scale});
-	margin-block: 0 calc(-100% / #{$scale});
-	$inset-max-width: "(#{$max-width} - #{$inset} * 2)";
-	max-width: calc(#{$inset-max-width} / #{$scale});
-	margin-inline: calc(max(-50% + #{$inset}, -0.5 * #{$inset-max-width}) / #{$scale} + 50% - #{$inset});
-}
-
 .block-editor-iframe__html {
 	// Keeps body background styles from being clipped.
 	// See: https://github.com/WordPress/gutenberg/issues/44374#issuecomment-1260784743
@@ -24,6 +5,9 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	// Keeps body background image from repeating.
 	// See: https://github.com/WordPress/gutenberg/issues/46782
 	min-height: 100%;
+	// Keeps the scrollbar gutter present to avoid a minor layout shift in case zoom out
+	// increases the height enough to remove overflow.
+	overflow-y: scroll;
 }
 
 .block-editor-iframe__html.is-zoomed-out {

From b3a005c5338bc2e1689cbb724be0593775582609 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 19 Sep 2024 17:18:21 -0700
Subject: [PATCH 20/25] Restore CSS scale var for use in block list styles

---
 packages/block-editor/src/components/iframe/index.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3fb3cd2f89e347..ddf902c74876a4 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -225,6 +225,9 @@ function Iframe( {
 					if ( iframeDocument && iframeDocument.defaultView ) {
 						const { documentElement, defaultView } = iframeDocument;
 						documentElement.classList.remove( 'is-zoomed-out' );
+						documentElement.style.removeProperty(
+							'--wp-block-editor-iframe-zoom-out-scale'
+						);
 						defaultView.frameElement.style.removeProperty(
 							'--wp-block-editor-iframe-zoom-out-scale'
 						);
@@ -285,6 +288,10 @@ function Iframe( {
 		const { documentElement, defaultView } = iframeDocument;
 
 		documentElement.classList.add( 'is-zoomed-out' );
+		documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scale',
+			nextScale
+		);
 		defaultView.frameElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			Math.min( nextScale, 1 )

From c619cf9b276c0919c734b45d719b8ee47b91db50 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 19 Sep 2024 17:20:04 -0700
Subject: [PATCH 21/25] Drop drop-shadow on zoomed out canvas

---
 packages/block-editor/src/components/block-canvas/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index fc21b5db957595..a5cf0d0a4bdbd1 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -17,7 +17,6 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
 	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
 	inset-block: $inset 0;
-	filter: drop-shadow(0 0 $grid-unit-05 rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
 	transform: scale(#{$scale});
 	flex-basis: calc((100% - #{$inset} * 2) / #{$scale});
 	height: calc((100% - #{$inset} * 2) / #{$scale});

From 14e4c118ab4d5c1b1ea6e535171769816fefa56c Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 19 Sep 2024 18:43:46 -0700
Subject: [PATCH 22/25] Fix inserter separator overflow and try alternate
 dragged over style

---
 .../src/components/block-list/content.scss    | 40 ++++++++++---------
 .../block-list/zoom-out-separator.js          | 16 ++++++--
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 6a88813b0c6049..b70818e1ceca22 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -395,34 +395,36 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 }
 
 .block-editor-block-list__zoom-out-separator {
-	/* same color as the iframe's background */
-	background: $gray-300;
-	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
-	margin-left: -1px;
-	margin-right: -1px;
-	transition: background-color 0.3s ease;
+	color: $black;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: $default-font-size;
 	font-family: $default-font;
-	color: $black;
 	font-weight: normal;
+	.has-global-padding > & {
+		margin: 0;
+	}
 
 	.is-zoomed-out & {
 		// Scale the font size based on the zoom level.
-		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
-	}
+		font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale));
 
-	&.is-dragged-over {
-		background: $gray-400;
-	}
-}
+		& > * {
+			position: relative; // Puts the label in front of the ::before pseudo element.
+		}
 
-// In Post Editor allow the separator to occupy the full width by ignoring (cancelling out) the global padding.
-.has-global-padding > .block-editor-block-list__zoom-out-separator,
-.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
-	max-width: none;
-	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
-	margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
+		&::before {
+			background: $gray-300; // same color as the iframe's background.
+			content: "";
+			transition: opacity 0.2s linear;
+			position: absolute;
+			inset: auto 0; // Horizontal edges to the full canvas width regardless of global padding.
+			height: inherit;
+		}
+
+		&.is-dragged-over::before {
+			opacity: 0.25;
+		}
+	}
 }
diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index 9e0d087c2267cd..64ec3f2ec779b8 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -101,10 +101,11 @@ export function ZoomOutSeparator( {
 		<AnimatePresence>
 			{ isVisible && (
 				<motion.div
-					as="button"
 					layout={ ! isReducedMotion }
 					initial={ { height: 0 } }
-					animate={ { height: '120px' } }
+					animate={ {
+						height: 'calc(60px / var(--wp-block-editor-iframe-zoom-out-scale)',
+					} }
 					exit={ { height: 0 } }
 					transition={ {
 						type: 'tween',
@@ -123,11 +124,20 @@ export function ZoomOutSeparator( {
 				>
 					<motion.div
 						initial={ { opacity: 0 } }
-						animate={ { opacity: 1 } }
+						animate={
+							isDraggedOver
+								? {
+										opacity: 0,
+										scale: isReducedMotion ? 1 : 0,
+										transition: { duration: 0.2, delay: 0 },
+								  }
+								: { opacity: 1 }
+						}
 						exit={ { opacity: 0 } }
 						transition={ {
 							type: 'tween',
 							duration: 0.1,
+							delay: 0.1,
 						} }
 					>
 						{ __( 'Drop pattern.' ) }

From 489a35416858d528244a4e97f7d06cd914397cfb Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 6 Oct 2024 12:02:46 -0700
Subject: [PATCH 23/25] Try full height

---
 packages/block-editor/src/components/block-canvas/style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index a5cf0d0a4bdbd1..677e59bdf38735 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -16,10 +16,9 @@ iframe[name="editor-canvas"].is-zoomed-out {
 	$max-width: 750px; // This is also hardcoded as ZOOM_OUT_MAX_WIDTH in the iframe component and needs to be manually kept in sync.
 	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
 	$inset: var(--wp-block-editor-iframe-zoom-out-inset);
-	inset-block: $inset 0;
 	transform: scale(#{$scale});
 	flex-basis: calc((100% - #{$inset} * 2) / #{$scale});
-	height: calc((100% - #{$inset} * 2) / #{$scale});
+	height: calc(100% / #{$scale});
 	$inset-max-width: "(#{$max-width} - #{$inset} * 2)";
 	max-width: calc(#{$inset-max-width} / #{$scale});
 }

From 2f826fd77e9fa7d09406cab590430cfb733ebb5c Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 6 Oct 2024 12:04:31 -0700
Subject: [PATCH 24/25] Revert "Try padding the vertical toolbars shift range"

This reverts commit 72d0498fe19619c133e8a200ff4ec07f7bf43db0.
---
 .../src/components/block-tools/zoom-out-popover.js            | 2 +-
 packages/components/src/popover/index.tsx                     | 2 +-
 packages/components/src/popover/types.ts                      | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
index e475ea519c607a..a1f2990a5cc1ef 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
@@ -24,7 +24,7 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 		...popoverProps,
 		placement: 'left-start',
 		flip: false,
-		shift: { padding: { top: 48, bottom: 48 } },
+		shift: true,
 	};
 
 	return (
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 9dffdfa73627c9..3005f13c952ec0 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -241,7 +241,7 @@ const UnforwardedPopover = (
 			shiftMiddleware( {
 				crossAxis: true,
 				limiter: limitShift(),
-				padding: typeof shift === 'boolean' ? 1 : shift.padding ?? 1, // Necessary to avoid flickering at the edge of the viewport.
+				padding: 1, // Necessary to avoid flickering at the edge of the viewport.
 			} ),
 		arrow( { element: arrowRef } ),
 	];
diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
index 7793c96026f81f..427f4afb81bfb9 100644
--- a/packages/components/src/popover/types.ts
+++ b/packages/components/src/popover/types.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ReactNode, MutableRefObject, SyntheticEvent } from 'react';
-import type { Placement, ShiftOptions } from '@floating-ui/react-dom';
+import type { Placement } from '@floating-ui/react-dom';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -139,7 +139,7 @@ export type PopoverProps = {
 	 *
 	 * @default false
 	 */
-	shift?: boolean | ShiftOptions;
+	shift?: boolean;
 	/**
 	 * Specifies the popover's style.
 	 *

From 79ba58a4073f3002ff9abd5099c03924b3a25459 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 6 Oct 2024 16:14:42 -0700
Subject: [PATCH 25/25] Stop keeping scale constant after zoomed out

---
 .../src/components/iframe/index.js            | 53 +++++++------------
 1 file changed, 20 insertions(+), 33 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index ddf902c74876a4..276f4ca1de0bf9 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -215,32 +215,12 @@ function Iframe( {
 
 	const isZoomedOut = scale !== 1;
 	const priorContainerWidth = useRef();
-	const isScaleFinal = useRef( false );
-	useEffect(
-		() => {
-			if ( isZoomedOut ) {
-				priorContainerWidth.current = containerWidth;
-				return () => {
-					isScaleFinal.current = false;
-					if ( iframeDocument && iframeDocument.defaultView ) {
-						const { documentElement, defaultView } = iframeDocument;
-						documentElement.classList.remove( 'is-zoomed-out' );
-						documentElement.style.removeProperty(
-							'--wp-block-editor-iframe-zoom-out-scale'
-						);
-						defaultView.frameElement.style.removeProperty(
-							'--wp-block-editor-iframe-zoom-out-scale'
-						);
-						defaultView.frameElement.style.removeProperty(
-							'--wp-block-editor-iframe-zoom-out-inset'
-						);
-					}
-				};
-			}
-		},
-		// containerWidth omitted so that its value is read once when zoom out engages.
-		[ isZoomedOut, iframeDocument ]
-	);
+
+	useEffect( () => {
+		if ( ! isZoomedOut ) {
+			priorContainerWidth.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -277,7 +257,7 @@ function Iframe( {
 	useEffect( () => cleanup, [ cleanup ] );
 
 	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut || isScaleFinal.current ) {
+		if ( ! iframeDocument || ! isZoomedOut ) {
 			return;
 		}
 		const frameInlineWidth = frameSize * 2;
@@ -300,6 +280,19 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-inset',
 			`${ frameSize }px`
 		);
+
+		return () => {
+			documentElement.classList.remove( 'is-zoomed-out' );
+			documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
+			);
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
+			);
+			defaultView.frameElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-inset'
+			);
+		};
 	}, [ containerWidth, frameSize, iframeDocument, isZoomedOut ] );
 
 	const { marginLeft, marginRight, ...styleWithoutInlineMargins } =
@@ -360,12 +353,6 @@ function Iframe( {
 						);
 					}
 				} }
-				onTransitionEnd={ ( event ) => {
-					if ( event.propertyName === 'transform' && isZoomedOut ) {
-						isScaleFinal.current = true;
-					}
-					props.onTransitionEnd?.( event );
-				} }
 			>
 				{ iframeDocument &&
 					createPortal(