Sibling inserters should never constantly overlap the content of the selected block

[ZebulanStanphill]

The issue

Sibling inserters take up a considerable amount of space in the UI. Not visually, but they actually do overlap a considerable amount of the content of a block. Currently, this does not cause many issues since all blocks currently have margins applied to their content, preventing most cases of overlap.

However, these automatic margins go against the idea of WYSIWYG editing and should probably be removed in the future (see #8350). Additionally, custom blocks and themes can already override styles, causing the overlapped area to become more apparent.

Thoughts on possible solutions

First of all, if at all possible, the area you hover to make the sibling inserter become visible should not prevent you from editing content that would be otherwise overlapped by the hover area.

However, this still leaves the inserter button itself overlapping a portion of the content. You could reduce this issue by making the button a bit smaller (it could be the same size as the inserter in empty Paragraph blocks), but the button would still be overlapping a portion of the block, albeit a small one.

In my opinion, no UI should constantly cover up part of the content of the selected block, making it unreachable. I think that the best solution here would be to make the sibling inserter button appear entirely outside the border of the selected block, just like the formatting toolbar, movement controls, and ellipsis.

Of course, a question is raised: what should the sibling inserter should look like with these modifications? I am not completely sure what the answer is. #6224 has some mockups integrating the sibling inserter into the same toolbar as the movement controls and ellipsis, and that would certainly fix this issue. However, no UI design in that ticket has been agreed upon yet, so perhaps the best solution looks different.

Related issues and PRs

• Display block tools underneath the block, instead of to the sides #6224
• Confusing + button behavior #7271
• Sibling inserter doesn't appear above selected block with no toolbar #7884
• Spacer placed before Columns can't be resized inline #8206
• Try moving block margins to each block #8350
• Inserter: sibling insertion point at top of selected block covers up part of block content #8881
• Revise sibling inserter to be more consistent, appear in a more logical position, and not overlap the content of the selected block #9202

[designsimply]

Closing to try to hopefully consolidate this one into #8881 which covers a case where the sibling insertion point overlaps the content in a block. Let's keep just one or the other since these issues are both very similar.