diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index e3230769e08e7..f612e32760921 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -37,11 +37,11 @@ class VisualEditorBlock extends wp.element.Component { super( ...arguments ); this.bindBlockNode = this.bindBlockNode.bind( this ); this.setAttributes = this.setAttributes.bind( this ); - this.maybeDeselect = this.maybeDeselect.bind( this ); this.maybeHover = this.maybeHover.bind( this ); this.maybeStartTyping = this.maybeStartTyping.bind( this ); - this.removeOnBackspace = this.removeOnBackspace.bind( this ); + this.removeOrDeselect = this.removeOrDeselect.bind( this ); this.mergeBlocks = this.mergeBlocks.bind( this ); + this.selectAndStopPropagation = this.selectAndStopPropagation.bind( this ); this.previousOffset = null; } @@ -76,14 +76,6 @@ class VisualEditorBlock extends wp.element.Component { } } - maybeDeselect( event ) { - // Annoyingly React does not support focusOut and we're forced to check - // related target to ensure it's not a child when blur fires. - if ( ! event.currentTarget.contains( event.relatedTarget ) ) { - this.props.onDeselect(); - } - } - maybeStartTyping() { // We do not want to dispatch start typing if... // - State value already reflects that we're typing (dispatch noise) @@ -96,14 +88,21 @@ class VisualEditorBlock extends wp.element.Component { } } - removeOnBackspace( event ) { + removeOrDeselect( event ) { const { keyCode, target } = event; + + // Remove block on backspace if ( 8 /* Backspace */ === keyCode && target === this.node ) { this.props.onRemove( this.props.uid ); if ( this.props.previousBlock ) { this.props.onFocus( this.props.previousBlock.uid, { offset: -1 } ); } } + + // Deselect on escape + if ( 27 /* Escape */ === event.keyCode ) { + this.props.onDeselect(); + } } mergeBlocks( forward = false ) { @@ -124,6 +123,14 @@ class VisualEditorBlock extends wp.element.Component { } } + selectAndStopPropagation( event ) { + this.props.onSelect(); + + // Visual editor infers click as intent to clear the selected block, so + // prevent bubbling when occurring on block where selection is intended + event.stopPropagation(); + } + componentDidUpdate( prevProps ) { if ( this.previousOffset ) { window.scrollTo( @@ -178,10 +185,9 @@ class VisualEditorBlock extends wp.element.Component { return (