Block Editor: Try making block drop zones a bit wider.

[epiqueras]

Description

This PR explores making block drop zones a bit wider than blocks themselves to make drag and drop block reordering easier and more fluid.

Currently, you have to move your mouse towards the center after initiating a drag so that your cursor hovers over drop zones, and this is a bit awkward, specially because it's intuitive for LTR users to drag blocks through the left margin of a document.

How has this been tested?

Block drop zones were tested and they work as expected.

Screenshots

Types of Changes

New Feature: Block drop zones were widened a little to make drag and drop reordering more fluid.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[youknowriad]

What happens when this overlaps with other blocks?

[jasmussen]

I would echo this, and how does it work with editor styles? It's definitely worth testing this with a variety of heavily customized editor styles, including just as a baseline, TwentyNineteen.

The good thing about $block-padding is that it is exactly as wide as we know to be "safe". The problem with 10% is that it's kind of arbitrary depending on context.

[epiqueras]

Yeah, I don't think this is the right solution.

I think the root issue is that you can only drag from a small handler that happens to be on the left margin of blocks. Try playing around with this and see where you find your "natural drag start" point:

https://react-dnd.github.io/react-dnd/examples/sortable/simple

Another thing worth exploring is drop zones detecting whether an element is being dragged over it based on its dimensions instead of just relying on the cursor.

[jasmussen]

CC: @nosolosw as I know he worked a lot on drag and drop.

[youknowriad]

I actually played with drag and drop a lot. I even explored alternative solutions #16457

The main problem is that there's no perfect solution when it comes to "nesting". I read a lot about the subject and most of the approaches don't really take into account nesting.

We have two main problems:

• The draggable area: This could be sovled with long clicks maybe. A long press triggers drag and drop anywhere on a block.
• Where to drop: If we use "live dnd" like my branch, nesting becomes very hard because you don't have the "time" to choose the level of nesting where you want to drop, if we keep the current approach (move blocks when releasing the mouse), the difficulty is how to draw these insertion points. (the problem being solved by this PR)

--
Ultimately, what we need is to conceptualize the behavior we want, design-wise and on the technical level before moving to implementation. At the moment we don't have a clear idea of our ideal behavior, let's figure that first.

[epiqueras]

I think that a draggable area feature and not having to drag past half of the target block's height will make a massive difference. Basically, have it work like the example I linked to.

Live DnD is more of a nice to have, but not crucial feature.

[epiqueras]

Closing this as the approach was not sound for inner blocks.