Refactor useShouldContextualToolbarShow to not need a passed clientId…

… to simplify the code and apply it to the Widgets Editor.
WordPress · May 5, 2023 · e5c3cab · e5c3cab
1 parent 6b0ef39
commit e5c3cab
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 27 deletions.
diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js
@@ -75,7 +75,7 @@ function SelectedBlockPopover( {
 	);
 	const isToolbarForced = useRef( false );
 	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
-		useShouldContextualToolbarShow( clientId );
+		useShouldContextualToolbarShow();
 
 	const { stopTyping } = useDispatch( blockEditorStore );
 

diff --git a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js b/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js
@@ -14,14 +14,16 @@ import { unlock } from '../lock-unlock';
 /**
  * Returns true if the contextual block toolbar should show, or false if it should be hidden.
  *
- * @param {string} clientId The client ID of the block.
- *
  * @return {boolean} Whether the block toolbar is hidden.
  */
-export function useShouldContextualToolbarShow( clientId ) {
+export function useShouldContextualToolbarShow() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { shouldShowContextualToolbar, canFocusHiddenToolbar } = useSelect(
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useSelect(
 		( select ) => {
 			const {
 				__unstableGetEditorMode,
@@ -31,14 +33,19 @@ export function useShouldContextualToolbarShow( clientId ) {
 				getBlock,
 				getSettings,
 				isNavigationMode,
+				getSelectedBlockClientId,
+				getFirstMultiSelectedBlockClientId,
 			} = unlock( select( blockEditorStore ) );
 
 			const isEditMode = __unstableGetEditorMode() === 'edit';
 			const hasFixedToolbar = getSettings().hasFixedToolbar;
 			const isDistractionFree = getSettings().isDistractionFree;
-			const hasClientId = !! clientId;
+			const selectedBlockId =
+				getFirstMultiSelectedBlockClientId() ||
+				getSelectedBlockClientId();
+			const hasSelectedBlockId = !! selectedBlockId;
 			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
-				getBlock( clientId ) || {}
+				getBlock( selectedBlockId ) || {}
 			);
 
 			const _shouldShowContextualToolbar =
@@ -48,13 +55,13 @@ export function useShouldContextualToolbarShow( clientId ) {
 				isLargeViewport &&
 				! isMultiSelecting() &&
 				! isTyping() &&
-				hasClientId &&
+				hasSelectedBlockId &&
 				! isEmptyDefaultBlock &&
 				! isBlockInterfaceHidden();
 
 			const _canFocusHiddenToolbar =
 				isEditMode &&
-				hasClientId &&
+				hasSelectedBlockId &&
 				! _shouldShowContextualToolbar &&
 				! hasFixedToolbar &&
 				! isDistractionFree &&
@@ -63,13 +70,16 @@ export function useShouldContextualToolbarShow( clientId ) {
 			return {
 				shouldShowContextualToolbar: _shouldShowContextualToolbar,
 				canFocusHiddenToolbar: _canFocusHiddenToolbar,
+				fixedToolbarCanBeFocused:
+					( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId,
 			};
 		},
-		[ clientId, isLargeViewport ]
+		[ isLargeViewport ]
 	);
 
 	return {
 		shouldShowContextualToolbar,
 		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
 	};
 }
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -41,27 +41,15 @@ function HeaderToolbar() {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
-		selectedBlockId,
-		hasFixedToolbar,
 	} = useSelect( ( select ) => {
-		const {
-			hasInserterItems,
-			getBlockRootClientId,
-			getBlockSelectionEnd,
-			getSelectedBlockClientId,
-			getFirstMultiSelectedBlockClientId,
-			getSettings,
-		} = select( blockEditorStore );
+		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
+			select( blockEditorStore );
 		const { getEditorSettings } = select( editorStore );
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		return {
-			hasFixedToolbar: getSettings().hasFixedToolbar,
-			selectedBlockId:
-				getSelectedBlockClientId() ||
-				getFirstMultiSelectedBlockClientId(),
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			isInserterEnabled:
 				getEditorMode() === 'visual' &&
@@ -83,14 +71,17 @@ function HeaderToolbar() {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
-		useShouldContextualToolbarShow( selectedBlockId );
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
 	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
 	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
 	const blockToolbarCanBeFocused =
 		shouldShowContextualToolbar ||
 		canFocusHiddenToolbar ||
-		( ( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId );
+		fixedToolbarCanBeFocused;
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 

diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
@@ -7,6 +7,7 @@ import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
 import {
 	NavigableToolbar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
 import { listView, plus } from '@wordpress/icons';
@@ -22,6 +23,7 @@ import RedoButton from './undo-redo/redo';
 import MoreMenu from '../more-menu';
 import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../private-apis';
 
 function Header() {
 	const isMediumViewport = useViewportMatch( 'medium' );
@@ -70,6 +72,19 @@ function Header() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
+
 	return (
 		<>
 			<div className="edit-widgets-header">
@@ -90,6 +105,9 @@ function Header() {
 					<NavigableToolbar
 						className="edit-widgets-header-toolbar"
 						aria-label={ __( 'Document tools' ) }
+						shouldUseKeyboardFocusShortcut={
+							! blockToolbarCanBeFocused
+						}
 					>
 						<ToolbarItem
 							ref={ inserterButton }