From 950a587fa3631cd8dffd188b560d444c45ddf969 Mon Sep 17 00:00:00 2001
From: Kallyan Singha <singhakallyan@gmail.com>
Date: Tue, 21 Jan 2025 00:40:59 +0530
Subject: [PATCH] feat: added auto close block selection panel when user clicks
 on the block or start dragging the block in mobile or tablet devices

---
 .../block-editor/src/components/block-types-list/index.js | 2 ++
 .../src/components/inserter-list-item/index.js            | 2 ++
 .../src/components/inserter/block-types-tab.js            | 8 +++++++-
 packages/block-editor/src/components/inserter/menu.js     | 2 ++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index 0be6f82a653d18..01a845abcb7188 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -22,6 +22,7 @@ function BlockTypesList( {
 	items = [],
 	onSelect,
 	onHover = () => {},
+	onClose,
 	children,
 	label,
 	isDraggable = true,
@@ -41,6 +42,7 @@ function BlockTypesList( {
 							) }
 							onSelect={ onSelect }
 							onHover={ onHover }
+							onClose={ onClose }
 							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
 							rowId={ `${ listId }-${ i }` }
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index c5bf2110702629..57a78f0239e989 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -29,6 +29,7 @@ function InserterListItem( {
 	item,
 	onSelect,
 	onHover,
+	onClose,
 	isDraggable,
 	...props
 } ) {
@@ -73,6 +74,7 @@ function InserterListItem( {
 						isDraggingRef.current = true;
 						if ( onDragStart ) {
 							onHover( null );
+							onClose();
 							onDragStart( event );
 						}
 					} }
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index d37a6ca5694b09..0a637f82aca2d1 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -33,6 +33,7 @@ export function BlockTypesTabPanel( {
 	categories,
 	onSelectItem,
 	onHover,
+	onClose,
 	showMostUsedBlocks,
 	className,
 } ) {
@@ -95,6 +96,7 @@ export function BlockTypesTabPanel( {
 							items={ suggestedItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
+							onClose={ onClose }
 							label={ _x( 'Most used', 'blocks' ) }
 						/>
 					</InserterPanel>
@@ -117,6 +119,7 @@ export function BlockTypesTabPanel( {
 							items={ categoryItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
+							onClose={ onClose }
 							label={ category.title }
 						/>
 					</InserterPanel>
@@ -132,6 +135,7 @@ export function BlockTypesTabPanel( {
 						items={ uncategorizedItems }
 						onSelect={ onSelectItem }
 						onHover={ onHover }
+						onClose={ onClose }
 						label={ __( 'Uncategorized' ) }
 					/>
 				</InserterPanel>
@@ -154,6 +158,7 @@ export function BlockTypesTabPanel( {
 								items={ collectionItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
+								onClose={ onClose }
 								label={ collection.title }
 							/>
 						</InserterPanel>
@@ -165,7 +170,7 @@ export function BlockTypesTabPanel( {
 }
 
 export function BlockTypesTab(
-	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
+	{ rootClientId, onInsert, onHover, onClose, showMostUsedBlocks },
 	ref
 ) {
 	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
@@ -204,6 +209,7 @@ export function BlockTypesTab(
 							collections={ collections }
 							onSelectItem={ onSelectItem }
 							onHover={ onHover }
+							onClose={ onClose }
 							showMostUsedBlocks={ showMostUsedBlocks }
 							className="block-editor-inserter__insertable-blocks-at-selection"
 						/>
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index f1e387c5a59634..f092481fafe291 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -114,6 +114,7 @@ function InserterMenu(
 				_rootClientId
 			);
 			onSelect( blocks );
+			onClose();
 
 			// Check for focus loss due to filtering blocks by selected block type
 			window.requestAnimationFrame( () => {
@@ -226,6 +227,7 @@ function InserterMenu(
 						ref={ blockTypesTabRef }
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsert }
+						onClose={ onClose }
 						onHover={ onHover }
 						showMostUsedBlocks={ showMostUsedBlocks }
 					/>