Unreliable drag & drop (blue line) indicator

[kevin940726]

Description

I did search but couldn't find other issues specific about this, so decided to open one. Feel free to link other related issues or close this one. (I intentionally make the title of this issue vague so that we can gather as many cases as possible here. We can treat it as an overview issue of anything related to the blue line indicator.)

The drag&drop (blue line) indicator is unreliable and pretty wonky, providing bad user experience. I'm still unsure how it works, sometimes it shows but sometimes it doesn't. I've recorded some basic interactions when dragging a block in the post editor:

https://user-images.githubusercontent.com/7753001/122896420-a3f34780-d37b-11eb-8da3-155a5a5b3228.mp4

Below are some bugs I noticed, in the order shown in the video above:

1. The indicator flickers when dragging on a block.
2. There's no indicator shown when trying to drag it above the first block.
3. There's no indicator shown when trying to drag it below the last block either. It only shows when the cursor is within a very small range below the last block.
4. There's no indicator shown when trying to drag it to an empty block list (Inner Blocks). (Related: #32652)

Currently, the indicator is positioned with both the prevBlock and the nextBlock. It makes sense when the indicator is in between blocks, but not so much in other cases (2),(3),(4). I think we might have to rethink the approach and come up with a way that doesn't depend on existing blocks in those cases. An approach just came to my mind would be to insert invisible placeholder blocks to the block list, so that we can position the indicator between them.

Here's another UX issue when trying to drag a block into inner blocks.

https://user-images.githubusercontent.com/7753001/122928804-c9447d80-d39c-11eb-9e14-7653edcd5f1e.mp4

5. It's unclear in the UI that whether it will be dragging into the Columns block or append after the Columns block. The UI is the same, a long blue line, just that the position is slightly different.
6. As you could probably notice in the screencast above, the scroll container scrolls when dragging the block. It helps the user to move the block outside the current viewport, but the scrolling is happening too early imo. It should only happen when the cursor is below or above a certain threshold, or in other words, follow the OS behavior when moving things if possible.

Step-by-step reproduction instructions

1. Create a new posts and insert some blocks and inner blocks.
2. Try to move a block.

Expected behaviour

The blue line indicator should show reliably.

Actual behaviour

The blue line indicator doesn't show reliably.

WordPress information

• WordPress version: master
• Gutenberg version: trunk
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: Desktop
• Operating system: macOS
• Browser: Safari 14.1

[mtias]

There was some recent work done here: https://github.com/WordPress/gutenberg/pull/31896

cc @ellatrix

[talldan]

https://github.com/WordPress/gutenberg/pull/32776 may also have fixed some inconsistencies.

There's no indicator shown when trying to drag it above the first block.

https://github.com/WordPress/gutenberg/pull/33024 should fix this.

There's no indicator shown when trying to drag it below the last block either. It only shows when the cursor is within a very small range below the last block.

The mouse has to be within the block list element presently. It'd be nice to improve this.

[talldan]

As mentioned on https://github.com/WordPress/gutenberg/issues/43127, it looks like the fix in https://github.com/WordPress/gutenberg/pull/33024 has regressed, the indicator no longer shows above the first block.

edit: Now fixed in #43135.

[aaronjbaptiste]

Thanks for the fix, tested and working great for vertical stacks, but as commented on #43135, it doesn't appear before the first block for horizontal layouts.

[talldan]

Thanks for mentioning it. I'll take a look.

Also worth mentioning that the Buttons block is really messed up, that still shows vertical drop indicators 😬

[talldan]

That was a fairly easy fix - #43944. I'll add some end to end testing for this as well before making it ready for code review.