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

…isibility
WordPress · Nov 9, 2018 · 4b08bb4 · 4b08bb4
1 parent 660e46e
commit 4b08bb4
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/packages/editor/CHANGELOG.md b/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.

diff --git a/packages/editor/src/components/block-list/block-contextual-toolbar.js b/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' ) }
 		>

diff --git a/packages/editor/src/components/block-list/block.js b/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 }>
@@ -540,7 +553,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 }

diff --git a/packages/editor/src/components/navigable-toolbar/index.js b/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 (

diff --git a/test/e2e/specs/navigable-toolbar.test.js b/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 );