Try another approach to fixing the sibling inserter in Firefox (#7530)

* Try another approach to fixing the sibling inserter in Firefox

This PR partially fixes #7508. It is an alternate version of #7525, though much the same.

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 in addition to this, it uses onClick as well, so it's still keyboardable.

The net effect is that both work, with the added benefit that in Firefox and Safari, the block that you're hovering isn't briefly "selected" when you're clicking.

* Use the onClick handler for mouseDown

* Fix issues in Firefox and Safari

Turns out this issue has been present in some hidden form for a long time, and _partially fixed_ in Chrome. But there has always been a race condition, it looks like, between onClick, onFocus and onMouseDown.

This commit simply adds the "onFocusInserter" action to the onMouseDown event as well, which seems to solve the issue.

You still briefly see the block being selected and the toolbar appearing in Firefox and Safari, but at least this can work as a hotfix pending further investigation or improvements.

* Add comment.

editor/components/block-list/insertion-point.js

@@ -27,6 +27,7 @@ class BlockInsertionPoint extends Component {
 	onFocusInserter( event ) {
 		// We stop propagation of the focus event to avoid selecting the current block
 		// While we're trying to insert a new block
+		// We also attach this to onMouseDown, due to a difference in behavior in Firefox and Safari, where buttons don't receive focus: https://gist.github.com/cvrebert/68659d0333a578d75372
 		event.stopPropagation();
 
 		this.setState( {
@@ -65,6 +66,7 @@ class BlockInsertionPoint extends Component {
 							onClick={ this.onClick }
 							label={ __( 'Insert block' ) }
 							onFocus={ this.onFocusInserter }
+							onMouseDown={ this.onFocusInserter }
 							onBlur={ this.onBlurInserter }
 						/>
 					</div>