diff --git a/packages/block-editor/src/components/content-blocks-list/index.js b/packages/block-editor/src/components/content-blocks-list/index.js index cf893004c4fe5..3de4fcda3c5d2 100644 --- a/packages/block-editor/src/components/content-blocks-list/index.js +++ b/packages/block-editor/src/components/content-blocks-list/index.js @@ -17,26 +17,24 @@ import { store as blockEditorStore } from '../../store'; import BlockIcon from '../block-icon'; export default function ContentBlocksList( { rootClientId } ) { - const { contentBlocks, selectedBlockClientId } = useSelect( + const contentBlocks = useSelect( ( select ) => { const { + getSelectedBlockClientId, __experimentalGetContentClientIdsTree, getBlockName, - getSelectedBlockClientId, } = select( blockEditorStore ); - return { - contentBlocks: __experimentalGetContentClientIdsTree( - rootClientId - ) - .map( ( block ) => ( { - ...block, - blockName: getBlockName( block.clientId ), - } ) ) - .filter( - ( { blockName } ) => blockName !== 'core/list-item' + const selectedBlockClientId = getSelectedBlockClientId(); + return __experimentalGetContentClientIdsTree( rootClientId ) + .map( ( block ) => ( { + ...block, + blockName: getBlockName( block.clientId ), + isSelected: blockHasDescendant( + block, + selectedBlockClientId ), - selectedBlockClientId: getSelectedBlockClientId(), - }; + } ) ) + .filter( ( { blockName } ) => blockName !== 'core/list-item' ); }, [ rootClientId ] ); @@ -49,12 +47,12 @@ export default function ContentBlocksList( { rootClientId } ) { return ( - { contentBlocks.map( ( { clientId, blockName } ) => { + { contentBlocks.map( ( { clientId, blockName, isSelected } ) => { const blockType = getBlockType( blockName ); return (