Code Quality: Improve prefix, better scope, for animations (#11752)

* Code Quality: Improve prefix, better scope, for animations This PR maybe fixes #11673, maybe fixes #11668. At least, this is the intention. It does two things: - It changes the naming scheme for all animations. Instead of having a mix of underscores and dashes for word separation, it uses BEM (to the best of my ability) to add consistency and a new naming convention for all animations. - It adds a prefix to all animations, indicating they are for the editor. Though perhaps we should have a more _admin_ specific prefix given these might one day be used outside the admin? - It moves all keyframe animations out of the mixins file, and into the edit-post style. This is because keyframe definitions don't work well with mixins and are just duplicated. This PR has been tested for all the animations I could find that were using the ones defined. But please give me a sanity check. By the way I noticed the following two animations do not appear to be used: - editor-animation__animate-fade - editor-animation__move-background Should we remove those? Or can anyone recall where they were intended to be used? * Address feedback. This retires a few animations, and moves others that are only used once to their respective scopes. * Address comment. Gallery related, in #11668 (comment). * Address feedback. * Address final point.
WordPress · Nov 14, 2018 · 88a6950 · 88a6950
1 parent b2e5ae7
commit 88a6950
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 125 deletions.
diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
@@ -1,78 +1,8 @@
-@keyframes fade-in {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
+@mixin edit-post__loading-fade-animation {
+	animation: edit-post__loading-fade-animation 1.6s ease-in-out infinite;
 }
 
-@mixin animate_fade {
-	animation: animate_fade 0.1s ease-out;
-	animation-fill-mode: forwards;
-}
-
-@mixin move_background {
-	background-size: 28px 28px;
-	animation: move_background 0.5s linear infinite;
-}
-
-@mixin loading_fade {
-	animation: loading_fade 1.6s ease-in-out infinite;
-}
-
-@mixin slide_in_right {
-	transform: translateX(+100%);
-	animation: slide_in_right 0.1s forwards;
-}
-
-@mixin slide_in_top {
-	transform: translateY(-100%);
-	animation: slide_in_top 0.1s forwards;
-}
-
-@mixin fade_in($speed: 0.2s, $delay: 0s) {
-	animation: fade-in $speed ease-out $delay;
-	animation-fill-mode: forwards;
-}
-
-@keyframes editor_region_focus {
-	from {
-		box-shadow: inset 0 0 0 0 $blue-medium-400;
-	}
-	to {
-		box-shadow: inset 0 0 0 4px $blue-medium-400;
-	}
-}
-
-@mixin region_focus($speed: 0.2s) {
-	animation: editor_region_focus $speed ease-out;
-	animation-fill-mode: forwards;
-}
-
-@keyframes rotation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-@mixin animate_rotation($speed: 1s) {
-	animation: rotation $speed infinite linear;
-}
-
-@keyframes modal-appear {
-	from {
-		margin-top: $grid-size * 4;
-	}
-	to {
-		margin-top: 0;
-	}
-}
-
-@mixin modal_appear() {
-	animation: modal-appear 0.1s ease-out;
+@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
+	animation: edit-post__fade-in-animation $speed ease-out $delay;
 	animation-fill-mode: forwards;
 }
diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss
@@ -5,7 +5,7 @@
 	margin-bottom: 0;
 
 	&.is-transient {
-		@include loading_fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	.wp-block-file__content-wrapper {

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -18,7 +18,7 @@ ul.wp-block-gallery li {
 	}
 
 	&.is-transient img {
-		@include loading_fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	.editor-rich-text {
@@ -121,3 +121,14 @@ ul.wp-block-gallery li {
 	left: 50%;
 	transform: translate(-50%, -50%);
 }
+
+// Last item always needs margins reset.
+// When block is selected, only reset the right margin of the 2nd to last item.
+.wp-block-gallery {
+	.is-selected & .blocks-gallery-image:nth-last-child(2),
+	.is-selected & .blocks-gallery-item:nth-last-child(2),
+	.is-typing & .blocks-gallery-image:nth-last-child(2),
+	.is-typing & .blocks-gallery-item:nth-last-child(2) {
+		margin-right: 0;
+	}
+}
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -114,13 +114,8 @@
 	}
 
 	// Last item always needs margins reset.
-	// When block is selected, only reset the right margin of the 2nd to last item.
 	.blocks-gallery-image:last-child,
-	.blocks-gallery-item:last-child,
-	.is-selected & .blocks-gallery-image:nth-last-child(2),
-	.is-selected & .blocks-gallery-item:nth-last-child(2),
-	.is-typing & .blocks-gallery-image:nth-last-child(2),
-	.is-typing & .blocks-gallery-item:nth-last-child(2) {
+	.blocks-gallery-item:last-child {
 		margin-right: 0;
 	}
 

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -2,7 +2,7 @@
 	position: relative;
 
 	&.is-transient img {
-		@include loading_fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	figcaption img {

diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -8,6 +8,16 @@
 		right: 0;
 		pointer-events: none;
 		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		@include region_focus(0.1s);
+		animation: editor-animation__region-focus 0.2s ease-out;
+		animation-fill-mode: forwards;
+	}
+}
+
+@keyframes editor-animation__region-focus {
+	from {
+		box-shadow: inset 0 0 0 0 $blue-medium-400;
+	}
+	to {
+		box-shadow: inset 0 0 0 4px $blue-medium-400;
 	}
 }
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -9,7 +9,7 @@
 	z-index: z-index(".components-modal__screen-overlay");
 
 	// This animates the appearance of the white background.
-	@include fade-in();
+	@include edit-post__fade-in-animation();
 }
 
 // The modal window element.
@@ -40,7 +40,17 @@
 		transform: translate(-50%, -50%);
 
 		// Animate the modal frame/contents appearing on the page.
-		@include modal_appear();
+		animation: components-modal__appear-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+	}
+}
+
+@keyframes components-modal__appear-animation {
+	from {
+		margin-top: $grid-size * 4;
+	}
+	to {
+		margin-top: 0;
 	}
 }
 

diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss
@@ -19,6 +19,15 @@
 		height: 4px;
 		border-radius: 100%;
 		transform-origin: 6px 6px;
-		@include animate_rotation;
+		animation: components-spinner__animation 1s infinite linear;
+	}
+}
+
+@keyframes components-spinner__animation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
 	}
 }
diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss
@@ -19,9 +19,16 @@ body.js.is-fullscreen-mode {
 	}
 
 	// Animations
-	@include fade_in(0.3s);
+	@include edit-post__fade-in-animation(0.3s);
 
 	.edit-post-header {
-		@include slide_in_top();
+		transform: translateY(-100%);
+		animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards;
+	}
+}
+
+@keyframes edit-post-fullscreen-mode__slide-in-animation {
+	100% {
+		transform: translateY(0%);
 	}
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -128,14 +128,21 @@
 		left: auto;
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
-		@include slide_in_right;
+		transform: translateX(+100%);
+		animation: edit-post-layout__slide-in-animation 0.1s forwards;
 
 		body.is-fullscreen-mode & {
 			top: 0;
 		}
 	}
 }
 
+@keyframes edit-post-layout__slide-in-animation {
+	100% {
+		transform: translateX(0%);
+	}
+}
+
 .edit-post-layout .editor-post-publish-panel__header-publish-button {
 	// Match the size of the Publish... button.
 	.components-button.is-large {

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -20,28 +20,15 @@
 @import "./components/visual-editor/style.scss";
 @import "./components/options-modal/style.scss";
 
-// Fade animations
-@keyframes animate_fade {
-	from {
-		opacity: 0;
-		transform: translateY(4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
 
-@keyframes move_background {
-	from {
-		background-position: 0 0;
-	}
-	to {
-		background-position: 28px 0;
-	}
-}
+/**
+ * Animations
+ */
 
-@keyframes loading_fade {
+// 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__loading-fade-animation {
 	0% {
 		opacity: 0.5;
 	}
@@ -53,15 +40,12 @@
 	}
 }
 
-@keyframes slide_in_right {
-	100% {
-		transform: translateX(0%);
+@keyframes edit-post__fade-in-animation {
+	from {
+		opacity: 0;
 	}
-}
-
-@keyframes slide_in_top {
-	100% {
-		transform: translateY(0%);
+	to {
+		opacity: 1;
 	}
 }
 

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -909,7 +909,7 @@
 		// Animate in
 		.editor-block-list__block:hover & {
 			opacity: 0;
-			@include fade_in(60ms, 0.5s);
+			@include edit-post__fade-in-animation(60ms, 0.5s);
 		}
 	}
 

diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
@@ -3,7 +3,7 @@
 	opacity: 0;
 
 	&.is-visible {
-		@include fade_in;
+		@include edit-post__fade-in-animation;
 	}
 
 	// 24px is the smallest size of a good pressable button.

diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
@@ -5,7 +5,7 @@
 	overflow: hidden;
 
 	&.is-saving {
-		animation: loading_fade 0.5s infinite;
+		animation: edit-post__loading-fade-animation 0.5s infinite;
 	}
 
 	.dashicon {

diff --git a/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap
@@ -8,9 +8,9 @@ src: url(sansation_light.woff);
 `;
 
 exports[`CSS selector wrap should ignore keyframes 1`] = `
-"@keyframes move_background {
+"@keyframes edit-post__fade-in-animation {
 from {
-background-position: 0 0;
+opacity: 0;
 }
 }"
 `;

diff --git a/packages/editor/src/editor-styles/transforms/test/wrap.js b/packages/editor/src/editor-styles/transforms/test/wrap.js
@@ -40,9 +40,9 @@ describe( 'CSS selector wrap', () => {
 	it( 'should ignore keyframes', () => {
 		const callback = wrap( '.my-namespace' );
 		const input = `
-		@keyframes move_background {
+		@keyframes edit-post__fade-in-animation {
 			from {
-				background-position: 0 0;
+				opacity: 0;
 			}
 		}`;
 		const output = traverse( input, callback );