From f5954021d3ce710ebd21431d5437eaa4c2d53ccd Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Wed, 27 Nov 2024 14:28:40 +0530
Subject: [PATCH 1/2] Inserter: Add closeQuickInserter prop to QuickInserter
 for mobile devices

---
 .../block-editor/src/components/inserter/index.js    |  1 +
 .../src/components/inserter/quick-inserter.js        | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 1af81d0231a1a8..0fab20e4af094a 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -173,6 +173,7 @@ class Inserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					closeQuickInserter={ onClose }
 				/>
 			);
 		}
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index 9f393a7ce15202..8315a06ab9f0d4 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -19,6 +19,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import usePatternsState from './hooks/use-patterns-state';
 import useBlockTypesState from './hooks/use-block-types-state';
 import { store as blockEditorStore } from '../../store';
+import { useViewportMatch } from '@wordpress/compose';
 
 const SEARCH_THRESHOLD = 6;
 const SHOWN_BLOCK_TYPES = 6;
@@ -32,6 +33,7 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	closeQuickInserter,
 	hasSearch = true,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
@@ -54,6 +56,8 @@ export default function QuickInserter( {
 		true
 	);
 
+	const isMobileDevice = useViewportMatch( 'small', '<' );
+
 	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
 			const { getSettings, getBlockIndex, getBlockCount } =
@@ -86,6 +90,14 @@ export default function QuickInserter( {
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
+		if (
+			isMobileDevice &&
+			closeQuickInserter &&
+			typeof closeQuickInserter === 'function'
+		) {
+			closeQuickInserter();
+		}
+
 		setInserterIsOpened( {
 			filterValue,
 			onSelect,

From 1ac98fbd0548c61a5eb27b4bb5498f28ad75be7f Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Tue, 24 Dec 2024 17:05:14 +0530
Subject: [PATCH 2/2] Inserter: Rename closeQuickInserter prop to onClose for
 consistency

---
 packages/block-editor/src/components/inserter/index.js |  2 +-
 .../src/components/inserter/quick-inserter.js          | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 0fab20e4af094a..f51715233c7562 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -173,7 +173,7 @@ class Inserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
-					closeQuickInserter={ onClose }
+					onClose={ onClose }
 				/>
 			);
 		}
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index 8315a06ab9f0d4..fbda189552ea4e 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -33,7 +33,7 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
-	closeQuickInserter,
+	onClose,
 	hasSearch = true,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
@@ -90,12 +90,8 @@ export default function QuickInserter( {
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
-		if (
-			isMobileDevice &&
-			closeQuickInserter &&
-			typeof closeQuickInserter === 'function'
-		) {
-			closeQuickInserter();
+		if ( isMobileDevice ) {
+			onClose?.();
 		}
 
 		setInserterIsOpened( {