From aafef4ff862dea699fa50b5ad13e88f32f1772a1 Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Mon, 26 Jun 2023 10:54:48 +0200
Subject: [PATCH] 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>
---
 .../src/components/block-draggable/style.scss     |  1 +
 .../components/inserter-draggable-blocks/index.js | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index 9f6197efbe0c8..a27d4c4caf2f2 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/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;
diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index 0de9b3a2260f6..42cae8c7bcde9 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/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 }
 				/>
 			}