diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index ff86f07aa4caa4..74bf4af421dfbb 100644 --- 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 new file mode 100644 index 00000000000000..f118c88dc2b1d4 --- /dev/null +++ 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 deleted file mode 100644 index 1aae7b99cbf140..00000000000000 --- a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; -import { useViewportMatch } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import { store as blockEditorStore } from '../store'; -import { unlock } from '../lock-unlock'; - -/** - * Returns true if the contextual block toolbar should show, or false if it should be hidden. - * - * @return {boolean} Whether the block toolbar is hidden. - */ -export function useShouldContextualToolbarShow() { - const isLargeViewport = useViewportMatch( 'medium' ); - - const { - shouldShowContextualToolbar, - canFocusHiddenToolbar, - fixedToolbarCanBeFocused, - } = useSelect( - ( select ) => { - const { - __unstableGetEditorMode, - isMultiSelecting, - isTyping, - isBlockInterfaceHidden, - getBlock, - getSettings, - isNavigationMode, - getSelectedBlockClientId, - getFirstMultiSelectedBlockClientId, - } = unlock( select( blockEditorStore ) ); - - const isEditMode = __unstableGetEditorMode() === 'edit'; - const hasFixedToolbar = getSettings().hasFixedToolbar; - const isDistractionFree = getSettings().isDistractionFree; - const selectedBlockId = - getFirstMultiSelectedBlockClientId() || - getSelectedBlockClientId(); - const hasSelectedBlockId = !! selectedBlockId; - const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( - getBlock( selectedBlockId ) || {} - ); - - const _shouldShowContextualToolbar = - isEditMode && - ! hasFixedToolbar && - ( ! isDistractionFree || isNavigationMode() ) && - isLargeViewport && - ! isMultiSelecting() && - ! isTyping() && - hasSelectedBlockId && - ! isEmptyDefaultBlock && - ! isBlockInterfaceHidden(); - - const _canFocusHiddenToolbar = - isEditMode && - hasSelectedBlockId && - ! _shouldShowContextualToolbar && - ! hasFixedToolbar && - ! isDistractionFree && - ! isEmptyDefaultBlock; - - return { - shouldShowContextualToolbar: _shouldShowContextualToolbar, - canFocusHiddenToolbar: _canFocusHiddenToolbar, - fixedToolbarCanBeFocused: - ( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId, - }; - }, - [ 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 index c524a8842ad4cc..e1d059578809e0 100644 --- 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 index 9db8e091265e2f..837c825b2060a9 100644 --- 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 index 06376bbd762916..a9799ac993f9ab 100644 --- 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 (