From d74076fb8afec4748c69f2aca2cab297675b19b8 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex+github.com@lende.xyz>
Date: Wed, 16 Oct 2024 14:00:16 -0500
Subject: [PATCH 1/5] Revert "Zoom out: fix scaling issues (#65998)"

This reverts commit 12a729497209ba0a16cf77872859ac1091ecf96f.
---
 .../src/components/iframe/content.scss          | 10 ++++------
 .../block-editor/src/components/iframe/index.js |  8 +-------
 .../src/components/iframe/style.scss            | 17 -----------------
 3 files changed, 5 insertions(+), 30 deletions(-)
 delete mode 100644 packages/block-editor/src/components/iframe/style.scss

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index e884de1e6f2573..0e7ee7e59d5fe9 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -23,6 +23,7 @@
 }
 
 .block-editor-iframe__html {
+	border: 0 solid $gray-300;
 	transform-origin: top center;
 	@include editor-canvas-resize-animation;
 }
@@ -38,17 +39,14 @@
 
 	background-color: $gray-300;
 
+	padding: calc(#{$frame-size} / #{$scale}) 0;
+
 	// 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-frame-height: calc(2 * #{$frame-size});
 	$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});
 
 	body {
 		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 92c66f954704e3..3e022cf95ae556 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -306,19 +306,13 @@ function Iframe( {
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
 		const maxWidth = 750;
-		// 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',
 			scale === 'default'
-				? ( Math.min( containerWidth, maxWidth ) -
-						parseInt( frameSize ) * 2 ) /
+				? Math.min( containerWidth, maxWidth ) /
 						prevContainerWidthRef.current
 				: scale
 		);
-
-		// 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
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
deleted file mode 100644
index dcddcdf0950a45..00000000000000
--- a/packages/block-editor/src/components/iframe/style.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.block-editor-iframe__container {
-	width: 100%;
-	height: 100%;
-	overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-	height: 100%;
-}
-
-.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;
-	// This is to offset the movement of the iframe when we open sidebars
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
-}

From 9e934cef82ef4dae2bc7854c536e554abce002cd Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 9 Oct 2024 18:00:11 +0200
Subject: [PATCH 2/5] BlockCanvas: Fix the height prop and width of the block
 editor (#65977)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
---
 .../src/components/iframe/content.scss        | 19 -------------------
 .../src/components/iframe/index.js            |  1 +
 .../src/components/iframe/style.scss          | 16 ++++++++++++++++
 packages/block-editor/src/style.scss          |  1 +
 storybook/stories/playground/box/index.js     |  2 +-
 5 files changed, 19 insertions(+), 20 deletions(-)
 create mode 100644 packages/block-editor/src/components/iframe/style.scss

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 0e7ee7e59d5fe9..7e532235fcc899 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -3,25 +3,6 @@
 	border: 0.01px solid transparent;
 }
 
-.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;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 3e022cf95ae556..fa7ce26526f410 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -380,6 +380,7 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
+					border: 0,
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
new file mode 100644
index 00000000000000..e460df3ab3e0a9
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -0,0 +1,16 @@
+.block-editor-iframe__container {
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+	height: 100%;
+}
+
+.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);
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index e6ec77b55a0ec5..512169351fe1fb 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -30,6 +30,7 @@
 @import "./components/global-styles/style.scss";
 @import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
+@import "./components/iframe/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-controls-tabs/style.scss";
diff --git a/storybook/stories/playground/box/index.js b/storybook/stories/playground/box/index.js
index 3fb3c3b5862c47..cca522a90c1441 100644
--- a/storybook/stories/playground/box/index.js
+++ b/storybook/stories/playground/box/index.js
@@ -37,7 +37,7 @@ export default function EditorBox() {
 				} }
 			>
 				<BlockToolbar hideDragHandle />
-				<BlockCanvas height="100%" styles={ editorStyles } />
+				<BlockCanvas height="500px" styles={ editorStyles } />
 			</BlockEditorProvider>
 		</div>
 	);

