Expose before/after in drag and drop experience

[mtias]

We currently rely a bit too much on the ellipsis menu for precisely inserting a block before or after another block. This is not the most intuitive flow, since you need some time to become acquainted with the interface to discover it. Most users would tend to search for a block and try to drag it into place. They would generally fail to position the dragged object since we only use the sibling inserter.

Let's explore exposing the before/after hooks when dragging over any block so that we can improve awareness of this functionality. These hooks already exist, so it's a pity they are absent from the drag and drop experience. I think this could drastically improve the reliability of the editor.

[andrewserong]

Just adding the "Needs Design" label, it'd be good to explore some ideas for how this could look visually. I.e. do we reserve the area of the size of the block that's being dragged or attempt to preview how the block would look in the target position before releasing the mouse button? Or, do we go for something a bit more abstract for indicating the before/after positions (i.e. via additional lines or other visual indicators).

[ellatrix]

Let's explore exposing the before/after hooks

Could you elaborate on this? What are the before/after hooks?

[mtias]

Just the before / after slots for blocks—I imagine something like dragging on top of another block and getting a dropzone popover for before / after. If we ever add displacement, this becomes mute.

[ellatrix]

I guess I'm not following. When you drag a block from the inserter over a block in the canvas, it already shows the before/after insertion point, depending on whether you're dragging over the top half or bottom half?