Hide the animation for default appenders and placeholders.

WordPress · Aug 7, 2019 · 786c0a6 · 786c0a6
1 parent 918c521
commit 786c0a6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
@@ -13,3 +13,9 @@
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
+
+@mixin edit-post__inner-blocks-padding-negative-animation($speed: 0.1s, $delay: 0s) {
+	animation: edit-post__inner-blocks-padding-negative-animation $speed ease-out $delay;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -197,4 +197,10 @@ div.block-core-columns.is-vertically-aligned-bottom {
 		margin: -$block-padding;
 		width: calc(100% + #{$block-padding * 2});
 	}
+
+	// Negate the animation for the appender and placeholders.
+	> .block-editor-block-list__layout > .block-list-appender,
+	> .components-placeholder {
+		@include edit-post__inner-blocks-padding-negative-animation();
+	}
 }
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
@@ -93,6 +93,11 @@
 	> .wp-block-group__inner-container > .block-editor-inner-blocks {
 		padding: $block-padding;
 		@include edit-post__inner-blocks-padding-animation();
+
+		// Negate the animation for the appender.
+		> .block-editor-block-list__layout > .block-list-appender {
+			@include edit-post__inner-blocks-padding-negative-animation();
+		}
 	}
 
 	&:not(.has-background) > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -60,6 +60,16 @@
 	}
 }
 
+// This negates the animation above, and is used on child elements that don't require animation.
+@keyframes edit-post__inner-blocks-padding-negative-animation {
+	from {
+		transform: scale(0.99);
+	}
+	to {
+		transform: scale(1);
+	}
+}
+
 // 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 {