Improve drag handle on blocks

[mtias]

When pressing on the movers to drag a block we are only changing the cursor icon. We should look at updating the handle itself (following the proposed prototype: dark background and handle instead of arrows) to reflect the change in state better:

I think we should also start with adding tap-to-drag when in "selection" mode by default. In Selection mode:

• Click / Tap engages edit mode.
• Click / Tap and Drag moves the block.

[paaljoachim]

At the same time we also need a bigger drop zone. A thin blue line makes it more difficult to drop exactly where one wants to drag the block to. #8540

[mtias]

Ideally we also implement some sort of drag displacement, so that dragging a block makes space for it. Example: https://codesandbox.io/s/framer-motion-drag-to-reorder-pkm1k?fontsize=14&module=%2Fsrc%2FExample.tsx

[giorov]

I also think that having to hover over the toolbar to show the drag and drop tool adds an unnecessary and confusing step. Also the current visual of just an up and down arrow doesn't imply that it can be dragged, just that it can be clicked up and down. Not good. Old way was better.

[paaljoachim]

Another thing that came up here.
#21199

"No borders around blocks so I can't see if I'm actually dragging a block into another (container) block;"

We could give a visual signal of the size of the block one is dragging from one location to another.

[talldan]

I've noticed a few people commenting that they can't find the block drag handle since it was moved to the toolbar:

• https://wordpress.slack.com/archives/C02QB2JS7/p1584003176266800
• https://wordpress.slack.com/archives/C02QB2JS7/p1585826232434100
• [Question] Inserter/block handles missing on new site #20840

So I think discoverability could be improved.

One easy option is to have a slightly more informative label for the buttons (as long it's relatively short). E.g. "Move up or hold to drag".

[paaljoachim]

@jasmussen is working on a drag and drop PR here: #23024

[mrfoxtalbot]

It looks like this issue can be closed now.

[jasmussen]

I don't think it's ready to close. While there's an explicit drag handle, the interface remains clunky and unbalanced, and there's still an opportunity to see how we can improve this. I'd keep it open.

[mrfoxtalbot]

Yeah, it used to be more clear back when the dragger and the arrows were to the side of the block toolbar :/

[jasmussen]

I disagree with that. The mover on the side was also a cause of many problems, some of which are outlined here.

[jordesign]

Simmilar to #24898...

Since this ticket was created, a separate drag handle was added, and numerous refactors of the toolbar were made across mobile and desktop. As such, the initial goal of this ticket has been addressed. If there's a desire to revisit the movers, this is best revisited in a fresh ticket that looks at the block toolbar as it is today.