diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index 099323925384b8..d038662455dea4 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -34,18 +34,28 @@ function selector( select ) { getSettings, __unstableGetEditorMode, isTyping, - } = select( blockEditorStore ); + isSectionBlock, + getParentSectionBlock, + } = unlock( select( blockEditorStore ) ); const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId(); const editorMode = __unstableGetEditorMode(); + const isZoomOut = editorMode === 'zoom-out'; + let zoomOutToolbarClientId; + if ( isZoomOut ) { + zoomOutToolbarClientId = isSectionBlock( clientId ) + ? clientId + : getParentSectionBlock( clientId ); + } return { clientId, + zoomOutToolbarClientId, hasFixedToolbar: getSettings().hasFixedToolbar, isTyping: isTyping(), - isZoomOutMode: editorMode === 'zoom-out', + isZoomOutMode: isZoomOut, }; } @@ -63,10 +73,13 @@ export default function BlockTools( { __unstableContentRef, ...props } ) { - const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect( - selector, - [] - ); + const { + clientId, + zoomOutToolbarClientId, + hasFixedToolbar, + isTyping, + isZoomOutMode, + } = useSelect( selector, [] ); const isMatch = useShortcutEventMatch(); const { getBlocksByClientId, @@ -221,10 +234,10 @@ export default function BlockTools( { /> ) } - { showZoomOutToolbar && ( + { showZoomOutToolbar && !! zoomOutToolbarClientId && ( ) } diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js index 02a8f0583bcddf..abc70bb1469879 100644 --- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js +++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js @@ -8,6 +8,8 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; +import { isZoomOutMode } from '../../store/private-selectors'; /** * Source of truth for which block tools are showing in the block editor. @@ -24,7 +26,8 @@ export function useShowBlockTools() { getSettings, __unstableGetEditorMode, isTyping, - } = select( blockEditorStore ); + isSectionBlock, + } = unlock( select( blockEditorStore ) ); const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId(); @@ -42,12 +45,9 @@ export function useShowBlockTools() { editorMode === 'edit' && isEmptyDefaultBlock; const isZoomOut = editorMode === 'zoom-out'; - const _showZoomOutToolbar = - isZoomOut && - block?.attributes?.align === 'full' && - ! _showEmptyBlockSideInserter; + const _showZoomOutToolbar = isZoomOut; const _showBlockToolbarPopover = - ! _showZoomOutToolbar && + ( ! isZoomOutMode || ! isSectionBlock( clientId ) ) && ! getSettings().hasFixedToolbar && ! _showEmptyBlockSideInserter && hasSelectedBlock && diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index c3228980310656..993b9bfd90291b 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -15,8 +15,8 @@ import { getBlockName, getTemplateLock, getClientIdsWithDescendants, - isNavigationMode, getBlockRootClientId, + __unstableGetEditorMode, } from './selectors'; import { checkAllowListRecursive, @@ -522,7 +522,10 @@ export function isSectionBlock( state, clientId ) { return ( getBlockName( state, clientId ) === 'core/block' || getTemplateLock( state, clientId ) === 'contentOnly' || - ( isNavigationMode( state ) && sectionClientIds.includes( clientId ) ) + ( [ 'navigation', 'zoom-out' ].includes( + __unstableGetEditorMode( state ) + ) && + sectionClientIds.includes( clientId ) ) ); }