From b978dbd2014a8733f82ddf43dfc87562ee1ad8e2 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 7 Oct 2022 12:47:11 +0200 Subject: [PATCH 1/2] Add animation to click overlay. --- .../components/block-content-overlay/style.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss index 7795bef2525f0..648b185a4b819 100644 --- a/packages/block-editor/src/components/block-content-overlay/style.scss +++ b/packages/block-editor/src/components/block-content-overlay/style.scss @@ -1,3 +1,12 @@ +@keyframes click-overlay__fade-in-animation { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + .block-editor-block-list__block.has-block-overlay { cursor: default; @@ -21,6 +30,11 @@ &:hover:not(.is-dragging-blocks)::before { background: rgba(var(--wp-admin-theme-color--rgb), 0.3); box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; + + // Animate. + animation: click-overlay__fade-in-animation 0.1s ease-out; + animation-fill-mode: forwards; + @include reduce-motion("animation"); } &.is-selected:not(.is-dragging-blocks)::before { From cf996ec72d2358411c93473a5542ade144375fd9 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 7 Oct 2022 12:53:14 +0200 Subject: [PATCH 2/2] Remove outline mode unless in select mode. --- packages/block-editor/src/components/block-list/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 66569fc6847a2..b4b3e4dcb3997 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -266,7 +266,8 @@ } } -.is-outline-mode .block-editor-block-list__block:not(.remove-outline) { +// Show hover borders (née "outline-mode") in navigate-mode. +.is-navigate-mode .block-editor-block-list__block:not(.remove-outline) { &.is-hovered { cursor: default;