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 index 6e3c77fe1ca186..582a9aa190c721 100644 --- 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 index c07e6fc07be605..1aae7b99cbf140 100644 --- 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 index e28591f78e601f..c479741317459c 100644 --- 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 index 8e8580674d1733..8bd1e226aeda66 100644 --- 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 ( <>