Writing Flow: Unset typing flag if Escape pressed (#10906)

packages/editor/src/components/observe-typing/index.js

@@ -1,15 +1,23 @@
 /**
  * External dependencies
  */
-import { includes } from 'lodash';
+import { over, includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { isTextField } from '@wordpress/dom';
-import { UP, RIGHT, DOWN, LEFT, ENTER, BACKSPACE } from '@wordpress/keycodes';
+import {
+	UP,
+	RIGHT,
+	DOWN,
+	LEFT,
+	ENTER,
+	BACKSPACE,
+	ESCAPE,
+} from '@wordpress/keycodes';
 import { withSafeTimeout, compose } from '@wordpress/compose';
 
 /**
@@ -41,6 +49,12 @@ class ObserveTyping extends Component {
 		this.stopTypingOnMouseMove = this.stopTypingOnMouseMove.bind( this );
 		this.startTypingInTextField = this.startTypingInTextField.bind( this );
 		this.stopTypingOnNonTextField = this.stopTypingOnNonTextField.bind( this );
+		this.stopTypingOnEscapeKey = this.stopTypingOnEscapeKey.bind( this );
+
+		this.onKeyDown = over( [
+			this.startTypingInTextField,
+			this.stopTypingOnEscapeKey,
+		] );
 
 		this.lastMouseMove = null;
 	}
@@ -108,6 +122,17 @@ class ObserveTyping extends Component {
 		}
 	}
 
+	/**
+	 * Unsets typing flag if user presses Escape while typing flag is active.
+	 *
+	 * @param {KeyboardEvent} event Keypress or keydown event to interpret.
+	 */
+	stopTypingOnEscapeKey( event ) {
+		if ( this.props.isTyping && event.keyCode === ESCAPE ) {
+			this.props.onStopTyping();
+		}
+	}
+
 	/**
 	 * Handles a keypress or keydown event to infer intention to start typing.
 	 *
@@ -165,7 +190,7 @@ class ObserveTyping extends Component {
 			<div
 				onFocus={ this.stopTypingOnNonTextField }
 				onKeyPress={ this.startTypingInTextField }
-				onKeyDown={ this.startTypingInTextField }
+				onKeyDown={ this.onKeyDown }
 			>
 				{ children }
 			</div>

test/e2e/specs/navigable-toolbar.test.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { forEach } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { newPost, pressWithModifier } from '../support/utils';
+
+describe( 'block toolbar', () => {
+	forEach( {
+		unified: true,
+		contextual: false,
+	}, ( isUnifiedToolbar, label ) => {
+		beforeEach( async () => {
+			await newPost();
+
+			await page.evaluate( ( _isUnifiedToolbar ) => {
+				const { select, dispatch } = wp.data;
+				const isCurrentlyUnified = select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' );
+				if ( isCurrentlyUnified !== _isUnifiedToolbar ) {
+					dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' );
+				}
+			}, isUnifiedToolbar );
+		} );
+
+		const isInRichTextEditable = () => page.evaluate( () => (
+			document.activeElement.classList.contains( 'editor-rich-text__tinymce' )
+		) );
+
+		const isInBlockToolbar = () => page.evaluate( () => (
+			!! document.activeElement.closest( '.editor-block-toolbar' )
+		) );
+
+		describe( label, () => {
+			it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => {
+				// Assumes new post focus starts in title. Create first new
+				// block by ArrowDown.
+				await page.keyboard.press( 'ArrowDown' );
+
+				// [TEMPORARY]: A new paragraph is not technically a block yet
+				// until starting to type within it.
+				await page.keyboard.type( 'Example' );
+
+				// [TEMPORARY]: With non-unified toolbar, the toolbar will not
+				// be visible since the user has entered a "typing" mode.
+				// Future iterations should ensure Alt+F10 works in a block
+				// to focus the toolbar regardless of whether it is presently
+				// visible.
+				await page.keyboard.press( 'Escape' );
+
+				// Upward
+				await pressWithModifier( 'Alt', 'F10' );
+				expect( await isInBlockToolbar() ).toBe( true );
+
+				// Downward
+				await page.keyboard.press( 'Escape' );
+				expect( await isInRichTextEditable() ).toBe( true );
+			} );
+		} );
+	} );
+} );