Add useScaleCanvas: Web Animations API for zoom in/out animation

packages/base-styles/_animations.scss

@@ -41,8 +41,3 @@
 	@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
 	@include animation__fade-in($speed, $delay);
 }
-
-@mixin editor-canvas-resize-animation($additional-transition-rules...) {
-	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), $additional-transition-rules;
-	@include reduce-motion("transition");
-}

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

@@ -4,6 +4,7 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	// Handles transitions between device previews
-	@include editor-canvas-resize-animation;
+	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+	@include reduce-motion("transition");
 	background-color: $gray-300;
 }

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

@@ -4,10 +4,8 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// 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.
-	@include editor-canvas-resize-animation( transform 0s, scale 0s, padding 0s, translate 0s);
+	// Prevents a flash of background color change when entering/exiting zoom out
+	transition: background-color 400ms;
 
 	&.zoom-out-animation {
 		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
@@ -18,53 +16,48 @@
 		right: 0;
 		top: calc(-1 * #{$scroll-top});
 		bottom: 0;
-		translate: 0 calc(#{$scroll-top} - #{$scroll-top-next});
 		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
 		// and removing the scrollbar causes the content to shift.
 		overflow-y: scroll;
-
-		// 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.
-		@include editor-canvas-resize-animation( transform 0s, top 0s, bottom 0s, right 0s, left 0s );
 	}
-}
 
-.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);
-	$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((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
-	scale: #{$scale};
-	background-color: $gray-300;
+	&.is-zoomed-out {
+		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
+		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+		$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((#{$scale-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,
-	// 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-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});
+		// 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-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});
+		// 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});
 
-		> .is-root-container:not(.wp-block-post-content) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
+		body {
+			min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
 
-			> main {
+			> .is-root-container:not(.wp-block-post-content) {
 				flex: 1;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+
+				> main {
+					flex: 1;
+				}
 			}
 		}
 	}