Bug Description

In #3060 it was mentioned:

• It seems to start lagging after adding a few blocks, and generally behaves so that the usability is not the best, it became not possible to drag.
• I have seen that for a while actually. It's in develop too and have been for about a week
• But when there's multiple elements on the page, you can't select-and-drag in one click (not always at least). You have to click to select first, then drag.

The last part might be covered by #3455, not sure though.

Expected Behaviour

Consistently smooth interactions without lagging. No issues with selecting and dragging blocks.

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

Additional context

• WordPress version: 5.3 Beta
• Plugin version: current develop
• Gutenberg plugin version (if applicable): 6.6
• OS: macOS
• Browser: Chrome

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• AC1: When dragging a block, the block should move, along with the cursor, in real-time, so no lag is experienced on the screen.

Implementation brief

Two optimizations are recommended for getting smoother snap line display:

• Debounce setSnapLines by 10 ms.
• We currently make way more snap lines than "normal" tools (using Google Slides for comparison here). We currently allow edge-to-edge, center-to-center, edge-to-center and center-to-edge snap lines. We should reduce this by only allowing edge-to-edge and center-to-center snap lines.
• • The easiest way to do this is to split snap targets in two for each direction, e.g. separate horizontalSnaps in horizontalEdgeSnaps and horizontalCenterSnaps in with-snap-target.js. And consequently use these separately for calculations when finding optimal snap lines in getBestSnapLines.
• • Do note however, that snapping edge-to-center-of-page is normal. It's only snapping edge-to-center-of-other-object, that's weird. Snapping center-to-edge-of-page is still weird though, so centers should only ever snap to centers of other things.

QA testing instructions

Verify smooth drag without lagging:

• Add several elements to a page.
• Drag any one around and see no delay while snap lines are calculated.

Verify proper snap lines between element and page:

• Add an image to a page.
• Drag it so that the left edge matches page left edge and see a (very narrow) snap line.
• Similarly for right, top and bottom edge at page ditto.
• Drag it so that the left edge matches page center and see a snap line.
• Similarly for right, top and bottom edge at page center.
• Drag it so that image center is over center of page in both direction and see both snap lines displayed.
• Drag it so that image center is over left edge of page and see no snap line.
• Similarly for image center at right, top and bottom edge of page.

Verify proper snap lines between two elements:

• Add two images, A and B, to a page.
• Drag image A so that left edge matches left edge of B and see a snap line.
• Similarly for left-to-right, right-to-right and right-to-left.
• Drag image A so that left edge matches center of image B and see no snap line.
• Similarly for right-to-center.
• Drag image A so that vertical center matches center of image B and see a snap line.
• Drag image A so that vertical center matches left edge of image B and see no snap line.
• Similarly for center-to-right.
• Repeat for up-down and see snap lines between edge-to-edge and center-to-center and no snap lines between edge-to-center and center-to-edge.

Demo

• https://youtu.be/HlaS6AzwknE

Addressed by

• Ensure smooth snap line display #3514

Changelog entry

• Improve performance when dragging elements