feat: added auto close block selection panel when user clicks on the …

…block or start dragging the block in mobile or tablet devices
Kallyan01 · Jan 20, 2025 · 950a587 · 950a587
1 parent be5ce8a
commit 950a587
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 }
 					/>