Improvement: added a improved and clean approach for closing inserter…

… panel functionality on mobile aditionally added check for large screen to keep the inserter panel open
Kallyan01 · Feb 24, 2025 · 109ddbc · 109ddbc
1 parent 1816eea
commit 109ddbc
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
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,7 +22,6 @@ function BlockTypesList( {
 	items = [],
 	onSelect,
 	onHover = () => {},
-	onClose,
 	children,
 	label,
 	isDraggable = true,
@@ -42,7 +41,6 @@ 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
@@ -15,21 +15,24 @@ import {
 } from '@wordpress/blocks';
 import { __experimentalTruncate as Truncate } from '@wordpress/components';
 import { ENTER, isAppleOS } from '@wordpress/keycodes';
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 import { InserterListboxItem } from '../inserter-listbox';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function InserterListItem( {
 	className,
 	isFirst,
 	item,
 	onSelect,
 	onHover,
-	onClose,
 	isDraggable,
 	...props
 } ) {
@@ -55,6 +58,17 @@ function InserterListItem( {
 		( isReusableBlock( item ) && item.syncStatus !== 'unsynced' ) ||
 		isTemplatePart( item );
 
+	const { setInserterIsOpened } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( blockEditorStore ) );
+
+		return {
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+		};
+	}, [] );
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable && ! item.isDisabled }
@@ -74,9 +88,11 @@ function InserterListItem( {
 						isDraggingRef.current = true;
 						if ( onDragStart ) {
 							onHover( null );
-							onClose();
 							onDragStart( event );
 						}
+						if ( isMobileViewport ) {
+							setInserterIsOpened( false );
+						}
 					} }
 					onDragEnd={ ( event ) => {
 						isDraggingRef.current = false;

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,7 +33,6 @@ export function BlockTypesTabPanel( {
 	categories,
 	onSelectItem,
 	onHover,
-	onClose,
 	showMostUsedBlocks,
 	className,
 } ) {
@@ -96,7 +95,6 @@ export function BlockTypesTabPanel( {
 							items={ suggestedItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
-							onClose={ onClose }
 							label={ _x( 'Most used', 'blocks' ) }
 						/>
 					</InserterPanel>
@@ -119,7 +117,6 @@ export function BlockTypesTabPanel( {
 							items={ categoryItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
-							onClose={ onClose }
 							label={ category.title }
 						/>
 					</InserterPanel>
@@ -135,7 +132,6 @@ export function BlockTypesTabPanel( {
 						items={ uncategorizedItems }
 						onSelect={ onSelectItem }
 						onHover={ onHover }
-						onClose={ onClose }
 						label={ __( 'Uncategorized' ) }
 					/>
 				</InserterPanel>
@@ -158,7 +154,6 @@ export function BlockTypesTabPanel( {
 								items={ collectionItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
-								onClose={ onClose }
 								label={ collection.title }
 							/>
 						</InserterPanel>
@@ -170,7 +165,7 @@ export function BlockTypesTabPanel( {
 }
 
 export function BlockTypesTab(
-	{ rootClientId, onInsert, onHover, onClose, showMostUsedBlocks },
+	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
 	ref
 ) {
 	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
@@ -209,7 +204,6 @@ 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
@@ -54,16 +54,19 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const { isZoomOutMode, hasSectionRootClientId } = useSelect( ( select ) => {
-		const { isZoomOut, getSectionRootClientId } = unlock(
-			select( blockEditorStore )
-		);
+	const { isZoomOutMode, hasSectionRootClientId, setInserterIsOpened } =
+		useSelect( ( select ) => {
+			const { isZoomOut, getSectionRootClientId, getSettings } = unlock(
+				select( blockEditorStore )
+			);
 
-		return {
-			isZoomOutMode: isZoomOut(),
-			hasSectionRootClientId: !! getSectionRootClientId(),
-		};
-	}, [] );
+			return {
+				isZoomOutMode: isZoomOut(),
+				hasSectionRootClientId: !! getSectionRootClientId(),
+				setInserterIsOpened:
+					getSettings().__experimentalSetIsInserterOpened,
+			};
+		}, [] );
 
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
@@ -75,6 +78,7 @@ function InserterMenu(
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
 	const isLargeViewport = useViewportMatch( 'large' );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
@@ -114,7 +118,11 @@ function InserterMenu(
 				_rootClientId
 			);
 			onSelect( blocks );
-			onClose();
+
+			// Checks the mobile viewport and closes the inserter panel
+			if ( isMobileViewport ) {
+				setInserterIsOpened( false );
+			}
 
 			// Check for focus loss due to filtering blocks by selected block type
 			window.requestAnimationFrame( () => {
@@ -227,7 +235,6 @@ function InserterMenu(
 						ref={ blockTypesTabRef }
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsert }
-						onClose={ onClose }
 						onHover={ onHover }
 						showMostUsedBlocks={ showMostUsedBlocks }
 					/>