Sibling inserter: fix dead zone between blocks

[ellatrix]

Description

Fixes #18733.
Fixes #10648.

This PR removes the "dead zone" between blocks by handling clicks on the inserter to focus the closest element.

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[aduth]

I can definitely feel the improvement with this. It's a much simpler solution as well to last I explored this in #16818.

One thing I included there which I'm curious if you think would be good or not, would be to change the cursor to cursor: text; to indicate to the user that it's an area they can click on to start typing.

I noticed something, which I'm not sure if is expected, but if you click on the dead zone twice (above a paragraph of text), then the caret becomes lost and I can no longer type:

https://cloudup.com/cPggOJCQzqn

[ellatrix]

@aduth Thank you for the review! I can reproduce the issue you're having with the second click. The problem is that we don't render the sibling inserter above a block when it is selected to avoid clashing with the toolbar. I'm starting to thing we should either:

• Detect clicks on the block container instead of the inserter, and reduce the inserter click target, or;
• Always display the inserter (and maybe only hide the button if a block is selected and the inserter is displayed above the block).

The first solution sounds cleaner to me.

[ellatrix]

I'm wary to create additional event listener on the block container though, since the goal is to eventually lighten the inner blocks DOM as well. Maybe this is a good enough first version and we can revisit it separately.

[ellatrix]

Ok, I went for the second option. This also makes it more obvious if there would be a problem with the sibling inserter displaying.

[aduth]

When in navigation mode, do we expect the sibling inserter to be available?

I note that there's no way to interact with it in the latest version of the plugin.

But in master (presumably after these changes), it is invisible, but still exists, and can still be interacted with:

[aduth]

Prior to these changes, pressing Shift+Tab from the paragraph text would focus and show the sibling inserter.

It still seems to be focused, but is no longer shown.

[aduth]

Prior to these changes, there was no hover interaction "above" a block to be able to click on the sibling inserter, but now it seems to be possible (it is invisible but interactable, like in #19719 (comment)).

[aduth]

I see this on master as well, but noting it all the same: Pressing Shift+Tab enough times from a paragraph (going all the way through contextual toolbars and movers), eventually I see an oddly-misplaced inserter:

Not really sure if that's expected.

[ellatrix]

@aduth That's the expected position since #19596. I agree that this needs to be revisited, but it works fine for now. Ideally we have a tabbable inserter before and after the block that is displayed somewhere in the middle of the top and bottom border. It's also expected that the inserter is positioned before the block toolbar in the DOM.

[ellatrix]

Sorry about the visible tooltip. I'll fix it in a follow up PR.