Add mixin for handling canvas resizing

packages/base-styles/_animations.scss

@@ -41,3 +41,15 @@
 	@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: null ) {
+	$resizeAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+
+	@if $additional-transition-rules {
+		transition: $resizeAnimation, unquote($additional-transition-rules);
+	} @else {
+		transition: $resizeAnimation;
+	}
+
+	@include reduce-motion("transition");
+}

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

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

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

@@ -5,20 +5,16 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// 400ms should match the animation speed used in iframe/index.js
-	$zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-
 	// 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.
-	transition: $zoomOutAnimation, transform 0s scale 0s;
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation( "transform 0s, scale 0s, padding 0s" );
 
 	&.zoom-out-animation {
 		// 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.
-		transition: $zoomOutAnimation, transform 0s;
+		@include editor-canvas-resize-animation( "transform 0s" );
 	}
 }
 
@@ -30,7 +26,7 @@
 	$outer-container-width: var(--wp-block-editor-iframe-zoom-out-outer-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(( #{$outer-container-width} - #{ $container-width }) / 2 / #{$scale}));
+	transform: translateX(calc((#{$outer-container-width} - #{$container-width}) / 2 / #{$scale}));
 	scale: #{$scale};
 	background-color: $gray-300;