Improve transition; revise centering; organize styles

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 }

packages/block-editor/src/components/block-canvas/style.scss

@@ -1,9 +1,26 @@
 iframe[name="editor-canvas"] {
+	position: relative;
+	inset-block: 0;
+	flex: 0 0 auto;
 	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 	display: block;
 	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});
 }

packages/block-editor/src/components/iframe/content.scss

@@ -1,29 +1,13 @@
-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
 	height: auto;
 	// 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 {