New drag&drop target indicator in list view is not accessible and should be reverted to the old (and good) line

[burnuser]

Description

The old drag&drop target indicator in list view was a clear visible line, which indicated without any doubt where the dragged block will be positioned.
The new color-underlay is nearly invisible and completely unintuitive and unclear in prediction what to expect when reordering several blocks of the same type (e.g. paragraphs).

1. Will my originally selected block be moved?
2. Is there a color underlay on one block? => Very bad contrast! Can't see. / I'm not sure.
3. What does the color underlay mean? => A block which will be moved away after dragging the original block?
4. What a damn fiddling within all this constantly moving blocks!

Please bring back good old line insert-position indicator in list view!
Or at least make the new drag&drop behaviour better:
a) clear visible (better color/contrast and/or additional line-indicator
b) identifiable (among blocks of the same type): e.g. mark the dragged block with a moving icon while moving

Step-by-step reproduction instructions

1. Add several paragraph blocks
2. Open list view
3. Reorder blocks with drag&drop => And compare new drag&drop fiddling with good old insertion-line!

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.5 (with and without Gutenberg 18.7.1) and WP 6.6 Beta

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

[Mamaduka]

cc @andrewserong

[andrewserong]

Thanks for the ping and for raising the issue here @burnuser! There are lots of valid points here, and making drag and drop interfaces accessible raises a bunch of challenges that need to be balanced. For anyone else reading on, here are two videos showing the state in 6.4 and where things are at currently as of 6.6:

WP 6.4

2024-07-08.13.45.46.mp4

WP 6.5/6.6

2024-07-08.13.47.41.mp4

---

There are trade-offs between the two approaches. While the blue indicator line provided a clear indicator of where a block would be dropped, it also required greater precision in finding the exact spot where a drop could occur, and didn't show what the block would look like in its target position before the user releases the mouse cursor.

The current behaviour is one step along the way toward a more WYSIWYG drag and drop experience, and previews where the target block will be before the user lets go of the mouse cursor. There are other ideas for how to improve this further, currently tracked in #49563. One of those is to make the drag chip resemble the dragged item (#56539).

I have an older WIP PR in #60623 that explored this idea, which gets closer to an ideal WYSIWYG state (but is still very buggy):

2024-07-08.14.03.10.mp4

I didn't get a chance to continue on with that work in the 6.6 cycle, but I think something in that direction will be preferable to reinstating the blue line, as ideally I think the interface should create enough room for the dragged item that people don't need to be super precise to move an item between two other items.

All that said, I'll just ping @WordPress/gutenberg-design for visibility on this one, as I know a bunch of designers have put a fair bit of thought into how the list view drag and drop behaviour should ideally work.

[burnuser]

Thank You for Your kind response!

And I understand the WYSIWYG target.

But I have a remark about precision and efficiency:

WP 6.4 blue line is moved between blocks which are not moving until dropping the original block. So - in my experience - I'm very quick and precise with positioning. => Perfect and intuitive hand - eye coordination. (No extra attention necessary. Works physiologically semi-automatic.)
Target is always extremely easy to hit: the blue line only jumps between the blocks and everything is always clear.

On the other hand, all the moving blocks after 6.4 are (physiologically) a permanent eye-catcher, demanding permanent full attention and visually decoding:
What's going on there?
Where is my original block at the moment?
How can I get the designated position?

And hitting the right drop target is much more stressful and time consuming, because it's every time a try & guess game, when the invisible middle-line is crossed and an existing block (in a line of similar blocks) will move out of the way - up or down.

So, even with better visibility to expect in the future, I can say, that for me the line worked much better and quicker as the new WYSIWYG solution.
Or in other words:
In WP 6.4 the list view was my absolute champion to rearrange blocks (even for one place up/down) - without any need of active thinking or attention for exact mouse-movement. It was fun to work with it. A perfect tool.
Now I hate the list view for block rearranging.
Instead I prefer other options whenever possible, like the toolbar move handles (originally for larger ways not so good) - only to avoid the stressful fiddling in list-view!
And if it can't be avoided, it was a pain to work with.

[burnuser]

For me the moving blocks are the main problem.

But maybe the old line behaviour is combinable with your drag&drop visualisation.

I have a suggestion and made a little mockup without moving blocks (not even the dragged one, until mouse button release):

The example could be eventually enriched with different colors, additional moving indicators and/or a dotted line around the moving block and/or it's original position (and so on), but I think the principle is clear - and would work for me and you.

And - as little extra - this solution (with additional indication of original position of the dragged block until release mouse button) delivers in my opinion an over all better orientation of "where to come" AND "where to go".

Maybe you could give it a try?

[jasmussen]

In the canvas, when you click the ellipsis menu and choose "move to", you get a fully keyboard accessible drag and drop experience that is similar to the previous behavior you're referring to. I could see something similar exist for the list view.

That said, there's a long discussion history that got us to where we are today with regards to the instant effect of drag and drop. I won't rehash the details here, for the full context it's best to follow the breadcrumb trail of discussions and issues, perhaps you can work backwards from #56625. In that vein, this is not the doing of just one person acting alone, it's a consensus that was built in the process of discussion.