Try fixing the sibling inserter

[jasmussen]

This PR partially fixes #7508.

In #7220 we introduced a new behavior for the sibling inserter, which requires a click on the plus in the center as opposed to just clicking between two blocks.

Turns out it was sort of a race condition between onClick and onMouseDown, the latter which fires first. So in a way, the Firefox and Safari behavior of selecting the block (which is selected onMouseDown) as opposed to clicking the sibling inserter was the correct one.

This PR "fixes" it by also making the sibling inserter use onMouseDown. But it's still labelled a try branch, as I'm not sure this is a kosher approach. If it is, we need to fix a regression this branch introduces on its own, which is that it doesn't set focus properly on the newly inserted block.

Thoughts?

[tofumatt]

Trying this locally now...

[tofumatt]

My immediate thought is: how does this work with a keyboard user? I forget if mouseDown is fired for keyboard events, but I feel like it wouldn't be. 🤷‍♂️

[jasmussen]

Oh yes, interesting. This doesn't work with a keyboard, but click does. (ノ°Д°)ノ︵ ┻━┻

So, in lieu of that — do you have any other ideas on how to address this? I.e. is there a way to prevent the onClick on the sibling inserter to propogate into a mouseDown event also?

I also have a plan B idea, but worth exploring the above first it seems.

[tofumatt]

I'm not sure what to do to fix this exactly, but I know changing the render() method in editor/components/block-list/insertion-point.js to:

// editor/components/block-list/insertion-point.js
render() {
	const { isInserterFocused } = this.state;
	const { showInsertionPoint, showInserter } = this.props;

	return (
		<div className="editor-block-list__insertion-point">
			{ true && <div className="editor-block-list__insertion-point-indicator" /> }
			{ true && (
				<div className={ classnames( 'editor-block-list__insertion-point-inserter', { 'is-visible': true } ) }>
					<IconButton
						icon="insert"
						className="editor-block-list__insertion-point-button"
						onClick={ this.onClick }
						label={ __( 'Insert block' ) }
						onFocus={ this.onFocusInserter }
						onBlur={ this.onBlurInserter }
					/>
				</div>
			) }
		</div>
	);
}

fixes it. I'll look through the event propagation chain but it's quite a maze! 😃

[tofumatt]

We chatted in Slack about this a bit: https://wordpress.slack.com/archives/C02QB2JS7/p1529923657000479

Basically this approach isn't keyboard-accessible, and it seems in general there are a few issues with the sibling inserter in Firefox–maybe some need follow-up issues.

[jasmussen]

👍 👍

Just to reiterate the desired behavior:

• The sibling inserter exists between blocks
• You should be able to click it or tab to it
• The sibling inserter should never be covered by the block toolbar, so if the block toolbar is present, the sibling inserter shouldn't be

Looking at other options now.