Handle deselect by escape at block component

WordPress · May 18, 2017 · f520429 · f520429
1 parent 535b475
commit f520429
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
@@ -39,7 +39,7 @@ class VisualEditorBlock extends wp.element.Component {
 		this.setAttributes = this.setAttributes.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;
@@ -88,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 ) {
@@ -180,7 +187,7 @@ class VisualEditorBlock extends wp.element.Component {
 				ref={ this.bindBlockNode }
 				onClick={ this.selectAndStopPropagation }
 				onFocus={ onSelect }
-				onKeyDown={ this.removeOnBackspace }
+				onKeyDown={ this.removeOrDeselect }
 				onMouseEnter={ onHover }
 				onMouseMove={ this.maybeHover }
 				onMouseLeave={ onMouseLeave }

diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { cond } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,26 +17,15 @@ import VisualEditorBlock from './block';
 import PostTitle from '../../post-title';
 import { getBlockUids } from '../../selectors';
 
-/**
- * Returns true if the key pressed is the escape key, or false otherwise.
- *
- * @param  {KeyboardEvent} event Key event to test
- * @return {Boolean}             Whether event is escape key press
- */
-function isEscapeKey( event ) {
-	return 27 /* Escape */ === event.keyCode;
-}
-
 function VisualEditor( { blocks, clearSelectedBlock } ) {
-	// Disable reason: Focus transfers between blocks are handled by focusable
-	// block elements. Capture unhandled event bubbling as unselect intent.
+	// Disable reason: Focus transfer between blocks and key events are handled
+	// by focused block element. Consider unhandled click bubbling as unselect.
 
-	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 	return (
 		<div
 			role="region"
 			aria-label={ __( 'Visual Editor' ) }
-			onKeyPress={ cond( [ [ isEscapeKey, clearSelectedBlock ] ] ) }
 			onClick={ clearSelectedBlock }
 			className="editor-visual-editor">
 			<PostTitle />
@@ -47,7 +35,7 @@ function VisualEditor( { blocks, clearSelectedBlock } ) {
 			<Inserter position="top right" />
 		</div>
 	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions */
+	/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 }
 
 export default connect(