Drag and Drop deadzones

[tomjn]

Describe the bug

When dragging and dropping there are 2 equivalent but separate zones that show as a thin blue bar, and a large deadzone inbetween that if dropped on, nothing happens

To Reproduce

https://youtu.be/__GuOHcaD3s

Expected behavior

I expected that dragging the block in between 2 paragraph blocks would insert it when I let go of the block

I also expected significantly larger drop zones, and indicators. I was also surprised to see 2 separate targets, the bottom of the block and the top of the next block, which made little sense, as both are equivalent. In some scenarios there was even additional insertion points on blocks that did not have child block capability. The targets were also difficult to target, being very thin and small

Screenshots

https://youtu.be/__GuOHcaD3s

Desktop (please complete the following information):

• OS: MacOS High Sierra
• Browser Chrome
• Version 68

Additional context

• Gutenberg v3.4

[designsimply]

Adding a screenshot for reference:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14134&action=edit running WordPress 4.9.8 and Gutenberg 3.4.0 using Chrome 67.0.3396.99 on macOS 10.13.6.}

[talldan]

I've closed #9821 as a duplicate. Thought I'd drop the gif demonstrating the issue from there in here:

[tomjn]

Of note, I'm not sure why the space inbetween the first and second block has 2 target zones

[JJJ]

Hey @tomjn! I found this separately. I agree it all feels very wrong.

I’d go a step farther and say that this feature feels so wrong, breaking it down into smaller separate tasks is going to be hard to do, but required for it to be improved. So many little oddities.

It alone would be a blocker to merging into WordPress core for 5.0 if it were under my influence.

At the risk of stating the obvious (into an echo chamber), dragging and dropping blocks is a basic fundamental property of building with them. Everything from the original printing press to Minecraft requires easily and comfortably rearranging blocks in an intuitive way – this is not even close to there yet.

Seeing no movement and no response on this for 90 days is also worrisome.

What’s the polite way to get more eyes on this?

[mrwweb]

I spent the last week thinking that drag and drop didn't work because the discoverability of the drag handle is extremely high but the discoverability of the drop zones is extremely low.

My assumption was that I could drag a handle directly up and down because that's where the handle is and that's the direction I want to move things. The above drag and drop WILL NOT WORK:

To be clear, you can only drop blocks in between other blocks, not by placing the handle above the handle of other blocks.

If this can't be drastically improved, I think the behavior should be pulled and only the up/down arrow buttons should remain.

[talldan]

@mrwweb I regularly make the mistake of dragging directly up and down as well.

WRT the original report, I think this gif makes it a bit clearer what's happening (edit- ok, it was supposed to be clearer, but because the image quality is so low you can't see the grey area left behind by the dragged block 🤦‍♂️ ):

Each block is itself the dropzone, and when you drag a block over another, the top or bottom edge of the block's dropzone is highlighted depending on which one you're closer to.

I think what most would expect is that the dropzone is instead the space between the block instead of the block itself. I'm not sure that would work well either, since the space left behind by the dragged block would still have multiple dropzones.

[tomjn]

I thought the blue markers themselves were the dropzones

…

On Mon, 12 Nov 2018 at 06:06, Daniel Richards ***@***.***> wrote: @mrwweb <https://github.com/mrwweb> I regularly make the mistake of dragging directly up and down as well. WRT the original report, I think this gif makes it a bit clearer what's happening (it's now much clearer since the dragged block leaved behind a gray placeholder): [image: dragdrop] <https://user-images.githubusercontent.com/677833/48329376-7c945400-e683-11e8-9546-836e1fd107f3.gif> Each block is itself the dropzone, and when you drag a block over another, the top or bottom edge of the block's dropzone is highlighted depending on which one you're closer to. I think what most would expect is that the dropzone is instead the space between the block instead of the block. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8540 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADl55Ig1Wn0cjx1LZKhMg34rDo0qBjKks5uuQ_RgaJpZM4VvMH9> .

[talldan]

@tomjn That was my interpretation initially (just as a user), but the dropzone being the block explains why we can't drop between blocks:

[youknowriad]

Drag and drop behavior changed on WP 5.4 and I believe there's no dead zones now.