No visual indicator to show where to click on block to drag it

[maddisondesigns]

Issue Overview

There's no visual indicator or icon to show that blocks can be moved via drag 'n drop. The only indication that something can be dragged is if you happen to accidentally move your cursor near the outside edge of a block and the cursor turns from a pointer to a hand. Even with that, it's unclear that it actually means that you can drag something.

When you've inserted an image block and set it to full width, it's impossible to put the cursor on the outside edge of the block because the image extends the full width of the edit area. It was only by accident that I found that you can drag it by putting the cursor right on the bottom edge of the block.

A similar issue happens when you have a Heading 5 or 6 block. Because the height of these blocks are considerably smaller than the other headings, it's nearly impossible to find the drag location on the edge of the block.

There needs to be some sort of visual indicator or handle that makes it clear where you can grab each block to drag it.

Steps to Reproduce (for bugs)

1. Create new page and add various blocks (incl. full width image, Header 4, 5 & 6)
2. Try and drag blocks and note how difficult it is

Expected Behavior

After clicking on a block I should be able to immediately tell where I need to place the cursor to drag the block. At the moment, it's extremely difficult to tell that you can actually drag 'n drop a block and unless you know where to click, you're left moving your cursor all over the block to find the drag handle.

Current Behavior

It's too difficult to work out how to drag a block

Possible Solution

Add an icon or some visual indicator to show users where they need to click to drag the block. It would make sense to have this in between the existing block move arrows.

Gutenberg 2.6.0
WP 4.9.5

[karmatosed]

Noting #6041.

[jasmussen]

Thanks for the report. We intentionally wanted to try and see if we could do with just the "grabby hand cursor" as sufficient affordance for indicating draggability — and presumably that could still be the case as we use this. However this ticket is totally valid.

One option we could perhaps try first, is to make the new hover label work as an additional draggable handle.

[maddisondesigns]

Using the hover label would be good, but it still needs an icon so that people can immediately know where to grab. You can't just expect people to move their mouse around the whole block in the hope that they can find somewhere to click and drag because their mouse pointer happened to change. I'm pretty sure that I've never seen any UI that has drag and drop functionality that doesn't also specifically show you where to actually click (or touch) to drag that element. The only instance of not having an icon would be if the whole element is draggable (i.e. I can drag from anywhere), which in this case, doesn't apply to Gutenberg blocks.

[karmatosed]

My concern with adding another icon would be comprehension and complexity of the interface. If it was intuitive enough to not need an icon that would be ideal.

[maddisondesigns]

In my opinion, it's definitely not intuitive enough, as it is now. You can't expect people to move their cursor all over the block in the hope of finding a place where the cursor changes, and then on top of that, working out that the cursor change means that I can click and drag.

If I was a new WordPress user and didn't know much about the editor interface, there is not a single clue that tells me that you can drag and drop blocks, let alone how to drag and drop them. It's all very well trying to make the interface as clean as possible, but doing so at the expense of usability is a bad decision.

[ZebulanStanphill]

I just made an issue (#6265) suggesting that the hover title be used as a drag handle (possibly with a drag handle icon shown when your mouse is on the title). This would help a lot with dragging smaller blocks where the draggable area on the sides is pretty small. And as I suggested in #6041, making it so that you can drag the block from the arrow buttons (and probably also the "More Options" and "Remove" buttons) would also help in this area. Actually, being able to use the block toolbar as a drag handle would be pretty handy as well. The header bars in GNOME do this for moving windows (so that you can have a bunch of buttons in the top bar of a window while still being able to move it easily), and I think it would work here in Gutenberg for blocks as well.

I think if these additions were implemented, dragging blocks would be a whole lot easier, and perhaps more discoverable as well. It might not be enough, but it would definitely help.

[karmatosed]

@SuperGeniusZeb I think having 2 issues open for the same discussion feels like we can combine. Let's do that. #6265 shows a method for this and lets keep that in mind. I'll close that one to focus here. We can always reopen if an issue.

[ZebulanStanphill]

#7114 has a really neat mockup that is basically an updated version of #6265.

I still think that in addition to dragging from the hover title, you should be able to drag blocks from the side controls and block toolbar.

@karmatosed Should I create new issues for allowing the block toolbars and side controls to double as drag handles, since the hover title solution only applies to unselected blocks?

[maddisondesigns]

I like that mockup that @jasmussen created in #7114. Having that indicator icon in the block hoverlabel would work well I think.

[karmatosed]

Should I create new issues for allowing the block toolbars and side controls to double as drag handles, since the hover title solution only applies to unselected blocks?

I am not totally sure they should do that. Maybe we can get in what we have and consider from there?

[karmatosed]

I think as #7114 exists lets close this and focus there. If we can look at things after that this could be something we come back to.