List View: Allow drag and drop to reorder items

[jasmussen]

What problem does this address?

We have numerous tools to reorder blocks. The List View provides a glancable tool of your site structure, and is used in a few places, it's in the post editor, it's in the post editor, it works as a persistent sidebar in the site editor, and it exists as a tool for the navigation block.

We could offer an additional drag and drop affordance in this tool, which might be useful for very long posts, or for the navigation which might feature complex nesting in menus.

What is your proposed solution?

Note: This change should apply to anywhere we use the List View component. Here shown for the Navigation block:

Make the entire list view item draggable:

You'd still be able to focus the item itself, or the ellipsis, individually:

The ellipsis menu contains a "Move to..." item that duplicates the move action.

[mtias]

For reference, we added drag support in #23952. Let's treat this as a great refinement on the presentation and to ensure we apply it throughout the different "block navigator" place now that the List View is a full panel.

[priethor]

Closely related to #25067.

[talldan]

Yep, as mentioned drag and drop should hopefully still be working, it needs to be enabled.

One thing that was hard to achieve in #23952 was the drop indicator styling. I think that may have regressed as well with styling changes to List View. It should show a blue line that's as wide as the item when dropping as a sibling, and a slightly indented line when dropping as a child (handled by dragging on the right side of the item).

And I never quite came up with a way to un-nest items through drag and drop. That could still be worked on.

Finally, I think it may also need some optimisation. 😄

[jasmussen]

What will it take to enable drag and drop for all instances of the list-view?

[priethor]

Right now the drag and drop is behind a __experimentalFeatures flag in the BlockNavigation component. However, other instances might add their own experimental flag to control it, as the Persistent List View does in #29729

[jameskoster]

I've been exploring this a bit in figma. Here are the various flows I worked on so far:

1. Arranging blocks at the same level
2. Dragging a block down a level in the tree (IE from the root level in to a group), accounting for when the target container is either open or closed
3. Dragging a block up a level, IE from a group to the root level of the doc.
4. Dragging a block to an incompatible area of the document, IE dragging a Column block to the root level

The second one feels most complex, so I put a prototype together to demonstrate how that could work:

drag.and.drop.mp4