Fix: Blocks: Alt+F10 should navigate to block toolbar regardless of v…

…isibility (#11607)

## Description
Closes: #10907
When pressing alt + f10 if the contextual toolbar was not visible because the user was typing, we did not focus the block contextual toolbar, and we focused the header instead.

This PR addresses this problem.
To solve the problem, the PR performs the following actions:
Adds a prop to NavigableToolbar that enables it to focus when mounting.
Adds an event handler for pressing alt+f10 key combination on BlockListBlock and state flag the indicates that the handling is in progress.

## How has this been tested?
I checked the unified toolbar mode was not enabled.
I added a paragraph, I wrote something until the toolbar disappears I pressed alt+f10, and I verified the block toolbar appeared with the first item focused.
I repeated the test with other blocks, e.g., writing on the image caption.

packages/editor/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 ## 6.2.1 (2018-11-09)
 
+### New Features
+
+- In `NavigableToolbar`, a property focusOnMount was added, if true, the toolbar will get focus as soon as it mounted. Defaults to false.
+
 ### Polish
 
 - Reactive block styles.

packages/editor/src/components/block-list/block-contextual-toolbar.js

@@ -9,9 +9,10 @@ import { __ } from '@wordpress/i18n';
 import NavigableToolbar from '../navigable-toolbar';
 import { BlockToolbar } from '../';
 
-function BlockContextualToolbar() {
+function BlockContextualToolbar( { focusOnMount } ) {
 	return (
 		<NavigableToolbar
+			focusOnMount={ focusOnMount }
 			className="editor-block-contextual-toolbar"
 			aria-label={ __( 'Block Toolbar' ) }
 		>

packages/editor/src/components/block-list/block.js

@@ -22,7 +22,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	getUnregisteredTypeHandlerName,
 } from '@wordpress/blocks';
-import { withFilters } from '@wordpress/components';
+import { KeyboardShortcuts, withFilters } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -57,6 +57,7 @@ export class BlockListBlock extends Component {
 		this.bindBlockNode = this.bindBlockNode.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
 		this.maybeHover = this.maybeHover.bind( this );
+		this.forceFocusedContextualToolbar = this.forceFocusedContextualToolbar.bind( this );
 		this.hideHoverEffects = this.hideHoverEffects.bind( this );
 		this.mergeBlocks = this.mergeBlocks.bind( this );
 		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
@@ -78,6 +79,7 @@ export class BlockListBlock extends Component {
 			dragging: false,
 			isHovered: false,
 		};
+		this.isForcingContextualToolbar = false;
 	}
 
 	componentDidMount() {
@@ -87,6 +89,11 @@ export class BlockListBlock extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
+		if ( this.isForcingContextualToolbar ) {
+			// The forcing of contextual toolbar should only be true during one update,
+			// after the first update normal conditions should apply.
+			this.isForcingContextualToolbar = false;
+		}
 		if ( this.props.isTypingWithinBlock || this.props.isSelected ) {
 			this.hideHoverEffects();
 		}
@@ -372,6 +379,12 @@ export class BlockListBlock extends Component {
 		}
 	}
 
+	forceFocusedContextualToolbar() {
+		this.isForcingContextualToolbar = true;
+		// trigger a re-render
+		this.setState( () => ( {} ) );
+	}
+
 	render() {
 		return (
 			<HoverArea container={ this.wrapperNode }>
@@ -541,7 +554,30 @@ export class BlockListBlock extends Component {
 										isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
 									/>
 								) }
-								{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
+								{ (
+									shouldShowContextualToolbar ||
+									this.isForcingContextualToolbar
+								) && (
+									<BlockContextualToolbar
+										// If the toolbar is being shown because of being forced
+										// it should focus the toolbar right after the mount.
+										focusOnMount={ this.isForcingContextualToolbar }
+									/>
+								) }
+								{ (
+									! shouldShowContextualToolbar &&
+									isSelected &&
+									! hasFixedToolbar &&
+									! isEmptyDefaultBlock
+								) && (
+									<KeyboardShortcuts
+										bindGlobal
+										eventName="keydown"
+										shortcuts={ {
+											'alt+f10': this.forceFocusedContextualToolbar,
+										} }
+									/>
+								) }
 								<IgnoreNestedEvents
 									ref={ this.bindBlockNode }
 									onDragStart={ this.preventDrag }

packages/editor/src/components/navigable-toolbar/index.js

@@ -61,6 +61,12 @@ class NavigableToolbar extends Component {
 		}
 	}
 
+	componentDidMount() {
+		if ( this.props.focusOnMount ) {
+			this.focusToolbar();
+		}
+	}
+
 	render() {
 		const { children, ...props } = this.props;
 		return (

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

@@ -43,13 +43,6 @@ describe( 'block toolbar', () => {
 				// 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 );