Gutenberg: Improve the drag and drop experience

[mapk]

Right now our drag and drop experience is pretty poor. I realize that this interaction is required a secondary interaction according to our vision. https://developer.wordpress.org/block-editor/contributors/design/#vision, but it's important to note that drag and drop is a primary, often used interaction of many users. So while this is considered secondary by us, the experience should be intuitive, simple, and informative.

Problems

1. The cursor is too far away from the element being dragged.
2. The text duplicates visually during the drag which is confusing.
3. The drop indicator is awkward, especially in relation to the content duplication that still exists. In this screenshot, it looks like I can drop my dragged element right below where it originally existed.

Trying to find drop zones is incredibly difficult as well. For example, in this gif below, I want to add a Spacer block within the Group block, but above the Columns block. And then I want to place another Spacer block above the Image block in the right column. Neither of those showed a drop zone for me, and at times there were TWO dropzones showing simultaneously.

Expected behavior

• I expect upon dragging that the element is clearly what's being dragged, and in its place is just a shadowy area void of the element that I now have dragging.
• I expect my cursor to either be touching or very close to the element being dragged.
• The drag and drop zones should be easily identifiable, easy to drop into, and a consistent experience whether I'm dropping into columns, or above the entire Column block within a Group block.

Desktop (please complete the following information):

• OS X
• Firefox 74.0
• Gutenberg 7.8

Related: https://github.com/WordPress/gutenberg/issues/20078

[chrisvanpatten]

19928 is also related and offers some similar and overlapping suggestions.

[brentjett]

One of the things that we've found helpful is to highlight the structural elements while dragging so its clear what potential drop positions exist. Sometimes you want to drop in order to do something like create a new column or row with the dragged contents rather than just reposition, so exposing the structure can help with discovery.

This pattern could potentially work for a keyboard insertion mode as well, where the drop zone is more of an insertion point that can be moved with arrow keys through various positions until the user confirms the insert.

[paaljoachim]

Associated issue:
https://github.com/WordPress/gutenberg/issues/20762

[paaljoachim]

Here is a run through of using the Group Block with focus on drag & drop in WordPress 5.3, 5.4 and in Gutenberg plugin 7.8.1
https://github.com/WordPress/gutenberg/issues/20453#issuecomment-599460173

[pwkip]

@slkfsdf8y34ljhsfsdfkuhfkl84hj did a pretty thorough job in documenting some of the undesirable drag&drop behavior in a 20 minute video: https://wordpress.org/support/topic/bug-report-20-min-of-video-journey-of-how-i-cant-move-an-image-to-the-bottom/

[ZebulanStanphill]

It's worth noting that even if you try to exclusively use the mover buttons, you're still forced to use drag-and-drop to move blocks in and out of nested containers. (And speaking of which, this makes it nearly impossible for keyboard users to move blocks in and out of nested container without using copy-paste.)

[ZebulanStanphill]

There's some interesting discussion currently happening in #20078 about a potential press-and-hold-still-to-enable-drag-mode interaction. I think that's probably the best avenue to explore to improve the drag-and-drop experience.

[paaljoachim]

Here is an overview of react drag and drop components. Perhaps something we can use?
https://onaircode.com/react-drag-drop-components-web-mobile-apps/

Associated issue:
Drag and drop from inserter to post
https://github.com/WordPress/gutenberg/issues/1511

[talldan]

I've been looking at drag and drop functionality in the block navigation (#22297), using the same functionality as exists for blocks.

Some of my observations about the usability of drag and drop in addition to what @mapk describes above:

• Drop zones are quite small and seem more associated with a block rather than the spaces between blocks (they're implemented as border on the block). (related https://github.com/WordPress/gutenberg/issues/6289, should there even be dropzones? Maybe the block should just relocate).
• Dropping into nested contexts is difficult (e.g. finding the drop zone at the end of a group's inner blocks vs. finding the drop zone after a group) (related #20955, also https://github.com/WordPress/gutenberg/issues/6289#issuecomment-565020491)
• Drop zones often appear in places they shouldn't (e.g. in a reusable block that isn't being edited, or a context where the block is not allowed (e.g. paragraph into buttons). (related #12255)
• Drag and drop doesn't work correctly for horizontal block layouts. (#22662)
• It doesn't seem possible to move a block to the end of a block list

[talldan]

Also some technical notes:

• useBlockDropZone should probably be renamed useBlockListDropZone, as the entire list is the drop zone.
• useBlockDropZone is coupled to the DOM structure of a block list. It uses the id of the block element to determine the drop location and expects a containing DOM element representing a block list that has direct children that represent blocks. Block navigation has none of these concepts, so to use the same drop handling some of the behavior would need to be generalized or externalized.
• The method for determining the drop position of the block that's currently used for vertical block lists (using the y position of the block) doesn't translate well to horizontal block lists (e.g. using the x position). Horizontal block lists often wrap onto multiple lines, so there might be more than one block at the same x position.

[paaljoachim]

The ideal when dragging as I see it is one needs clear drop zones. Perhaps outlining each block, or for navigation each menu item one can see the boundary of each. The drop zone should show the size of the object being dragged. The drop zone can also contain a very different color to create a clear visual differentiation of surrounding area.

Here is a mockup of dragging a nested/inner block inside the Group Block.

I am though showing it without the use of the toolbar. As it would visually get in the way to what it can look like.

[paaljoachim]

@jasmussen is working on a drag and drop PR here:
https://github.com/WordPress/gutenberg/pull/23024

[phpbits]

Yeah, it's quite poor dragging experience. What I did a while back for EditorsKit was added a background color to make it a bit better.

[jasmussen]

Thanks for sharing, @phpbits! One of the reasons we can't add a background color is that we can't assume which color to show. We can show a white background by default, and a black background when the theme registers a dark editor style, but TwentyTwenty has a yellow background, and even if we could figure that one out, you could still drag a paragraph from inside a group with an arbitrary background color.

One thing I'm trying in #23024 is to not show the clone at all.

[mapk]

23024 is a great solution here! The content minimizes so there's no longer an awkward ghosting. And the dropzones feel a bit better. I'll close this out since it's merged.