Fix focus toolbar shortcut when breadcrumb and toolbar are both in DOM

WordPress · Nov 29, 2023 · ede3596 · ede3596
1 parent cd2393d
commit ede3596
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -47,6 +47,7 @@ const BlockToolbar = ( {
 		blockEditingMode,
 		blockType,
 		hasParents,
+		isKeyboardFocusShortcutActive,
 		isValid,
 		isVisual,
 		showParentSelector,
@@ -57,6 +58,7 @@ const BlockToolbar = ( {
 			getBlockParents,
 			getSelectedBlockClientIds,
 			isBlockValid,
+			isNavigationMode,
 			getBlockRootClientId,
 			getBlockEditingMode,
 		} = select( blockEditorStore );
@@ -76,6 +78,8 @@ const BlockToolbar = ( {
 				getBlockType( getBlockName( selectedBlockClientId ) ),
 
 			hasParents: parents.length,
+			isKeyboardFocusShortcutActive:
+				isFixed || ( ! isFixed && ! isNavigationMode() ),
 			isValid: selectedBlockClientIds.every( ( id ) =>
 				isBlockValid( id )
 			),
@@ -136,6 +140,7 @@ const BlockToolbar = ( {
 	return (
 		<NavigableToolbar
 			focusEditorOnEscape
+			shouldUseKeyboardFocusShortcut={ isKeyboardFocusShortcutActive }
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }

diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -98,6 +98,10 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 
 			// Test: Focus the block toolbar from empty block
 			await editor.insertBlock( { name: 'core/paragraph' } );
+			// This fails if we don't wait for the block toolbar to show.
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeVisible();
 			await toolbarUtils.moveToToolbarShortcut();
 			await expect(
 				toolbarUtils.blockToolbarParagraphButton