Fix drag and drop performance when dragging over the insertion point #42806
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Feature] Blocks
|
Size Change: +85 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
talldan
force-pushed
the
fix/drag-and-drop-performance
branch
from
cb519e4 to
a8ede36
Compare
|
This makes a huge difference Beforebefore.mp4Afterafter.mp4Something I noticed was that I the drag is cancelled if I try to drag down over blocks that use the resizable component, e.g., Image and Cover blocks 2022-08-01.08.43.27.mp4 |
glendaviesnz
approved these changes
Aug 1, 2022
@ramon looking at the screen capture I think that might be the first bug described here |
Ah, thanks! Then LGTM too. A vast improvement on the current experience. |
|
Thanks for the reviews! I've reported the other issue in #42840. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #42363
Solves a drag and drop performance issue when dragging over the insertion point.
Why?
The changes in #40441 were a little over-enthusiastic in removing
pointer-events: nonefrom the insertion point.For drag and drop,
pointer-events: noneis pretty important, it prevents the insertion point from intercepting drag events and lets the block drop zone receive them. Without it, the insertion point continuously toggles between being hidden and shown causing performance to degrade.How?
Adds
pointer-events: noneagain.pointer-events: noneneeds to be set from the root of the popover and that can only be done in block popover styles. However the block popover is a generic component now, so pointer events only need to be disabled when it's not an inbetween popover, hence the addedblock-editor-block-popover__inbetweenclassname.Pointer events are enabled when the insertion point
is-with-inserter—it has the '+' button that displays when hovering between blocks (and not dragging).Testing Instructions
Note that the first bug I described in #42363 (comment) is still present.
Screenshots or screencast
Kapture.2022-07-29.at.17.17.07.mp4