From ef95cb95c2db5b44725c3c2a8778e7098925e170 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Mon, 6 May 2019 17:42:02 +0100
Subject: [PATCH] Fix: Block movers don't appear on the playground and on the
 widgets page. (#15076)

The keyframe animations contained a comment saying they need to be duplicated, but they were not being duplicated in widgets and playground styles this made the block movers invisible.
---
 packages/edit-widgets/src/style.scss | 28 ++++++++++++++++++++++++++++
 playground/src/style.scss            | 28 ++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index 39319c706bf67..0a61df82f3c26 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -40,3 +40,31 @@ body.gutenberg_page_gutenberg-widgets {
 		height: 100%;
 	}
 }
+
+/**
+ * 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__loading-fade-animation {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes edit-post__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
diff --git a/playground/src/style.scss b/playground/src/style.scss
index 1d4f7adb3296f..1ec12365626ce 100644
--- a/playground/src/style.scss
+++ b/playground/src/style.scss
@@ -35,3 +35,31 @@
 		height: 100%;
 	}
 }
+
+/**
+ * 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__loading-fade-animation {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes edit-post__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}