diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index f73a5de543bd4..8a8d1908f3854 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -21,7 +21,6 @@ import { copy } from '@wordpress/icons'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import useBlockDisplayInformation from '../use-block-display-information'; import BlockIcon from '../block-icon'; import BlockTransformationsMenu from './block-transformations-menu'; import { useBlockVariationTransforms } from './block-variation-transformations'; @@ -162,7 +161,6 @@ function BlockSwitcherDropdownMenuContents( { } export const BlockSwitcher = ( { clientIds } ) => { - const blockInformation = useBlockDisplayInformation( clientIds?.[ 0 ] ); const { canRemove, hasBlockStyles, @@ -175,9 +173,11 @@ export const BlockSwitcher = ( { clientIds } ) => { const { getBlockRootClientId, getBlocksByClientId, + getBlockAttributes, canRemoveBlocks, } = select( blockEditorStore ); - const { getBlockStyles, getBlockType } = select( blocksStore ); + const { getBlockStyles, getBlockType, getActiveBlockVariation } = + select( blocksStore ); const _blocks = getBlocksByClientId( clientIds ); if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) { return { invalidBlocks: true }; @@ -185,18 +185,24 @@ export const BlockSwitcher = ( { clientIds } ) => { const rootClientId = getBlockRootClientId( clientIds ); const [ { name: firstBlockName } ] = _blocks; const _isSingleBlockSelected = _blocks.length === 1; + const blockType = getBlockType( firstBlockName ); + let _icon; if ( _isSingleBlockSelected ) { - _icon = blockInformation?.icon; // Take into account active block variations. + const match = getActiveBlockVariation( + firstBlockName, + getBlockAttributes( clientIds[ 0 ] ) + ); + // Take into account active block variations. + _icon = match?.icon || blockType.icon; } else { const isSelectionOfSameType = new Set( _blocks.map( ( { name } ) => name ) ).size === 1; // When selection consists of blocks of multiple types, display an // appropriate icon to communicate the non-uniformity. - _icon = isSelectionOfSameType - ? getBlockType( firstBlockName )?.icon - : copy; + _icon = isSelectionOfSameType ? blockType.icon : copy; } + return { canRemove: canRemoveBlocks( clientIds, rootClientId ), hasBlockStyles: @@ -209,7 +215,7 @@ export const BlockSwitcher = ( { clientIds } ) => { _isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ), }; }, - [ clientIds, blockInformation?.icon ] + [ clientIds ] ); const blockTitle = useBlockDisplayTitle( { clientId: clientIds?.[ 0 ],