[Block Editor]: Fix block switcher label to take into account block v…

…ariations (#43309) * [Block Editor]: Fix block switcher label to take into account block variations * fix for multiple selected blocks
WordPress · Aug 17, 2022 · 5d77b03 · 5d77b03
1 parent 30e9392
commit 5d77b03
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -28,10 +28,10 @@ import { copy } from '@wordpress/icons';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
-import BlockTitle from '../block-title';
 import BlockTransformationsMenu from './block-transformations-menu';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -41,7 +41,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		canRemove,
 		hasBlockStyles,
 		icon,
-		blockTitle,
 		patterns,
 	} = useSelect(
 		( select ) => {
@@ -79,7 +78,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
-				blockTitle: getBlockType( firstBlockName )?.title,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -89,6 +87,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		[ clientIds, blocks, blockInformation?.icon ]
 	);
 
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
+		maximumLength: 35,
+	} );
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
@@ -119,10 +121,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 							<BlockIcon icon={ icon } showColors />
 							{ ( isReusable || isTemplate ) && (
 								<span className="block-editor-block-switcher__toggle-text">
-									<BlockTitle
-										clientId={ clientIds }
-										maximumLength={ 35 }
-									/>
+									{ blockTitle }
 								</span>
 							) }
 						</>
@@ -176,10 +175,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 								/>
 								{ ( isReusable || isTemplate ) && (
 									<span className="block-editor-block-switcher__toggle-text">
-										<BlockTitle
-											clientId={ clientIds }
-											maximumLength={ 35 }
-										/>
+										{ blockTitle }
 									</span>
 								) }
 							</>

diff --git a/packages/block-editor/src/components/block-switcher/test/index.js b/packages/block-editor/src/components/block-switcher/test/index.js
@@ -18,6 +18,7 @@ import { copy } from '@wordpress/icons';
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () => jest.fn() );
 
 describe( 'BlockSwitcher', () => {
 	test( 'should not render block switcher without blocks', () => {