Rename edit-post__fade-in-animation and unify keyframe definitions (#…

…65377)

* Remove duplicate keyframe definition across packages

* Deprecate edit-post__fade-in-animation, replace with animation__fade-in

* Add animation__fade-out mixin

packages/base-styles/_animations.scss

@@ -1,5 +1,37 @@
-@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
-	animation: edit-post__fade-in-animation $speed linear $delay;
+@mixin keyframes($name) {
+	@keyframes #{$name} {
+		@content;
+	}
+}
+
+@mixin animation__fade-in($speed: 0.08s, $delay: 0s) {
+	@include keyframes(__wp-base-styles-fade-in) {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+
+	animation: __wp-base-styles-fade-in $speed linear $delay;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}
+
+@mixin animation__fade-out($speed: 0.08s, $delay: 0s) {
+	@include keyframes(__wp-base-styles-fade-out) {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+
+	animation: __wp-base-styles-fade-out $speed linear $delay;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
@@ -8,3 +40,9 @@
 	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.";
+	@include animation__fade-in($speed, $delay);
+}

packages/block-editor/src/components/list-view/style.scss

@@ -272,7 +272,7 @@
 
 	&.is-visible .block-editor-list-view-block-contents {
 		opacity: 1;
-		@include edit-post__fade-in-animation;
+		@include animation__fade-in;
 	}
 
 	.block-editor-block-icon {

packages/block-editor/src/utils/test/transform-styles.js

@@ -293,7 +293,7 @@ describe( 'transformStyles', () => {
 
 		it( 'should ignore keyframes', () => {
 			const input = `
-			@keyframes edit-post__fade-in-animation {
+			@keyframes __wp-base-styles-fade-in {
 				from {
 					opacity: 0;
 				}

packages/components/src/modal/style.scss

@@ -8,8 +8,8 @@
 	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
-	// This animates the appearance of the white background.
-	@include edit-post__fade-in-animation();
+	// This animates the appearance of the backdrop.
+	@include animation__fade-in();
 }
 
 // The modal window element.

packages/edit-post/src/style.scss

@@ -3,22 +3,6 @@
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
 @import "./components/welcome-guide/style.scss";
 
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
 body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );
 }

packages/edit-site/src/style.scss

@@ -91,20 +91,4 @@ body.js.site-editor-php {
 	}
 }
 
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since they are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
 @include wordpress-admin-schemes();

storybook/stories/playground/fullpage/style.lazy.scss

@@ -46,19 +46,3 @@
 		display: block;
 	}
 }
-
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}