diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index f08341a191fa08..a8e55abe6f408b 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -18,22 +18,35 @@ import BlockToolbar from '../block-toolbar'; import { store as blockEditorStore } from '../../store'; function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { - const { blockType, hasParents } = useSelect( ( select ) => { - const { - getBlockName, - getBlockParents, - getSelectedBlockClientIds, - } = select( blockEditorStore ); - const { getBlockType } = select( blocksStore ); - const selectedBlockClientIds = getSelectedBlockClientIds(); - const selectedBlockClientId = selectedBlockClientIds[ 0 ]; - return { - blockType: - selectedBlockClientId && - getBlockType( getBlockName( selectedBlockClientId ) ), - hasParents: getBlockParents( selectedBlockClientId ).length, - }; - }, [] ); + const { blockType, hasParents, showParentSelector } = useSelect( + ( select ) => { + const { + getBlockName, + getBlockParents, + getSelectedBlockClientIds, + } = select( blockEditorStore ); + const { getBlockType } = select( blocksStore ); + const selectedBlockClientIds = getSelectedBlockClientIds(); + const selectedBlockClientId = selectedBlockClientIds[ 0 ]; + const parents = getBlockParents( selectedBlockClientId ); + const firstParentClientId = parents[ parents.length - 1 ]; + const parentBlockName = getBlockName( firstParentClientId ); + const parentBlockType = getBlockType( parentBlockName ); + + return { + blockType: + selectedBlockClientId && + getBlockType( getBlockName( selectedBlockClientId ) ), + hasParents: parents.length, + showParentSelector: hasBlockSupport( + parentBlockType, + '__experimentalParentSelector', + true + ), + }; + }, + [] + ); if ( blockType ) { if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) { return null; @@ -42,7 +55,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { // Shifts the toolbar to make room for the parent block selector. const classes = classnames( 'block-editor-block-contextual-toolbar', { - 'has-parent': hasParents, + 'has-parent': hasParents && showParentSelector, 'is-fixed': isFixed, } );