From 4fec73e47d4295a4f15beb6bcea2d44d02e8c1d1 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 2 Aug 2024 13:03:05 -0500
Subject: [PATCH] Move editor canvas and iframe sizing transitions to shared
 mixin

---
 packages/base-styles/_animations.scss                        | 5 +++++
 packages/block-editor/src/components/block-canvas/style.scss | 1 +
 packages/block-editor/src/components/iframe/content.scss     | 3 +--
 packages/block-editor/src/components/iframe/index.js         | 1 -
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index b5e6655e660cbb..bdfd7595da8e44 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -3,3 +3,8 @@
 	animation-fill-mode: forwards;
 	@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");
+}
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index 9e924cb79bace1..1395b5c0a437d3 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -4,4 +4,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	@include editor-canvas-resize-animation;
 }
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index ff9d186be6e541..90b887993bf6db 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -24,8 +24,7 @@
 .block-editor-iframe__html {
 	border: 0 solid $gray-300;
 	transform-origin: top center;
-	transition: all  0.5s cubic-bezier(0.65, 0, 0.45, 1);
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation;
 }
 
 .block-editor-iframe__html.is-zoomed-out {
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index b0d1c872a9d586..3b0bce6d56b403 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -380,7 +380,6 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: props.style?.height,
-					transition: 'all 0.5s cubic-bezier(0.65, 0, 0.45, 1)', // Maps to the .block-editor-iframe__html transition.
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }