Refactor useCanContextualToolbarShow for simplicity and clarity (#56914)

* Refactor useCanContextualToolbarShow for simplicity and clarity - Rename to useCanBlockToolbarBeFocused: Each usage of useCanContextualTool barShow ended up as one blockToolbarCanBeFocused const. - The scenarios of when the block toolbar can be focused was much simpler t han the implemented checks. Refactored for the scenarios in which it can be focused. * Update packages/block-editor/src/utils/use-can-block-toolbar-be-focused.js Co-authored-by: Andrei Draganescu <[email protected]> --------- Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: Andrei Draganescu <[email protected]>
WordPress · Dec 19, 2023 · 1ef449f · 1ef449f
1 parent 395b18f
commit 1ef449f
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 121 deletions.
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -9,7 +9,7 @@ import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
-import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
+import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
@@ -39,7 +39,7 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
-	useShouldContextualToolbarShow,
+	useCanBlockToolbarBeFocused,
 	cleanEmptyObject,
 	useStyleOverride,
 	BlockQuickNavigation,

diff --git a/packages/block-editor/src/utils/use-can-block-toolbar-be-focused.js b/packages/block-editor/src/utils/use-can-block-toolbar-be-focused.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Returns true if the block toolbar should be able to receive focus.
+ *
+ * @return {boolean} Whether the block toolbar should be able to receive focus
+ */
+export function useCanBlockToolbarBeFocused() {
+	return useSelect( ( select ) => {
+		const {
+			__unstableGetEditorMode,
+			getBlock,
+			getSettings,
+			getSelectedBlockClientId,
+			getFirstMultiSelectedBlockClientId,
+		} = unlock( select( blockEditorStore ) );
+
+		const selectedBlockId =
+			getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
+		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
+			getBlock( selectedBlockId ) || {}
+		);
+
+		// Fixed Toolbar can be focused when:
+		// - a block is selected
+		// - fixed toolbar is on
+		// Block Toolbar Popover can be focused when:
+		// - a block is selected
+		// - we are in edit mode
+		// - it is not an empty default block
+		return (
+			!! selectedBlockId &&
+			( getSettings().hasFixedToolbar ||
+				( __unstableGetEditorMode() === 'edit' &&
+					! isEmptyDefaultBlock ) )
+		);
+	}, [] );
+}
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
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -26,7 +26,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editPostStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -73,17 +73,8 @@ function HeaderToolbar( { hasFixedToolbar } ) {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	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;
+	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
+
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 

diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -24,7 +24,7 @@ import RedoButton from '../undo-redo/redo';
 import { store as editSiteStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -82,17 +82,8 @@ export default function DocumentTools( {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	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;
+	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(

diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js
@@ -22,7 +22,7 @@ import useLastSelectedWidgetArea from '../../../hooks/use-last-selected-widget-a
 import { store as editWidgetsStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+const { useCanBlockToolbarBeFocused } = unlock( blockEditorPrivateApis );
 
 function DocumentTools() {
 	const isMediumViewport = useViewportMatch( 'medium' );
@@ -75,17 +75,8 @@ function DocumentTools() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
-	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;
+	const blockToolbarCanBeFocused = useCanBlockToolbarBeFocused();
 
 	return (
 		<NavigableToolbar