From 35063744d71276fd88ae6f072307716bb7127da6 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] 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..d760aff2d0fa6e 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 {
+	$maxWidth: 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});
+	$insetMaxWidth: "(#{$maxWidth} - #{$inset} * 2)";
+	max-width: calc(#{$insetMaxWidth} / #{$scale});
 }
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 90d0223270c824..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 {
-	$maxWidth: 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});
-	$insetMaxWidth: "(#{$maxWidth} - #{$inset} * 2)";
-	max-width: calc(#{$insetMaxWidth} / #{$scale});
-	margin-inline: calc(max(-50% + #{$inset}, -0.5 * #{$insetMaxWidth}) / #{$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 {