List View: Make drag chip resemble list item, and displace blocks when dragging

[andrewserong]

What problem does this address?

Part of #49563

Dragging list view items does not feel like picking up a list view item and moving it to a new position.

When dragging blocks within the list view, the drag chip (the icon that follows the mouse cursor around) obscures the drop indicator line, while also not being a WYSIWYG representation of dragging blocks around. Also, there has been feedback on issues and PRs that the drop indicator line can make it feel difficult to drag blocks around in an intuitive way.

What is your proposed solution?

A suggestion that's come up many times is to try displacing list items while dragging, that is to say, when a user drags a block, move all the other list items out of the way. This has been tried previously in #34022. It would be good to explore this idea again, especially now that a number of improvements have landed for the list view. One potential path forward could involve:

Potential way to implement it

This is one potential path, that (hopefully) wouldn't involve a large refactor, but that could provide the visual appearance of dragging "real" list view items while moving the other list view items out of the way as a user drags blocks around:

• When a user starts dragging a block, "hide" the blocks within the list view, and use a duplicate of the DOM elements for those blocks as the drag chip (effectively part of what was being explored in List View: Update draggable chip to resemble the list view item when dragged #49820)
• Then, for each list view item, animate the item to move either up or down, based on whether or not the item is above or below the mouse cursor. The distance the item is to move up or down should be the height of the dragged items

With these two ideas combined, we might be able to get something that feels like a WYSIWYG experience of dragging blocks in the list view.

To-do

• Before we can attempt the above, in order to support dragging to nested items in the list, we'll likely want to enable hovering over a collapsed item in order to expand it: List view drag and drop: expand collapsed parent blocks when dragging over them #33684
• List View: Displace list view items when dragging (a bit more WYSIWYG) #56625
• Start a new WIP PR that makes the drag chip resemble the blocks that are dragged
• Resolve the issues flagged in List View: Subtle visual issues with displacement dragging #59937

[andrewserong]

I've started a proof of concept for displacing list view items over in #56625. Happy for any early feedback!

[andrewserong]

Update in case anyone is looking at this issue in particular:

In WP 6.5, the first part of this feature landed in the form of enabling displacement list view dragging in #56625. For WP 6.6 it would be good to continue work on this feature and explore making the drag chip resemble the list view item (as explored in the WIP PR #58103). In the process it would also be good to resolve some of the wrinkles or subtle visual issues with the current animation when displacing list view items, as raised in #59937.