Gutenberg: Inserter: sibling insertion point at top of selected block covers up part of block content

[ZebulanStanphill]

The issue

The markup for the sibling inserter at the top of a block can cover up part of the block content, even when the block is selected and that sibling inserter is not visible.

Pictured here is a Paragraph block with font size set to 8px; the text is almost completely unselectable due to the div that is covering up most of the block content:

This issue becomes even more apparent for blocks with custom top/bottom margins or when themes style the core blocks to have smaller vertical margins. Removing the margins that are currently applied by default to all blocks would also expose this issue more; see #8350.

On a related note, I think sibling inserters should come after the content of a block both semantically and visually. You usually want to use a sibling inserter _after_ the current block, not before.

Steps to reproduce

1. Insert a Paragraph block
2. Add a single line of text to the Paragraph.
3. Set the font size of the Paragraph to 8px or less.
4. Try to select the text to edit it.
5. Notice how hard it is to select the text.

Related issues and PRs

• #6224
• #7271
• #7884
• #8206
• #8350
• #8883
• #9202

[chrisvanpatten]

So this to me seems like a bug, not an intentional choice. It could be fixed by setting

.editor-block-list__block>.editor-block-list__insertion-point {
  top: -28px;
}

.editor-block-list__insertion-point-inserter {
  top: 0;
}

This basically moves the inserter's container div to be positioned between the two blocks, rather than moving the inserter button itself.

In a quick test, it seems to work without any changes in behavior, other than making the top line of a paragraph block's text accessible, which is the goal.

Tagging in @jasmussen for feedback on that, because I might be missing a very obvious reason the inner div is moved up rather than the insertion-point container :)

[ZebulanStanphill]

@chrisvanpatten Nice! Notably, even with this fix, the sibling inserter itself (as in the clickable button) would still overlap a portion of the bottom of the block no matter what. I reported that in #8883, but that issue was closed as a duplicate of this one.

[jasmussen]

Taking a look. Also CC: @aduth as we chatted yesterday about it being hard to set cursor in text, this is possibly why.

[jasmussen]

Thanks both, good ticket, and thanks for the proposed fix, @chrisvanpatten, though alas this just moves the issue to the bottom of the paragraph instead of the top. But I will investigate and see if I can find a fix.

[jasmussen]

Actually Chris, you were right and I was wrong. Your fix, plus or minus a few tweaks, I have implemented in https://github.com/WordPress/gutenberg/pull/9229 which fixes this. Props!