diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 66f82162c36bcb..30ed77f0f1a9ab 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -77,23 +77,27 @@ function BlockPopover( }; }, [ selectedElement ] ); - const { isZoomOut, sectionRootClientId, getParentSectionBlock } = useSelect( - ( select ) => { - const { - isZoomOut: isZoomOutSelector, - getSectionRootClientId, - getParentSectionBlock: getParentSectionBlockFn, - } = unlock( select( blockEditorStore ) ); - - const root = getSectionRootClientId(); - return { - sectionRootClientId: root, - isZoomOut: isZoomOutSelector(), - getParentSectionBlock: getParentSectionBlockFn, - }; - }, - [] - ); + const { + isZoomOut, + sectionRootClientId, + getParentSectionBlock, + getBlockOrder, + } = useSelect( ( select ) => { + const { + isZoomOut: isZoomOutSelector, + getSectionRootClientId, + getParentSectionBlock: getParentSectionBlockFn, + getBlockOrder: getBlockOrderFn, + } = unlock( select( blockEditorStore ) ); + + const root = getSectionRootClientId(); + return { + sectionRootClientId: root, + isZoomOut: isZoomOutSelector(), + getParentSectionBlock: getParentSectionBlockFn, + getBlockOrder: getBlockOrderFn, + }; + }, [] ); // These elements are used to position the zoom out view vertical toolbar // correctly, relative to the selected section. @@ -101,6 +105,8 @@ function BlockPopover( const parentSectionElement = useBlockElement( getParentSectionBlock( clientId ) ?? clientId ); + const isSectionSelected = + getBlockOrder( sectionRootClientId ).includes( clientId ); const popoverAnchor = useMemo( () => { if ( @@ -123,7 +129,7 @@ function BlockPopover( // selected section. This condition changes the anchor of the toolbar // to the section instead of the block to handle blocksn that are // not full width and nested blocks to keep section height. - if ( isZoomOut ) { + if ( isZoomOut && isSectionSelected ) { // Compute the height based on the parent section of the // selected block, because the selected block may be // shorter than the section. 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 b24644de51fcc6..97737b4ec2f5b4 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,7 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; /** * Source of truth for which block tools are showing in the block editor. @@ -24,7 +25,9 @@ export function useShowBlockTools() { getSettings, __unstableGetEditorMode, isTyping, - } = select( blockEditorStore ); + getBlockOrder, + getSectionRootClientId, + } = unlock( select( blockEditorStore ) ); const clientId = getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId(); @@ -42,8 +45,14 @@ export function useShowBlockTools() { editorMode === 'edit' && isEmptyDefaultBlock; const isZoomOut = editorMode === 'zoom-out'; + const isSectionSelected = getBlockOrder( + getSectionRootClientId() + ).includes( clientId ); const _showZoomOutToolbar = - clientId && isZoomOut && ! _showEmptyBlockSideInserter; + clientId && + isZoomOut && + ! _showEmptyBlockSideInserter && + isSectionSelected; const _showBlockToolbarPopover = ! _showZoomOutToolbar && ! getSettings().hasFixedToolbar &&