Make draggable chip use same icon as toolbar

WordPress · Sep 1, 2020 · d031006 · d031006
1 parent 8c26ad6
commit d031006
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -1,11 +1,15 @@
+/**
+ * External dependencies
+ */
+import { uniq } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { _n, sprintf } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem } from '@wordpress/components';
-import { dragHandle } from '@wordpress/icons';
+import { dragHandle, stack } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,11 +19,17 @@ import BlockIcon from '../block-icon';
 export default function BlockDraggableChip( { clientIds } ) {
 	const icon = useSelect(
 		( select ) => {
+			const { getBlockName } = select( 'core/block-editor' );
+
 			if ( clientIds.length !== 1 ) {
-				return;
+				const blockNames = clientIds.map( getBlockName );
+				const isSameType = uniq( blockNames ).length === 1;
+
+				if ( ! isSameType ) {
+					return stack;
+				}
 			}
 
-			const { getBlockName } = select( 'core/block-editor' );
 			const [ firstId ] = clientIds;
 			const blockName = getBlockName( firstId );
 
@@ -36,15 +46,7 @@ export default function BlockDraggableChip( { clientIds } ) {
 					className="block-editor-block-draggable-chip__content"
 				>
 					<FlexItem>
-						{ icon ? (
-							<BlockIcon icon={ icon } />
-						) : (
-							sprintf(
-								/* translators: %d: Number of blocks. */
-								_n( '%d block', '%d blocks', clientIds.length ),
-								clientIds.length
-							)
-						) }
+						<BlockIcon icon={ icon } />
 					</FlexItem>
 					<FlexItem>
 						<BlockIcon icon={ dragHandle } />