Gutenberg: Add support for dropping while dragging into hidden areas

[draganescu]

The navigation block supports drag and drop. Currently navigation items can be dragged, but they cannot be dropped into sub-menus because these are hidden by default.

A way is needed that makes it so that while dragging, instead of showing submenus on click, we should show them on hover, or dropping on an item moves the dragged item as a child of the item it was dropped on to.

[paaljoachim]

As one begins to drag a main navigation item all of the navigation with included submenus should also become visible showing the options where one can drop the main nav item. I do not see the need to have a Needs Design Feedback and Needs Design label here. It seems straight forward. It needs the Needs Dev label.

[draganescu]

@paaljoachim what if we have navigation three levels deep in four top menus? How do you show all this at once? I'm super sure we need a good UX here where somehow we can avoid such a display of 40 boxes all at once.

I proposed that on hover while dragging submenus become visible. The [Needs design feedback] was an attempt to get an appreciation for this idea before implementation :)

[paaljoachim]

Hey @draganescu

What about showing the current menu which the drag item is over.
Let's say a submenu item is being dragged.

For instance.
Top menu item
-2item submenu1
-2item submenu2
--3item submenu1
--3item submenu2
--3item submenu3
---4item submenu1
---4item submenu2
---4item submenu 3
-2item submenu 3

Dragging for instance 3item submenu2 would show the full branch top menu item, 2item submenu and 4item submenu.
OR just show the current 3item submenu. When dragging it down to 4item submenu then that opens. When dragging it to 2item submenu then that opens. Opening only the current branch it is being dragged over.

@mapk Mark could you also share some view points?

[mapk]

I immediately thought of the Finder on Mac OS. When I drag a file over a folder, the folder blinks and then opens up. This process continues on indefinitely as long as there are closed folders within each other. I think we might be able to try something like that with the Nav block?

1. Drag an item over a menu item that has a sub-menu.
2. The parent menu item blinks and the sub-menu appears.
3. If I drag onto an item in the sub-menu that also has a sub-menu, that sub-menu item blinks and the next level appears.

Mac OS

[paaljoachim]

Bottom line is that dragging an item over a submenu tree opens the submenu tree, and shows the submenu items.

[draganescu]

Thank you @mapk !

That is exactly what I tried to suggest:

while dragging, instead of showing submenus on click, we should show them on hover, or dropping on an item moves the dragged item as a child of the item it was dropped on to.

and it is also what @paaljoachim said here:

about showing the current menu which the drag item is over.

So I'll remove the design labels.