Spacer placed before Columns can't be resized inline

[chrisvanpatten]

Describe the bug
All the fixes applied to nested blocks with collapsed margins make it impossible to resize a Spacer from the drag handle when it's placed before a Columns block.

To Reproduce
Steps to reproduce the behavior:

1. Insert a spacer block
2. Insert a columns block immediately after
3. Try to grab the drag handle on the spacer block
4. Note that the in-between inserter covers it

Expected behavior
You should be able to grab the drag handle on the Spacer block.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari 11.1.1
• Gutenberg: master

[chrisvanpatten]

FWIW, variations on this issue have been reported at a few points but I believe this is the first report of this specific to the Columns block. It appears fixed in all other contexts.

[ZebulanStanphill]

What I have started to realize from UI issues like this is that you should not have any block UI attached to the current block that covers up the content of the currently-selected block.

My suggestion would be to change the sibling inserter to appear below the edge of the currently selected block. Maybe it would look like a semi-circle or something, or maybe it would just look similar to how it does now, but shifted downward.

Also, just in general the sibling inserter button seems a bit too large. The one that appears in the empty placeholder block is a bit smaller, and I think it makes sense for the sibling inserter to be the same size.

This also ties into the whole issue of the sibling inserter not being the trailing inserter. Right now, the sibling inserter is attached to and positioned from the top of blocks. I think the sibling inserters should appear below blocks, and they should always be positioned outside of the border of the selected block content. See the discussion in #7271.

To complicate things further, this also may tie in to the switch to having the arrow movers and ellipsis appear above/below the block. If they are shown in a bar below the block, then you could just throw the sibling inserter into that same bar. Actually, that is pretty much what already happens on mobile.

On yet another related note, I wonder if having the block hover outline extend beyond the actual block borders is a good idea. It results in odd situations like this one, for one. I think something like the block hierarchy mockup shown in #6459 (comment) may be a better solution to selecting parent blocks.

[chrisvanpatten]

This has improved in 3.6 but only about the top half of the spacer icon is actually selectable. Better than before, but still a bit off.

[ZebulanStanphill]

Related: #8881 and #8883.

[chrisvanpatten]

Working on a PR for this.