From 918c521584f72c208ce12a9983c3a659dd6b9714 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 30 Jul 2019 12:29:42 -0400 Subject: [PATCH 1/2] Try adding a subtle animation to innerblock selection. --- assets/stylesheets/_animations.scss | 6 ++++++ packages/block-library/src/columns/editor.scss | 1 + packages/block-library/src/group/editor.scss | 1 + packages/edit-post/src/style.scss | 9 +++++++++ 4 files changed, 17 insertions(+) diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss index 9466001700e03..3f74da2840eb5 100644 --- a/assets/stylesheets/_animations.scss +++ b/assets/stylesheets/_animations.scss @@ -7,3 +7,9 @@ animation-fill-mode: forwards; @include reduce-motion("animation"); } + +@mixin edit-post__inner-blocks-padding-animation($speed: 0.1s, $delay: 0s) { + animation: edit-post__inner-blocks-padding-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 index 1dc626a9e84e0..984cc183adedb 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -190,6 +190,7 @@ div.block-core-columns.is-vertically-aligned-bottom { .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks { padding: $block-padding; + @include edit-post__inner-blocks-padding-animation(); // Negate this padding for the placeholder. > .components-placeholder { diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 166d3992c6daf..5047ac98b3350 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -92,6 +92,7 @@ > .wp-block-group__inner-container > .block-editor-inner-blocks { padding: $block-padding; + @include edit-post__inner-blocks-padding-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 index be47d4c70dc96..b9979b48245a5 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -51,6 +51,15 @@ } } +@keyframes edit-post__inner-blocks-padding-animation { + from { + transform: scale(1.01); + } + 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 { From 786c0a61fee8879d1ab2e6d6840991bb831a39b1 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Aug 2019 12:14:16 -0400 Subject: [PATCH 2/2] Hide the animation for default appenders and placeholders. --- assets/stylesheets/_animations.scss | 6 ++++++ packages/block-library/src/columns/editor.scss | 6 ++++++ packages/block-library/src/group/editor.scss | 5 +++++ packages/edit-post/src/style.scss | 10 ++++++++++ 4 files changed, 27 insertions(+) diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss index 3f74da2840eb5..d0041d8c6f4ab 100644 --- 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 index 984cc183adedb..1853db9593bcb 100644 --- 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 index 5047ac98b3350..8aadab76e22a0 100644 --- 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 index b9979b48245a5..00b7f2632b20e 100644 --- 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 {