Drag and drop performance regression

[msurdi]

Description

When dropping an image on the editor, there are certain position intervals where the blue drop position indicator is added and removed from the DOM in an infinite loop. See the attached video.

Step-by-step reproduction instructions

1. Write three paragraphs
2. Drag any image and, without actually dropping it, try to position it between two paragraphs as shown in the video
3. Try moving slowly up or down the drop position until the blinking starts to happen.

Screenshots, screen recording, code snippet

blinking.drop.mp4

Environment info

Gutenberg: v13.6.0
Theme: Twenty Twenty Two
WordPress version: 6.0-RC4-53438

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[simison]

@mcsf @ellatrix could this and another similar issue in #42365 popped up with changes in Rich text editing / text selections with more recent Gutenberg releases?

[mcsf]

Intuition tells me it isn't RichText (but Ella will know better), but Popover would be more likely. Could you regression-test against #40740?

[simison]

@mcsf the bug (both this issue and #42365) happen even with Gutenberg v13.2.0 so the regression must be coming from earlier changes than from #40740 which went to v13.3.0.

[talldan]

I just started reporting what I think is the same bug in a separate issue, then found this. I did some investigation.

In trying to diagnose this, I can spot two bugs. The first is that the dragged block is initially 'greyed out' when starting a drag, but when you drag past its position it suddenly reappears even though the user hasn't stopped dragging. The BlockDraggable is unmounted and stopDraggingBlocks is called. When bisecting I discovered this bug was introduced in #38892.

Kapture.2022-07-29.at.13.23.21.mp4

The second is the big performance regression where, in particular, dragging near the greyed out area of the dragged block causes flickering and lots of lag. This does also happen sometimes when dragging between blocks like the video in the description. On profiling I can see that onDragLeave and onDragOver in useBlockDropZone are being called repeatedly. It looks like this was introduced by #40441.

Kapture.2022-07-29.at.13.40.32.mp4

[talldan]

It looks like the main performance issue is happening because of the removal of pointer-events: none in a couple of places in #40441.

When dragging over the insertion point indicator, the block drop zone is no longer dragged over, so it triggers the onDragLeave event, which hides the insertion point. Once the insertion point is hidden, the drop zone is being dragged over again, so it shows the insertion point. And that repeats ad infinitum.

I should be able to put together a relatively straightforward fix.

edit - fix in #42806.