From e10ae438e9b09a36b90c3425b4b26b1d4e8c9a18 Mon Sep 17 00:00:00 2001
From: Maggie <maggie.cabrera@automattic.com>
Date: Thu, 10 Oct 2024 17:51:44 +0200
Subject: [PATCH 3/5] Zoom out: fix scaling issues (#65998)

* changed from using borders to use pseudo elements

* added comments

* Include frame size in the scaling calculation

Instead of adding the frame size as a border (which causes reflow issues), include the frame size in the scaling calculation so there's always a left/right gutter of the frame size.

* Account for scaling in the frame height

* Calculation in CSS

* Revert "Calculation in CSS"

This reverts commit 38de9fc24b6ee46ae82b879416026a7f5b59c7f2.

* Add comment about why the calculation for scaling needs to happen in the JS

* Force px value for frameSize

* Restore previous frameSize var setting

* Add back line break

* Use padding top/bottom instead of before/after for top/bottom frame

* Remove more before/after css since we are using padding

---------

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: Alex Lende <alex+github.com@lende.xyz>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
---
 .../block-editor/src/components/iframe/content.scss    | 10 ++++++----
 packages/block-editor/src/components/iframe/index.js   |  8 +++++++-
 packages/block-editor/src/components/iframe/style.scss |  1 +
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 7e532235fcc899..069274e66bdfd0 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -4,7 +4,6 @@
 }
 
 .block-editor-iframe__html {
-	border: 0 solid $gray-300;
 	transform-origin: top center;
 	@include editor-canvas-resize-animation;
 }
@@ -20,14 +19,17 @@
 
 	background-color: $gray-300;
 
-	padding: calc(#{$frame-size} / #{$scale}) 0;
-
 	// 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});
+	$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});
 
 	body {
 		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index fa7ce26526f410..d234339909a5c1 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -306,13 +306,19 @@ function Iframe( {
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
 		const maxWidth = 750;
+		// 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',
 			scale === 'default'
-				? Math.min( containerWidth, maxWidth ) /
+				? ( Math.min( containerWidth, maxWidth ) -
+						parseInt( frameSize ) * 2 ) /
 						prevContainerWidthRef.current
 				: scale
 		);
+
+		// 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
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
index e460df3ab3e0a9..dcddcdf0950a45 100644
--- a/packages/block-editor/src/components/iframe/style.scss
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -12,5 +12,6 @@
 	$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;
+	// This is to offset the movement of the iframe when we open sidebars
 	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
 }

From 7a8176a0108973ac2d30bb4853ea66448e52063b Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 15 Oct 2024 09:15:07 -0500
Subject: [PATCH 4/5] Position scaled html within available container space
 (#66034)

* Positions the iframed HTML canvas via translateX rather than margin-left on the iframe in order to have the scrollbar for the iframe available instead of hidden off canvas. This also fixes issues with the vertical toolbar and inserters not rerendering to their new positions.

* Renames prevContainerWidthRef to initialContainerWidth so it's clearer that this is the point when zoom out was initialized, then renames the CSS vars prev-container-width to outer-container-width, using the larger value of containerWidth or initialContainerWidth so it can be more consistently named.

* Force largest available window size to scale from
If you started with a sidebar open, then entered zoom out, then closed the sidebar, your scaled canvas would be too large. It should match the same size as if you start with no sidebars open, then enter zoom out. This also fixes an issue where scaling could be larger than 1.

* Only animate scaling on entry and exit of zoom out mode to improve animations when opening and closing sidebars.

* Known divergence: When starting from a smaller canvas (sidebars open), entering zoom out, then closing sidebars, there will be reflow on the canvas.

---------

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: dhruvang21 <dhruvang21@git.wordpress.org>
Co-authored-by: AhmarZaidi <ahmarzaidi@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
---
 packages/base-styles/_animations.scss         |  5 --
 .../src/components/block-canvas/style.scss    |  1 -
 .../src/components/iframe/content.scss        | 25 +++++--
 .../src/components/iframe/index.js            | 67 +++++++++++++++----
 .../src/components/iframe/style.scss          | 11 +--
 5 files changed, 81 insertions(+), 28 deletions(-)

diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index 87e5f035f46a6c..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.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-	@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..9e924cb79bace1 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,5 +4,4 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
-	@include editor-canvas-resize-animation;
 }
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 069274e66bdfd0..4a0e2d519f914b 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -5,7 +5,21 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	@include editor-canvas-resize-animation;
+	// 400ms should match the animation speed used in iframe/index.js
+	$zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+
+	// 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.
+	transition: $zoomOutAnimation, transform 0s scale 0s;
+	@include reduce-motion("transition");
+
+	&.zoom-out-animation {
+		// 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.
+		transition: $zoomOutAnimation, transform 0s;
+	}
 }
 
 .block-editor-iframe__html.is-zoomed-out {
@@ -13,10 +27,11 @@
 	$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});
