Drag & Drop Handle Alignment and Overlap with Short Blocks

[mrwweb]

Describe the bug
This is especially notable with the separator/hr block, but any short block (shorter than ~80px) has strange handle alignment. In this case, it looks weird that the handle isn't centered with the block (even though that's not the handle alignment on other blocks). Worse, it overlaps with the next block's handle, making it very hard to select a specific handle and even confusing which block the handle belongs to.

Expected behavior
Any area on the screen which shows UI when hovered, does not overlap with any other hover area.

Screenshots

Desktop (please complete the following information):
Win 10, Firefox 63, WP 5.0-beta3, no plugins, Twenty Nineteen

[designsimply]

Tested and confirmed using Firefox 63.0.1 on macOS 10.13.6 that the block movers and drag handles can overlap and appear off-center for blocks less than 80px in height, such as the separator block.

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=15677&action=edit running WordPress 4.9.8 and Gutenberg 4.3 using Firefox 63.0.1 on macOS 10.13.6.}

[mapk]

What if we eliminate the drag option from blocks less than ~80px in height? So the separator block would look something like this:

[mrwweb]

@mapk Is that because you don't think the use-case for dragging applies to short blocks?

[mapk]

@mrwweb, no. I'm sure the shorter blocks can benefit from dragging just as much as the other blocks. So that may be reason enough to not go that direction. I'm just suggesting it as a possible solution b/c it helps tighten up the arrows (which still allow for up/down movement and retains a11y), and it also helps prevent the other block movers from overlapping.

[mrwweb]

@mapk, in that case then I don't think that's the right solution. Part of me even hypothesizes that a section divider would is an especially useful thing to drag and drop.

As I mulled this over the other day, I had two potential ideas:

1. Use the Alignwide pattern for all drag handles:

2. Use some kind of "Handle-First" design

This would be a big change in behavior and require testing, but I wonder how it would look/feel if the default interface only shows the drag handle (the 6 dots) on hover/focus and then the up/down buttons appear when hovering or focusing the drag handle.

^^^ The handle would probably get top-aligned with the block.

[mapk]

I believe this gets resolved with #17315. I'll close this out, but if I'm mistaken, just let me know and we can reopen it.