Refactor Zoom Out to scale iframe

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.";

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,8 +1,24 @@
 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;
-	@include editor-canvas-resize-animation;
+	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);
+	transform: scale(#{$scale});
+	flex-basis: calc((100% - #{$inset} * 2) / #{$scale});
+	height: calc(100% / #{$scale});
+	$inset-max-width: "(#{$max-width} - #{$inset} * 2)";
+	max-width: calc(#{$inset-max-width} / #{$scale});
 }

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;
+		}
+	}
 }

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.' ) }

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

@@ -1,68 +1,31 @@
-.block-editor-iframe__body {
-	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;
-	@include editor-canvas-resize-animation;
+	// 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 {
-	$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});
-
-	background-color: $gray-300;
-
-	// 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.
-	$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 {
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+	// 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;
 	}
 }
+
+.block-editor-iframe__body {
+	position: relative;
+}