Drag and drop modal box or UX improvement to more easily re-order blocks or put blocks into columns

[babblebykev]

There should be a button somewhere in the toolbar that would activate a modal box where blocks can be more easily re-ordered or placed into columns via drag-and-drop. The manual approach (the "move up and down" arrow buttons) feels more time-consuming.

[ZebulanStanphill]

You mean something like this?
https://oxygenbuilder.com/documentation/visual-editing/editor-overview/

That would be pretty neat. There is actually another open ticket about a similar thing (#5301), though it only includes document headings, rather than all blocks. I think a full block hierarchy that lists everything would be more useful for drag-and-drop reordering.

There is also an open issue (#7114) and corresponding work-in-progress pull request (#8764) to add a drag handle to the hover label, which is another way of adding drag-and-drop, though it does not apply to the selected block unless you make the hover label appear for selected blocks.

The outcome of #6224 may also end up adding a drag handle, which could make #7114/#8764 redundant, though it really depends on what ends up getting implemented.

I also think the movement arrows should double as drag handles for drag-and-drop. Actually, I think it would be nice if all the controls around a block doubled as drag handles, though I would be happy with just the up/down movers.

[babblebykev]

@ZebulanStanphill Close. I was thinking maybe something more on the lines of the "Reorder Project" window on Behance, because it matches the visual-ness of the editor.

[chrisvanpatten]

Just to be sure — and please accept my apologies that this is slightly obvious, just want to be 100% sure! — @babblebykev are you aware of the existing Drag-and-drop capabilities in Gutenberg?

It's not 100% perfect (grabbing the drag areas can be tough, see #7114) but it might help.

Here's a GIF:

[babblebykev]

@chrisvanpatten Now that you mentioned it, maybe it could be made more obvious on hover (same with the "Remove block" button, but that's for another time).

Then again, because my posts tend to get very long (I am working on a portfolio blog at the moment), it would feel a little time consuming to scroll the page while dragging a block, and I would like to see a sort-of bird's eye view of all the blocks I placed on a post, which is where the modal box idea would come in.

[chrisvanpatten]

@babblebykev Thanks! I agree it could be more obvious. I think for now because we're at feature freeze, a modal box to get that "birds eye view" would be best implemented as a plugin that could get merged in later. (It's an awesome idea that I wholeheartedly support, just being conscious about the feature lock.)

I'm going to close this for now but I'll also add it to the Ideas project so we can revisit later. For discussion on making this existing drag & drop more visible, definitely comment over on #7114 or give it a thumbs up :)

[ZebulanStanphill]

For future discussion, it is worth noting that Divi has something pretty similar to this called Wireframe View:

Since Gutenberg does not have a strict section→row (with built-in columns)→module layout system (a block can not be nested at all, or it could be nested many levels deep, and any custom block could act like a row if desired), having blocks show up in a wireframe-style view in rows if they are laid out horzontally would probably be rather difficult to pull off. Therefore, a Gutenberg equivalent would probably just show all children blocks listed vertically, which ends up making it pretty similar to the Oxygen UI I showed earlier, albeit larger and with a different feel.