From 672f99d521e3801d7e0de2c8996026cd2b34ee2b Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 28 Aug 2019 12:15:02 -0400 Subject: [PATCH 1/4] Try delaying block mover hover events. --- .../src/components/block-list/style.scss | 43 ++++++++++++++++++- 1 file changed, 41 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index c0206fb02a1b17..a91b09dfaf3c8b 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -860,6 +860,7 @@ // Show a clickable plus. .block-editor-inserter__toggle { + pointer-events: none; margin-top: -8px; border-radius: 50%; color: $blue-medium-focus; @@ -879,7 +880,17 @@ &:hover, &.is-visible { - opacity: 1; + // Only show this inserter after a delay. + animation: block-editor-block-list__insertion-point-inserter-fade-in 0.2s ease-out 0.75s; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + + // Do not enable pointer events on the button until after the parent animates. + .block-editor-inserter__toggle { + animation: block-editor-block-list__insertion-point-inserter-toggle-pointer-events 0.2s ease-out 0.75s; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + } } } @@ -893,12 +904,40 @@ &:hover, &.is-visible { - opacity: 1; + // Only show this inserter after a delay. + animation: block-editor-block-list__insertion-point-inserter-fade-in 0.2s ease-out 0.5s; + animation-fill-mode: forwards; + @include reduce-motion("animation"); pointer-events: auto; + + // Do not enable pointer events on the button until after the parent animates. + .block-editor-inserter__toggle { + animation: block-editor-block-list__insertion-point-inserter-toggle-pointer-events 0.2s ease-out 0.5s; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + } } } } +@keyframes block-editor-block-list__insertion-point-inserter-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes block-editor-block-list__insertion-point-inserter-toggle-pointer-events { + from { + pointer-events: none; + } + to { + pointer-events: auto; + } +} + // This is the edge-to-edge hover area that contains the plus. .block-editor-block-list__block { > .block-editor-block-list__insertion-point { From 7ee67d7c661004106a030ec74b0c4d51fd71769a Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 29 Aug 2019 09:52:20 -0400 Subject: [PATCH 2/4] Properly center sibling inserter on the block borders. --- packages/block-editor/src/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 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 a91b09dfaf3c8b..32f42a5c39862b 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -861,7 +861,7 @@ // Show a clickable plus. .block-editor-inserter__toggle { pointer-events: none; - margin-top: -8px; + margin-top: $border-width * -3; border-radius: 50%; color: $blue-medium-focus; background: $white; From ad24f8945ab71efe32194da96e92f8e271648416 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 29 Aug 2019 10:55:40 -0400 Subject: [PATCH 3/4] Use transition instead of animation for the inserter fade. --- .../src/components/block-list/style.scss | 24 ++++--------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 4bac78b0e7880b..41880252d83dca 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -884,10 +884,8 @@ &:hover, &.is-visible { - // Only show this inserter after a delay. - animation: block-editor-block-list__insertion-point-inserter-fade-in 0.2s ease-out 0.75s; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + opacity: 1; + transition-delay: 0.75s; // Do not enable pointer events on the button until after the parent animates. .block-editor-inserter__toggle { @@ -908,15 +906,12 @@ &:hover, &.is-visible { - // Only show this inserter after a delay. - animation: block-editor-block-list__insertion-point-inserter-fade-in 0.2s ease-out 0.5s; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - pointer-events: auto; + opacity: 1; + transition-delay: 0.75s; // Do not enable pointer events on the button until after the parent animates. .block-editor-inserter__toggle { - animation: block-editor-block-list__insertion-point-inserter-toggle-pointer-events 0.2s ease-out 0.5s; + animation: block-editor-block-list__insertion-point-inserter-toggle-pointer-events 0.2s ease-out 0.75s; animation-fill-mode: forwards; @include reduce-motion("animation"); } @@ -924,15 +919,6 @@ } } -@keyframes block-editor-block-list__insertion-point-inserter-fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - @keyframes block-editor-block-list__insertion-point-inserter-toggle-pointer-events { from { pointer-events: none; From 0109b7c9d71fcb55eba0be0b77b9f6767ca5b84c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 30 Aug 2019 08:57:55 -0400 Subject: [PATCH 4/4] Vertically center the inserter plus. --- packages/block-editor/src/components/block-list/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 33fa82ba1ccba1..032481e072d0aa 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -871,6 +871,7 @@ height: $block-padding * 2; width: $block-padding * 2; padding: $grid-size-small; + margin-top: $border-width; &:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: none;