Gutenberg: List View: Drag & Drop

Created on 12 May 2020  路  7Comments  路  Source: WordPress/gutenberg

Add Drag & Drop to the Navigation Navigator and the Block Navigation.

The Block Navigation movers have just been merged:
https://github.com/WordPress/gutenberg/issues/22287

An issue has also been made to add movers to the top bar Block Navigator panel.
https://github.com/WordPress/gutenberg/issues/22287

The merged PR the movers look like this.

In the Navigation Block toolbar open the Navigator.
Open-block-Navigator-toolbar

A modul screen is seen.
Modul-Block-Navigator-Nav

The sidebar settings also contain a Navigator.
Block-Navigator-sidebar-Nav

I will also suggest adding in a grid icon. To give a visual hint that one can drag & drop the while section. Or just remove the grid icon and be able to drag & drop the while up and down arrow section.
Modul-Block-navigator-drag-drop-grid-icon

At present G2 does not have any visual hint. As one only drags the up and down arrow area.
Screen Shot 2020-05-12 at 17 34 08

[Feature] Drag and Drop [Feature] List View [Status] In Progress

Most helpful comment

I just test #18014 and its so useful. Please give us the movers also in the "normal" editor! I use the Navigator so much and the movers will help a lot!

All 7 comments

I do think having this drag and drop is sensible, what I do wonder is the iconography and how to ensure this doesn't have yet another interface for that. @jasmussen just going to loop you in for some direction from the iterative work on interface, what do you think would be a good icon for this? Does it even need an icon if that action happens based on arrows?

Another concern to raise here, is that the ellipsis is being added to that interface, so any mockups should also include that to balance.

I do agree that drag and drop would be really nice in this interface.

But I think that it needs to be the same drag and drop we end up with for blocks themselves, both visually and technically, and since those deserve a steady hand and a serious revisit, I would suggest this issue is blocked by drag and drop being improved for blocks themselves.

Thanks for the insights @jasmussen. I am firmly on the side that I really want this unified as it's the type of interaction would be unexpected if different in places.

@karmatosed
I found the issue you were mentioning in regards to the ellipsis:
https://github.com/WordPress/gutenberg/issues/22089

@jasmussen
I agree this issue is blocked until G2 Drag & drop movers have been worked through, so that we can implement the same in the Block Navigator and Block Navigation. We then need the Blocked label for this issue.

The Block Movers issues:
Evolving Movers: https://github.com/WordPress/gutenberg/issues/21935

The easiest form of drag & drop would be hovering over a menu item, cursor turns into a hand with a finger pointing and one drags the menu item to the new location in the nav structure.
Nav-structure-drag

I realise this is complex already, but can I request it be considered to add shift-clicking to select multiple blocks (within the same level), to allow multiple items to be dragged at once. This is something that would make this screen an improvement over the current nav-menus.php screen.

I just test #18014 and its so useful. Please give us the movers also in the "normal" editor! I use the Navigator so much and the movers will help a lot!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jasmussen picture jasmussen  路  3Comments

youknowriad picture youknowriad  路  3Comments

mhenrylucero picture mhenrylucero  路  3Comments

ellatrix picture ellatrix  路  3Comments

davidsword picture davidsword  路  3Comments