Editor: Add KeybindScope complement to NavigableToolbar

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

@@ -1,24 +1,13 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import NavigableToolbar from '../navigable-toolbar';
 import { BlockToolbar } from '../';
 
 function BlockContextualToolbar( { focusOnMount } ) {
 	return (
-		<NavigableToolbar
-			focusOnMount={ focusOnMount }
-			className="editor-block-contextual-toolbar"
-			/* translators: accessibility text for the block toolbar */
-			aria-label={ __( 'Block tools' ) }
-		>
-			<BlockToolbar />
-		</NavigableToolbar>
+		<div className="editor-block-contextual-toolbar">
+			<BlockToolbar focusOnMount={ focusOnMount } />
+		</div>
 	);
 }
 

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

@@ -7,7 +7,7 @@ import { get, reduce, size, first, last } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
+import { Component, Fragment, createRef } from '@wordpress/element';
 import {
 	focus,
 	isTextField,
@@ -22,7 +22,7 @@ import {
 	isUnmodifiedDefaultBlock,
 	getUnregisteredTypeHandlerName,
 } from '@wordpress/blocks';
-import { KeyboardShortcuts, withFilters } from '@wordpress/components';
+import { withFilters } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -45,6 +45,7 @@ import BlockMobileToolbar from './block-mobile-toolbar';
 import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from '../ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
+import NavigableToolbar from '../navigable-toolbar';
 import Inserter from '../inserter';
 import HoverArea from './hover-area';
 import { isInsideRootBlock } from '../../utils/dom';
@@ -77,6 +78,8 @@ export class BlockListBlock extends Component {
 			isHovered: false,
 		};
 		this.isForcingContextualToolbar = false;
+
+		this.multiSelectTarget = createRef();
 	}
 
 	componentDidMount() {
@@ -103,7 +106,7 @@ export class BlockListBlock extends Component {
 		// This ensures that it is not possible to continue editing the initially selected block
 		// when a multi-selection is triggered.
 		if ( this.props.isFirstMultiSelected && ! prevProps.isFirstMultiSelected ) {
-			this.wrapperNode.focus();
+			this.multiSelectTarget.current.focus();
 		}
 	}
 
@@ -520,7 +523,19 @@ export class BlockListBlock extends Component {
 								rootClientId={ rootClientId }
 							/>
 							{ isFirstMultiSelected && (
-								<BlockMultiControls rootClientId={ rootClientId } />
+								<Fragment>
+									<NavigableToolbar.KeybindScope
+										scopeId={ 'block-' + clientId }
+									>
+										<div
+											tabIndex={ -1 }
+											ref={ this.multiSelectTarget }
+										/>
+									</NavigableToolbar.KeybindScope>
+									<BlockMultiControls
+										rootClientId={ rootClientId }
+									/>
+								</Fragment>
 							) }
 							<div className="editor-block-list__block-edit">
 								{ shouldRenderMovers && (
@@ -554,43 +569,42 @@ export class BlockListBlock extends Component {
 										focusOnMount={ this.isForcingContextualToolbar }
 									/>
 								) }
-								{ ! shouldShowContextualToolbar &&
-									isSelected &&
-									! hasFixedToolbar &&
-									! isEmptyDefaultBlock && (
-									<KeyboardShortcuts
-										bindGlobal
-										eventName="keydown"
-										shortcuts={ {
-											'alt+f10': this.forceFocusedContextualToolbar,
-										} }
-									/>
-								) }
 								<IgnoreNestedEvents
 									ref={ this.bindBlockNode }
 									onDragStart={ this.preventDrag }
 									onMouseDown={ this.onPointerDown }
 									data-block={ clientId }
 								>
-									<BlockCrashBoundary onError={ this.onBlockError }>
-										{ isValid && blockEdit }
-										{ isValid && mode === 'html' && (
-											<BlockHtml clientId={ clientId } />
+									<NavigableToolbar.KeybindScope
+										onFocusToolbar={
+											! shouldShowContextualToolbar &&
+											isSelected &&
+											! hasFixedToolbar &&
+											! isEmptyDefaultBlock &&
+											this.forceFocusedContextualToolbar
+										}
+										scopeId={ 'block-' + clientId }
+									>
+										<BlockCrashBoundary onError={ this.onBlockError }>
+											{ isValid && blockEdit }
+											{ isValid && mode === 'html' && (
+												<BlockHtml clientId={ clientId } />
+											) }
+											{ ! isValid && [
+												<BlockInvalidWarning
+													key="invalid-warning"
+													clientId={ clientId }
+												/>,
+												<div key="invalid-preview">
+													{ getSaveElement( blockType, attributes ) }
+												</div>,
+											] }
+										</BlockCrashBoundary>
+										{ shouldShowMobileToolbar && (
+											<BlockMobileToolbar clientId={ clientId } />
 										) }
-										{ ! isValid && [
-											<BlockInvalidWarning
-												key="invalid-warning"
-												clientId={ clientId }
-											/>,
-											<div key="invalid-preview">
-												{ getSaveElement( blockType, attributes ) }
-											</div>,
-										] }
-									</BlockCrashBoundary>
-									{ shouldShowMobileToolbar && (
-										<BlockMobileToolbar clientId={ clientId } />
-									) }
-									{ !! error && <BlockCrashWarning /> }
+										{ !! error && <BlockCrashWarning /> }
+									</NavigableToolbar.KeybindScope>
 								</IgnoreNestedEvents>
 							</div>
 							{ showEmptyBlockSideInserter && (

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

@@ -3,6 +3,7 @@
  */
 import { withSelect } from '@wordpress/data';
 import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -12,32 +13,41 @@ import MultiBlocksSwitcher from '../block-switcher/multi-blocks-switcher';
 import BlockControls from '../block-controls';
 import BlockFormatControls from '../block-format-controls';
 import BlockSettingsMenu from '../block-settings-menu';
+import NavigableToolbar from '../navigable-toolbar';
 
-function BlockToolbar( { blockClientIds, isValid, mode } ) {
+function BlockToolbar( { blockClientIds, isValid, mode, focusOnMount } ) {
 	if ( blockClientIds.length === 0 ) {
 		return null;
 	}
 
-	if ( blockClientIds.length > 1 ) {
-		return (
-			<div className="editor-block-toolbar">
-				<MultiBlocksSwitcher />
-				<BlockSettingsMenu clientIds={ blockClientIds } />
-			</div>
+	const hasMultiSelection = blockClientIds.length > 1;
+
+	let controls;
+	if ( hasMultiSelection ) {
+		controls = (
+			<MultiBlocksSwitcher />
+		);
+	} else if ( mode === 'visual' && isValid ) {
+		controls = (
+			<Fragment>
+				<BlockSwitcher clientIds={ blockClientIds } />
+				<BlockControls.Slot />
+				<BlockFormatControls.Slot />
+			</Fragment>
 		);
 	}
 
 	return (
-		<div className="editor-block-toolbar">
-			{ mode === 'visual' && isValid && (
-				<Fragment>
-					<BlockSwitcher clientIds={ blockClientIds } />
-					<BlockControls.Slot />
-					<BlockFormatControls.Slot />
-				</Fragment>
-			) }
+		<NavigableToolbar
+			focusOnMount={ focusOnMount }
+			className="editor-block-toolbar"
+			/* translators: accessibility text for the block toolbar */
+			aria-label={ __( 'Block Toolbar' ) }
+			scopeId={ 'block-' + blockClientIds[ 0 ] }
+		>
+			{ controls }
 			<BlockSettingsMenu clientIds={ blockClientIds } />
-		</div>
+		</NavigableToolbar>
 	);
 }