Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try delaying sibling inserter hover events #17240

Closed
wants to merge 6 commits into from
Closed

Try delaying sibling inserter hover events #17240

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
672f99d
Try delaying block mover hover events.
kjellr Aug 28, 2019
7ee67d7
Properly center sibling inserter on the block borders.
kjellr Aug 29, 2019
db9d48a
Merge branch 'master' into try/block-mover-appear-on-delay
kjellr Aug 29, 2019
ad24f89
Use transition instead of animation for the inserter fade.
kjellr Aug 29, 2019
69e88a8
Merge branch 'master' into try/block-mover-appear-on-delay
kjellr Aug 30, 2019
0109b7c
Vertically center the inserter plus.
kjellr Aug 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 41 additions & 2 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is ok, but is there a specific reason you’ve used animation rather than transition and transition-delay? Seems like you could accomplish the same thing with less code using transition.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Hmm. Yeah — my first inclination was to use that mixin we have, but I bet this would work too (and maybe fix whatever weird bug is preventing the clicks from registering in Safari?). I'll give it a try.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the "reduce motion" thing suggest either approach?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually — trying this out now: the main issue is that we only want to apply that delay when this animates in. We still want it to fade out as soon as you mouse out.

Transition will apply to both in and out, which means the button will stick around for an extra second after the cursor leaves it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can apply different transition-delay to the base selector and the hover. That should do the trick.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scratch that — I got this working in db9d48a (after a quick DM with @shaunandrews. 😄).

The only caveat is that the pointer-events animation didn't work when I tried to move it to a transition instead. I kept that as an animation for now, but it still only works in Chrome and Firefox. I'd guess that pointer-events isn't generally the sort of property that's supposed to be animated, so its behavior isn't quite the same in each browser. 😕

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd guess that pointer-events isn't generally the sort of property that's supposed to be animated

Exactly. Animating pointer-events is a hack, and not a reliable solution. This is a tough one to solve with CSS alone. I'd imagine some JS will be required to handle the delay and trigger the state change.

You might be able to rethink the way you're doing the transition to use a parent element to trigger the delay, which might fix the issue with pointer-events — but JS might be more succinct.

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");
}
}
}

Expand All @@ -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 {
Expand Down