From 9dfd6acac4417ca898f70d3885ce086bc73be1ad Mon Sep 17 00:00:00 2001
From: Alex Lende <alex+github.com@lende.xyz>
Date: Wed, 16 Oct 2024 13:49:14 -0500
Subject: [PATCH] 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);
-}