From b87c5e91236a1257f745b282e5b021975a6c3b7d Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 12 Nov 2018 10:12:13 +0100
Subject: [PATCH 1/5] 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?
---
 assets/stylesheets/_animations.scss           | 72 +++++--------------
 packages/block-library/src/file/editor.scss   |  2 +-
 .../block-library/src/gallery/editor.scss     |  2 +-
 packages/block-library/src/image/editor.scss  |  2 +-
 .../higher-order/navigate-regions/style.scss  |  2 +-
 packages/components/src/modal/style.scss      |  4 +-
 packages/components/src/spinner/style.scss    |  2 +-
 .../src/components/fullscreen-mode/style.scss |  4 +-
 .../src/components/layout/style.scss          |  2 +-
 packages/edit-post/src/style.scss             | 54 ++++++++++++--
 .../src/components/block-list/style.scss      |  2 +-
 .../src/components/block-mover/style.scss     |  2 +-
 .../components/post-saved-state/style.scss    |  2 +-
 .../test/__snapshots__/wrap.js.snap           |  2 +-
 .../src/editor-styles/transforms/test/wrap.js |  2 +-
 15 files changed, 81 insertions(+), 75 deletions(-)

diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
index 7b14a7036e6d25..2e4917a00766ea 100644
--- a/assets/stylesheets/_animations.scss
+++ b/assets/stylesheets/_animations.scss
@@ -1,78 +1,42 @@
-@keyframes fade-in {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-@mixin animate_fade {
-	animation: animate_fade 0.1s ease-out;
+@mixin editor-animation__animate-fade {
+	animation: editor-animation__animate-fade 0.1s ease-out;
 	animation-fill-mode: forwards;
 }
 
-@mixin move_background {
+@mixin editor-animation__move-background {
 	background-size: 28px 28px;
-	animation: move_background 0.5s linear infinite;
+	animation: editor-animation__move-background 0.5s linear infinite;
 }
 
-@mixin loading_fade {
-	animation: loading_fade 1.6s ease-in-out infinite;
+@mixin editor-animation__loading-fade {
+	animation: editor-animation__loading-fade 1.6s ease-in-out infinite;
 }
 
-@mixin slide_in_right {
+@mixin editor-animation__slide-in-right {
 	transform: translateX(+100%);
-	animation: slide_in_right 0.1s forwards;
+	animation: editor-animation__slide-in-right 0.1s forwards;
 }
 
-@mixin slide_in_top {
+@mixin editor-animation__slide-in-top {
 	transform: translateY(-100%);
-	animation: slide_in_top 0.1s forwards;
+	animation: editor-animation__slide-in-top 0.1s forwards;
 }
 
-@mixin fade_in($speed: 0.2s, $delay: 0s) {
-	animation: fade-in $speed ease-out $delay;
+@mixin editor-animation__fade-in($speed: 0.2s, $delay: 0s) {
+	animation: editor-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;
+@mixin editor-animation__region-focus($speed: 0.2s) {
+	animation: editor-animation__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 editor-animation__rotation($speed: 1s) {
+	animation: editor-animation__rotation $speed infinite linear;
 }
 
-@mixin modal_appear() {
-	animation: modal-appear 0.1s ease-out;
+@mixin editor-animation__modal-appear() {
+	animation: editor-animation__modal-appear 0.1s ease-out;
 	animation-fill-mode: forwards;
 }
diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss
index 194fe3c62cd6e0..e10d75c789844a 100644
--- 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 editor-animation__loading-fade;
 	}
 
 	.wp-block-file__content-wrapper {
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 26ea875564805b..278e6d1b9f0107 100644
--- 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 editor-animation__loading-fade;
 	}
 
 	.editor-rich-text {
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 5e0135fe3ebd60..687e34bcbbdf09 100644
--- 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 editor-animation__loading-fade;
 	}
 
 	figcaption img {
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 21f8f8b5a728b8..15b30df826dcc8 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -8,6 +8,6 @@
 		right: 0;
 		pointer-events: none;
 		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		@include region_focus(0.1s);
+		@include editor-animation__region-focus(0.1s);
 	}
 }
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 04d87316c383b0..d4fd07ba53f41a 100644
--- 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 editor-animation__fade-in();
 }
 
 // The modal window element.
@@ -40,7 +40,7 @@
 		transform: translate(-50%, -50%);
 
 		// Animate the modal frame/contents appearing on the page.
-		@include modal_appear();
+		@include editor_animation__modal-appear();
 	}
 }
 
diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss
index a8b34fdba0573b..f7d897509e9a58 100644
--- a/packages/components/src/spinner/style.scss
+++ b/packages/components/src/spinner/style.scss
@@ -19,6 +19,6 @@
 		height: 4px;
 		border-radius: 100%;
 		transform-origin: 6px 6px;
-		@include animate_rotation;
+		@include editor-animation__rotation;
 	}
 }
diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss
index 4afd36c4b8eb6f..d3435dfeb584f0 100644
--- a/packages/edit-post/src/components/fullscreen-mode/style.scss
+++ b/packages/edit-post/src/components/fullscreen-mode/style.scss
@@ -19,9 +19,9 @@ body.is-fullscreen-mode {
 	}
 
 	// Animations
-	@include fade_in(0.3s);
+	@include editor-animation__fade-in(0.3s);
 
 	.edit-post-header {
-		@include slide_in_top();
+		@include editor-animation__slide-in-top();
 	}
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index ae925dbdd181e0..c4bba24ae11349 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -128,7 +128,7 @@
 		left: auto;
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
-		@include slide_in_right;
+		@include editor-animation__slide-in-right;
 
 		body.is-fullscreen-mode & {
 			top: 0;
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 23c040743210c9..d0cbcd3ba77b24 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -20,8 +20,15 @@
 @import "./components/visual-editor/style.scss";
 @import "./components/options-modal/style.scss";
 
-// Fade animations
-@keyframes animate_fade {
+
+/**
+ * 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 editor-animation__animate-fade {
 	from {
 		opacity: 0;
 		transform: translateY(4px);
@@ -32,7 +39,7 @@
 	}
 }
 
-@keyframes move_background {
+@keyframes editor-animation__move-background {
 	from {
 		background-position: 0 0;
 	}
@@ -41,7 +48,7 @@
 	}
 }
 
-@keyframes loading_fade {
+@keyframes editor-animation__loading-fade {
 	0% {
 		opacity: 0.5;
 	}
@@ -53,17 +60,52 @@
 	}
 }
 
-@keyframes slide_in_right {
+@keyframes editor-animation__slide-in-right {
 	100% {
 		transform: translateX(0%);
 	}
 }
 
-@keyframes slide_in_top {
+@keyframes editor-animation__slide-in-top {
 	100% {
 		transform: translateY(0%);
 	}
 }
+@keyframes editor-animation__fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@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;
+	}
+}
+
+@keyframes editor-animation__rotation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes editor-animation__modal-appear {
+	from {
+		margin-top: $grid-size * 4;
+	}
+	to {
+		margin-top: 0;
+	}
+}
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 0413805e023aba..08a2dc2e084267 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -901,7 +901,7 @@
 		// Animate in
 		.editor-block-list__block:hover & {
 			opacity: 0;
-			@include fade_in(60ms, 0.5s);
+			@include editor-animation__fade-in(60ms, 0.5s);
 		}
 	}
 
diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
index ee793843e2ebe4..add0ae46fea91c 100644
--- 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 editor-animation__fade-in;
 	}
 
 	// 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
index 0b74a6820fff54..9cfcdff6b1ea71 100644
--- 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: editor-animation__loading-fade 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
index 868585dc2952ae..b324a2a554ef98 100644
--- 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,7 +8,7 @@ src: url(sansation_light.woff);
 `;
 
 exports[`CSS selector wrap should ignore keyframes 1`] = `
-"@keyframes move_background {
+"@keyframes editor-animation__move-background {
 from {
 background-position: 0 0;
 }
diff --git a/packages/editor/src/editor-styles/transforms/test/wrap.js b/packages/editor/src/editor-styles/transforms/test/wrap.js
index ba2e02cd6b00a0..d510fc69091c87 100644
--- a/packages/editor/src/editor-styles/transforms/test/wrap.js
+++ b/packages/editor/src/editor-styles/transforms/test/wrap.js
@@ -40,7 +40,7 @@ describe( 'CSS selector wrap', () => {
 	it( 'should ignore keyframes', () => {
 		const callback = wrap( '.my-namespace' );
 		const input = `
-		@keyframes move_background {
+		@keyframes editor-animation__move-background {
 			from {
 				background-position: 0 0;
 			}

From f17a91ac44ed815d5c19498e0f2e32e52ad9f4a5 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 12 Nov 2018 11:48:16 +0100
Subject: [PATCH 2/5] Address feedback.

This retires a few animations, and moves others that are only used once to their respective scopes.
---
 assets/stylesheets/_animations.scss           | 29 -----------
 .../higher-order/navigate-regions/style.scss  | 12 ++++-
 packages/components/src/spinner/style.scss    | 11 ++++-
 .../src/components/fullscreen-mode/style.scss |  9 +++-
 .../src/components/layout/style.scss          |  9 +++-
 packages/edit-post/src/style.scss             | 49 -------------------
 .../test/__snapshots__/wrap.js.snap           |  4 +-
 .../src/editor-styles/transforms/test/wrap.js |  4 +-
 8 files changed, 41 insertions(+), 86 deletions(-)

diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
index 2e4917a00766ea..c40acc778d32c0 100644
--- a/assets/stylesheets/_animations.scss
+++ b/assets/stylesheets/_animations.scss
@@ -1,41 +1,12 @@
-@mixin editor-animation__animate-fade {
-	animation: editor-animation__animate-fade 0.1s ease-out;
-	animation-fill-mode: forwards;
-}
-
-@mixin editor-animation__move-background {
-	background-size: 28px 28px;
-	animation: editor-animation__move-background 0.5s linear infinite;
-}
-
 @mixin editor-animation__loading-fade {
 	animation: editor-animation__loading-fade 1.6s ease-in-out infinite;
 }
 
-@mixin editor-animation__slide-in-right {
-	transform: translateX(+100%);
-	animation: editor-animation__slide-in-right 0.1s forwards;
-}
-
-@mixin editor-animation__slide-in-top {
-	transform: translateY(-100%);
-	animation: editor-animation__slide-in-top 0.1s forwards;
-}
-
 @mixin editor-animation__fade-in($speed: 0.2s, $delay: 0s) {
 	animation: editor-animation__fade-in $speed ease-out $delay;
 	animation-fill-mode: forwards;
 }
 
-@mixin editor-animation__region-focus($speed: 0.2s) {
-	animation: editor-animation__region-focus $speed ease-out;
-	animation-fill-mode: forwards;
-}
-
-@mixin editor-animation__rotation($speed: 1s) {
-	animation: editor-animation__rotation $speed infinite linear;
-}
-
 @mixin editor-animation__modal-appear() {
 	animation: editor-animation__modal-appear 0.1s ease-out;
 	animation-fill-mode: forwards;
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 15b30df826dcc8..3d50aef11067ff 100644
--- 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 editor-animation__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/spinner/style.scss b/packages/components/src/spinner/style.scss
index f7d897509e9a58..3682c7d2bfe9de 100644
--- 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 editor-animation__rotation;
+		animation: editor-animation__rotation 1s infinite linear;
+	}
+}
+
+@keyframes editor-animation__rotation {
+	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
index d3435dfeb584f0..10e2a029aa57ca 100644
--- a/packages/edit-post/src/components/fullscreen-mode/style.scss
+++ b/packages/edit-post/src/components/fullscreen-mode/style.scss
@@ -22,6 +22,13 @@ body.is-fullscreen-mode {
 	@include editor-animation__fade-in(0.3s);
 
 	.edit-post-header {
-		@include editor-animation__slide-in-top();
+		transform: translateY(-100%);
+		animation: editor-animation__slide-in-top 0.1s forwards;
+	}
+}
+
+@keyframes editor-animation__slide-in-top {
+	100% {
+		transform: translateY(0%);
 	}
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index c4bba24ae11349..636f5b2788fa72 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -128,7 +128,8 @@
 		left: auto;
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
-		@include editor-animation__slide-in-right;
+		transform: translateX(+100%);
+		animation: editor-animation__slide-in-right 0.1s forwards;
 
 		body.is-fullscreen-mode & {
 			top: 0;
@@ -136,6 +137,12 @@
 	}
 }
 
+@keyframes editor-animation__slide-in-right {
+	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
index d0cbcd3ba77b24..3f75258824ba84 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -28,26 +28,6 @@
 // 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 editor-animation__animate-fade {
-	from {
-		opacity: 0;
-		transform: translateY(4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@keyframes editor-animation__move-background {
-	from {
-		background-position: 0 0;
-	}
-	to {
-		background-position: 28px 0;
-	}
-}
-
 @keyframes editor-animation__loading-fade {
 	0% {
 		opacity: 0.5;
@@ -60,17 +40,6 @@
 	}
 }
 
-@keyframes editor-animation__slide-in-right {
-	100% {
-		transform: translateX(0%);
-	}
-}
-
-@keyframes editor-animation__slide-in-top {
-	100% {
-		transform: translateY(0%);
-	}
-}
 @keyframes editor-animation__fade-in {
 	from {
 		opacity: 0;
@@ -80,24 +49,6 @@
 	}
 }
 
-@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;
-	}
-}
-
-@keyframes editor-animation__rotation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
 @keyframes editor-animation__modal-appear {
 	from {
 		margin-top: $grid-size * 4;
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
index b324a2a554ef98..b37cc4f030c2c8 100644
--- 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 editor-animation__move-background {
+"@keyframes editor-animation__fade-in {
 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
index d510fc69091c87..46619d2d581cb4 100644
--- 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 editor-animation__move-background {
+		@keyframes editor-animation__fade-in {
 			from {
-				background-position: 0 0;
+				opacity: 0;
 			}
 		}`;
 		const output = traverse( input, callback );

From 8f232ce10762a8a42b873cfec1d305be59009646 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 13 Nov 2018 12:04:13 +0100
Subject: [PATCH 3/5] Address comment.

Gallery related, in https://github.com/WordPress/gutenberg/issues/11668#issuecomment-438007004.
---
 packages/block-library/src/gallery/editor.scss | 11 +++++++++++
 packages/block-library/src/gallery/style.scss  |  7 +------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 278e6d1b9f0107..5666912b84d1bc 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -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
index a43d08046bb5e4..26053298a3b3b7 100644
--- 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;
 	}
 

From 097e10fb1535b0c2392184ea3fb8d2583e655117 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 14 Nov 2018 11:19:55 +0100
Subject: [PATCH 4/5] Address feedback.

---
 assets/stylesheets/_animations.scss                | 13 ++++---------
 packages/block-library/src/file/editor.scss        |  2 +-
 packages/block-library/src/gallery/editor.scss     |  2 +-
 packages/block-library/src/image/editor.scss       |  2 +-
 packages/components/src/modal/style.scss           | 14 ++++++++++++--
 packages/components/src/spinner/style.scss         |  4 ++--
 .../src/components/fullscreen-mode/style.scss      |  6 +++---
 .../edit-post/src/components/layout/style.scss     |  4 ++--
 packages/edit-post/src/style.scss                  | 13 ++-----------
 .../editor/src/components/block-list/style.scss    |  2 +-
 .../editor/src/components/block-mover/style.scss   |  2 +-
 .../src/components/post-saved-state/style.scss     |  2 +-
 .../transforms/test/__snapshots__/wrap.js.snap     |  2 +-
 .../src/editor-styles/transforms/test/wrap.js      |  2 +-
 14 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
index c40acc778d32c0..755161bc852ff5 100644
--- a/assets/stylesheets/_animations.scss
+++ b/assets/stylesheets/_animations.scss
@@ -1,13 +1,8 @@
-@mixin editor-animation__loading-fade {
-	animation: editor-animation__loading-fade 1.6s ease-in-out infinite;
+@mixin edit-post__loading-fade-animation {
+	animation: edit-post__loading-fade-animation 1.6s ease-in-out infinite;
 }
 
-@mixin editor-animation__fade-in($speed: 0.2s, $delay: 0s) {
-	animation: editor-animation__fade-in $speed ease-out $delay;
-	animation-fill-mode: forwards;
-}
-
-@mixin editor-animation__modal-appear() {
-	animation: editor-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
index e10d75c789844a..25e78effbd528a 100644
--- 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 editor-animation__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
index 5666912b84d1bc..09cffa82ae94f7 100644
--- 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 editor-animation__loading-fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	.editor-rich-text {
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 687e34bcbbdf09..944eacbd0b650f 100644
--- 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 editor-animation__loading-fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	figcaption img {
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index d4fd07ba53f41a..eebd7142e780d6 100644
--- 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 editor-animation__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 editor_animation__modal-appear();
+		animation: edit-post__modal-appear-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+	}
+}
+
+@keyframes edit-post__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
index 3682c7d2bfe9de..286b8204edd7d5 100644
--- a/packages/components/src/spinner/style.scss
+++ b/packages/components/src/spinner/style.scss
@@ -19,11 +19,11 @@
 		height: 4px;
 		border-radius: 100%;
 		transform-origin: 6px 6px;
-		animation: editor-animation__rotation 1s infinite linear;
+		animation: components-spinner__animation 1s infinite linear;
 	}
 }
 
-@keyframes editor-animation__rotation {
+@keyframes components-spinner__animation {
 	from {
 		transform: rotate(0deg);
 	}
diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss
index 10e2a029aa57ca..ecc3c05ad251cf 100644
--- a/packages/edit-post/src/components/fullscreen-mode/style.scss
+++ b/packages/edit-post/src/components/fullscreen-mode/style.scss
@@ -19,15 +19,15 @@ body.is-fullscreen-mode {
 	}
 
 	// Animations
-	@include editor-animation__fade-in(0.3s);
+	@include edit-post__fade-in-animation(0.3s);
 
 	.edit-post-header {
 		transform: translateY(-100%);
-		animation: editor-animation__slide-in-top 0.1s forwards;
+		animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards;
 	}
 }
 
-@keyframes editor-animation__slide-in-top {
+@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
index 636f5b2788fa72..0cd4a03af0dfeb 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -129,7 +129,7 @@
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
 		transform: translateX(+100%);
-		animation: editor-animation__slide-in-right 0.1s forwards;
+		animation: edit-post-layout__slide-in-animation 0.1s forwards;
 
 		body.is-fullscreen-mode & {
 			top: 0;
@@ -137,7 +137,7 @@
 	}
 }
 
-@keyframes editor-animation__slide-in-right {
+@keyframes edit-post-layout__slide-in-animation {
 	100% {
 		transform: translateX(0%);
 	}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 3f75258824ba84..8dd038300daea3 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -28,7 +28,7 @@
 // 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 editor-animation__loading-fade {
+@keyframes edit-post__loading-fade-animation {
 	0% {
 		opacity: 0.5;
 	}
@@ -40,7 +40,7 @@
 	}
 }
 
-@keyframes editor-animation__fade-in {
+@keyframes edit-post__fade-in-animation {
 	from {
 		opacity: 0;
 	}
@@ -49,15 +49,6 @@
 	}
 }
 
-@keyframes editor-animation__modal-appear {
-	from {
-		margin-top: $grid-size * 4;
-	}
-	to {
-		margin-top: 0;
-	}
-}
-
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
 html.wp-toolbar {
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 08a2dc2e084267..ff0d52da9ed78e 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -901,7 +901,7 @@
 		// Animate in
 		.editor-block-list__block:hover & {
 			opacity: 0;
-			@include editor-animation__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
index add0ae46fea91c..8c6a0b6e4136cb 100644
--- 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 editor-animation__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
index 9cfcdff6b1ea71..68ca157e2077d4 100644
--- 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: editor-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
index b37cc4f030c2c8..873091eacb77d8 100644
--- 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,7 +8,7 @@ src: url(sansation_light.woff);
 `;
 
 exports[`CSS selector wrap should ignore keyframes 1`] = `
-"@keyframes editor-animation__fade-in {
+"@keyframes edit-post__fade-in-animation {
 from {
 opacity: 0;
 }
diff --git a/packages/editor/src/editor-styles/transforms/test/wrap.js b/packages/editor/src/editor-styles/transforms/test/wrap.js
index 46619d2d581cb4..5500d4a747e41a 100644
--- a/packages/editor/src/editor-styles/transforms/test/wrap.js
+++ b/packages/editor/src/editor-styles/transforms/test/wrap.js
@@ -40,7 +40,7 @@ describe( 'CSS selector wrap', () => {
 	it( 'should ignore keyframes', () => {
 		const callback = wrap( '.my-namespace' );
 		const input = `
-		@keyframes editor-animation__fade-in {
+		@keyframes edit-post__fade-in-animation {
 			from {
 				opacity: 0;
 			}

From dfa040ce4f3c9295ab7e699efc6b8b3e5ca627f4 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 14 Nov 2018 11:32:23 +0100
Subject: [PATCH 5/5] Address final point.

---
 packages/components/src/modal/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index eebd7142e780d6..16b5e165ad1d06 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -40,12 +40,12 @@
 		transform: translate(-50%, -50%);
 
 		// Animate the modal frame/contents appearing on the page.
-		animation: edit-post__modal-appear-animation 0.1s ease-out;
+		animation: components-modal__appear-animation 0.1s ease-out;
 		animation-fill-mode: forwards;
 	}
 }
 
-@keyframes edit-post__modal-appear-animation {
+@keyframes components-modal__appear-animation {
 	from {
 		margin-top: $grid-size * 4;
 	}