Skip to content

Commit

Permalink
Try another approach to fixing the sibling inserter in Firefox
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
jasmussen committed Jun 25, 2018
1 parent bf69697 commit ce868e2
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions editor/components/block-list/insertion-point.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ class BlockInsertionPoint extends Component {
this.onBlurInserter = this.onBlurInserter.bind( this );
this.onFocusInserter = this.onFocusInserter.bind( this );
this.onClick = this.onClick.bind( this );
this.onMouseDown = this.onMouseDown.bind( this );
}

onFocusInserter( event ) {
Expand Down Expand Up @@ -50,6 +51,16 @@ class BlockInsertionPoint extends Component {
}
}

onMouseDown() {
const { layout, rootUID, index, ...props } = this.props;
props.insertDefaultBlock( { layout }, rootUID, index );
props.startTyping();
this.onBlurInserter();
if ( props.onInsert ) {
this.props.onInsert();
}
}

render() {
const { isInserterFocused } = this.state;
const { showInsertionPoint, showInserter } = this.props;
Expand All @@ -63,6 +74,7 @@ class BlockInsertionPoint extends Component {
icon="insert"
className="editor-block-list__insertion-point-button"
onClick={ this.onClick }
onMouseDown={ this.onMouseDown }
label={ __( 'Insert block' ) }
onFocus={ this.onFocusInserter }
onBlur={ this.onBlurInserter }
Expand Down

0 comments on commit ce868e2

Please sign in to comment.