Use block label and icon for the inserter draggable chip. (#51048)

* Use block label and icon for the inserter draggable blocks. Adjust the draggable chip width to respect the max-content.

* Only send `Pattern` as the label when it is a pattern.

* Apply suggestions from code review.

* Remove empty lines.

* add deps

---------

Co-authored-by: ntsekouras <ntsekouras@outlook.com>

packages/block-editor/src/components/block-draggable/style.scss

@@ -15,6 +15,7 @@
 	height: $block-toolbar-height;
 	padding: 0 ( $grid-unit-15 + $border-width );
 	user-select: none;
+	width: max-content;
 
 	svg {
 		fill: currentColor;

packages/block-editor/src/components/inserter-draggable-blocks/index.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
-import { serialize } from '@wordpress/blocks';
+import { serialize, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -20,6 +21,16 @@ const InserterDraggableBlocks = ( {
 		blocks,
 	};
 
+	const blockTypeIcon = useSelect(
+		( select ) => {
+			const { getBlockType } = select( blocksStore );
+			return (
+				blocks.length === 1 && getBlockType( blocks[ 0 ].name )?.icon
+			);
+		},
+		[ blocks ]
+	);
+
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
@@ -30,7 +41,7 @@ const InserterDraggableBlocks = ( {
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }
-					icon={ icon }
+					icon={ icon || ( ! isPattern && blockTypeIcon ) }
 					isPattern={ isPattern }
 				/>
 			}