-
+	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-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(( #{$outer-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,
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index d234339909a5c1..b72d86ef8e0f8f 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidthRef = useRef();
+	const initialContainerWidth = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,7 +243,7 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidthRef.current = containerWidth;
+			initialContainerWidth.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
@@ -298,14 +298,49 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
+	const zoomOutAnimationClassnameRef = useRef( null );
+	const handleZoomOutAnimationClassname = () => {
+		clearTimeout( zoomOutAnimationClassnameRef.current );
+
+		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
+
+		zoomOutAnimationClassnameRef.current = setTimeout( () => {
+			iframeDocument.documentElement.classList.remove(
+				'zoom-out-animation'
+			);
+		}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+	};
+
+	// 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 || ! isZoomedOut ) {
 			return;
 		}
 
+		handleZoomOutAnimationClassname();
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
+		return () => {
+			handleZoomOutAnimationClassname();
+			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		};
+	}, [ iframeDocument, isZoomedOut ] );
+
+	// Calculate the scaling and CSS variables for the zoom out canvas
+	useEffect( () => {
+		if ( ! iframeDocument || ! isZoomedOut ) {
+			return;
+		}
+
 		const maxWidth = 750;
+		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
+		// initialContainerWidth 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.
@@ -314,7 +349,10 @@ function Iframe( {
 			scale === 'default'
 				? ( Math.min( containerWidth, maxWidth ) -
 						parseInt( frameSize ) * 2 ) /
-						prevContainerWidthRef.current
+						Math.max(
+							initialContainerWidth.current,
+							containerWidth
+						)
 				: scale
 		);
 
@@ -336,13 +374,16 @@ function Iframe( {
 			`${ containerWidth }px`
 		);
 		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidthRef.current }px`
+			'--wp-block-editor-iframe-zoom-out-outer-container-width',
+			`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
 		);
 
-		return () => {
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		// iframeDocument.documentElement.style.setProperty(
+		// 	'--wp-block-editor-iframe-zoom-out-outer-container-width',
+		// 	`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
+		// );
 
+		return () => {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-scale'
 			);
@@ -359,7 +400,7 @@ function Iframe( {
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
 			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-prev-container-width'
+				'--wp-block-editor-iframe-zoom-out-outer-container-width'
 			);
 		};
 	}, [
@@ -460,10 +501,12 @@ function Iframe( {
 					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`,
+					'--wp-block-editor-iframe-zoom-out-outer-container-width':
+						isZoomedOut &&
+						`${ Math.max(
+							initialContainerWidth.current,
+							containerWidth
+						) }px`,
 				} }
 			>
 				{ iframe }
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
index dcddcdf0950a45..d05be2f3977b9f 100644
--- a/packages/block-editor/src/components/iframe/style.scss
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -9,9 +9,10 @@
 }
 
 .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;
-	// This is to offset the movement of the iframe when we open sidebars
-	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
+	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
+	width: $outer-container-width;
+	// Position the iframe so that it is always aligned with the right side so that
+	// the scrollbar is always visible on the right side
+	position: absolute;
+	right: 0;
 }

From 65bff4ee706c71a85fe3662f06a4e55c014590ad Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 16 Oct 2024 16:49:00 -0500
Subject: [PATCH 5/5] Fix/html scale code quality (#66181)

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ajlende <ajlende@git.wordpress.org>
---
 .../src/components/iframe/content.scss        |  4 +-
 .../src/components/iframe/index.js            | 57 +++++++++----------
 .../src/components/iframe/style.scss          |  4 +-
 3 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 4a0e2d519f914b..47eac022bf52ac 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -27,10 +27,10 @@
 	$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);
-	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width);
+	$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(( #{$outer-container-width} - #{ $container-width }) / 2 / #{$scale}));
+	transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
 	scale: #{$scale};
 	background-color: $gray-300;
 
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index b72d86ef8e0f8f..b14514f934fb3e 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const initialContainerWidth = useRef();
+	const initialContainerWidth = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -247,6 +247,11 @@ function Iframe( {
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
+	const scaleContainerWidth = Math.max(
+		initialContainerWidth.current,
+		containerWidth
+	);
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -299,17 +304,6 @@ function Iframe( {
 	useEffect( () => cleanup, [ cleanup ] );
 
 	const zoomOutAnimationClassnameRef = useRef( null );
-	const handleZoomOutAnimationClassname = () => {
-		clearTimeout( zoomOutAnimationClassnameRef.current );
-
-		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
-
-		zoomOutAnimationClassnameRef.current = setTimeout( () => {
-			iframeDocument.documentElement.classList.remove(
-				'zoom-out-animation'
-			);
-		}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
-	};
 
 	// 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
@@ -320,6 +314,20 @@ function Iframe( {
 			return;
 		}
 
+		const handleZoomOutAnimationClassname = () => {
+			clearTimeout( zoomOutAnimationClassnameRef.current );
+
+			iframeDocument.documentElement.classList.add(
+				'zoom-out-animation'
+			);
+
+			zoomOutAnimationClassnameRef.current = setTimeout( () => {
+				iframeDocument.documentElement.classList.remove(
+					'zoom-out-animation'
+				);
+			}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
+		};
+
 		handleZoomOutAnimationClassname();
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
@@ -349,10 +357,7 @@ function Iframe( {
 			scale === 'default'
 				? ( Math.min( containerWidth, maxWidth ) -
 						parseInt( frameSize ) * 2 ) /
-						Math.max(
-							initialContainerWidth.current,
-							containerWidth
-						)
+						scaleContainerWidth
 				: scale
 		);
 
@@ -374,15 +379,10 @@ function Iframe( {
 			`${ containerWidth }px`
 		);
 		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-outer-container-width',
-			`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
+			'--wp-block-editor-iframe-zoom-out-scale-container-width',
+			`${ scaleContainerWidth }px`
 		);
 
-		// iframeDocument.documentElement.style.setProperty(
-		// 	'--wp-block-editor-iframe-zoom-out-outer-container-width',
-		// 	`${ Math.max( initialContainerWidth.current, containerWidth ) }px`
-		// );
-
 		return () => {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-scale'
@@ -400,7 +400,7 @@ function Iframe( {
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
 			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-outer-container-width'
+				'--wp-block-editor-iframe-zoom-out-scale-container-width'
 			);
 		};
 	}, [
@@ -412,6 +412,7 @@ function Iframe( {
 		containerWidth,
 		windowInnerWidth,
 		isZoomedOut,
+		scaleContainerWidth,
 	] );
 
 	// Make sure to not render the before and after focusable div elements in view
@@ -501,12 +502,8 @@ function Iframe( {
 					isZoomedOut && 'is-zoomed-out'
 				) }
 				style={ {
-					'--wp-block-editor-iframe-zoom-out-outer-container-width':
-						isZoomedOut &&
-						`${ Math.max(
-							initialContainerWidth.current,
-							containerWidth
-						) }px`,
+					'--wp-block-editor-iframe-zoom-out-scale-container-width':
+						isZoomedOut && `${ scaleContainerWidth }px`,
 				} }
 			>
 				{ iframe }
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
index d05be2f3977b9f..5dd30c338057e2 100644
--- a/packages/block-editor/src/components/iframe/style.scss
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -9,8 +9,8 @@
 }
 
 .block-editor-iframe__scale-container.is-zoomed-out {
-	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
-	width: $outer-container-width;
+	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+	width: $scale-container-width;
 	// Position the iframe so that it is always aligned with the right side so that
 	// the scrollbar is always visible on the right side
 	position: absolute;