Move editor canvas and iframe sizing transitions to shared mixin

WordPress · Aug 2, 2024 · 4fec73e · 4fec73e
1 parent 1a96985
commit 4fec73e
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }