From c7fad272d049c85f81573b7cb9447261835e6e58 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 31 Jan 2025 10:20:24 +0530
Subject: [PATCH 1/4] fix: close patterns modal on insertion and focus on
 inserted pattern

---
 packages/block-editor/package.json               |  1 +
 .../block-patterns-explorer/pattern-list.js      |  4 +++-
 .../inserter/block-patterns-tab/index.js         | 16 +++++++++++-----
 .../inserter/hooks/use-patterns-state.js         |  9 ++++++++-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 2a60409071843..5c0dba10a83f2 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -55,6 +55,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/interface": "file:../interface",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
index 8e5e50500ec72..8779611b45c57 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -62,7 +62,9 @@ function PatternList( {
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
 		destinationRootClientId,
-		selectedCategory
+		selectedCategory,
+		false,
+		true
 	);
 
 	const registeredPatternCategories = useMemo(
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
index 45db4732aa9c6..71e3d711efda0 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -16,6 +17,8 @@ import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
 
+export const PATTERNS_MODAL_NAME = 'block-editor/block-patterns-explorer';
+
 function BlockPatternsTab( {
 	onSelectCategory,
 	selectedCategory,
@@ -23,7 +26,10 @@ function BlockPatternsTab( {
 	rootClientId,
 	children,
 } ) {
-	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+	const isModalActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( PATTERNS_MODAL_NAME )
+	);
+	const { openModal, closeModal } = useDispatch( interfaceStore );
 
 	const categories = usePatternCategories( rootClientId );
 
@@ -47,7 +53,7 @@ function BlockPatternsTab( {
 					<Button
 						__next40pxDefaultSize
 						className="block-editor-inserter__patterns-explore-button"
-						onClick={ () => setShowPatternsExplorer( true ) }
+						onClick={ () => openModal( PATTERNS_MODAL_NAME ) }
 						variant="secondary"
 					>
 						{ __( 'Explore all patterns' ) }
@@ -68,11 +74,11 @@ function BlockPatternsTab( {
 					) }
 				</MobileTabNavigation>
 			) }
-			{ showPatternsExplorer && (
+			{ isModalActive && (
 				<PatternsExplorerModal
 					initialCategory={ selectedCategory || categories[ 0 ] }
 					patternCategories={ categories }
-					onModalClose={ () => setShowPatternsExplorer( false ) }
+					onModalClose={ closeModal }
 					rootClientId={ rootClientId }
 				/>
 			) }
diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
index 91b34c0ec72c3..0feb6f3372aca 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -6,6 +6,7 @@ import { cloneBlock, createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ import { isFiltered } from '../../../store/utils';
  * @param {string=}  rootClientId     Insertion's root client ID.
  * @param {string}   selectedCategory The selected pattern category.
  * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.
+ * @param {boolean}  shouldCloseModal Should close the modal after inserting a pattern.
  *
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
@@ -29,7 +31,8 @@ const usePatternsState = (
 	onInsert,
 	rootClientId,
 	selectedCategory,
-	isQuick
+	isQuick,
+	shouldCloseModal = false
 ) => {
 	const options = useMemo(
 		() => ( { [ isFiltered ]: !! isQuick } ),
@@ -75,6 +78,7 @@ const usePatternsState = (
 	}, [ patternCategories, userPatternCategories ] );
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { closeModal } = useDispatch( interfaceStore );
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const destinationRootClientId = isQuick
@@ -109,6 +113,9 @@ const usePatternsState = (
 				false,
 				destinationRootClientId
 			);
+			if ( shouldCloseModal ) {
+				closeModal?.();
+			}
 			createSuccessNotice(
 				sprintf(
 					/* translators: %s: block pattern title. */

From 4b5514bdfa61a7c1de6a7fd1f8b9dd7e12a063bc Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 31 Jan 2025 10:49:03 +0530
Subject: [PATCH 2/4] chore: add @wordpress/interface to package-lock.json

---
 package-lock.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package-lock.json b/package-lock.json
index a8bbafbfc2eb1..b908a4c7c2576 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50021,6 +50021,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/interface": "file:../interface",
 				"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",

From f7e63e0fae51d31c10d8d909dae28d8a31f4cc86 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 31 Jan 2025 12:02:35 +0530
Subject: [PATCH 3/4] refactor: remove @wordpress/interface dependency and use
 `states`

---
 package-lock.json                                |  1 -
 packages/block-editor/package.json               |  1 -
 .../inserter/block-patterns-explorer/index.js    |  9 +++++----
 .../block-patterns-explorer/pattern-list.js      | 10 ++++++----
 .../inserter/block-patterns-tab/index.js         | 16 +++++-----------
 .../inserter/hooks/use-patterns-state.js         |  9 +--------
 6 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b908a4c7c2576..a8bbafbfc2eb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50021,7 +50021,6 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
-				"@wordpress/interface": "file:../interface",
 				"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 				"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 				"@wordpress/keycodes": "file:../keycodes",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 5c0dba10a83f2..2a60409071843 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -55,7 +55,6 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
index 93a03ee200497..8a0d3ac638652 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
@@ -12,7 +12,7 @@ import PatternExplorerSidebar from './pattern-explorer-sidebar';
 import PatternList from './pattern-list';
 import { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';
 
-function PatternsExplorer( { initialCategory, rootClientId } ) {
+function PatternsExplorer( { initialCategory, rootClientId, onModalClose } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
@@ -34,19 +34,20 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				rootClientId={ rootClientId }
+				onModalClose={ onModalClose }
 			/>
 		</div>
 	);
 }
 
-function PatternsExplorerModal( { onModalClose, ...restProps } ) {
+function PatternsExplorerModal( { ...props } ) {
 	return (
 		<Modal
 			title={ __( 'Patterns' ) }
-			onRequestClose={ onModalClose }
+			onRequestClose={ props.onModalClose }
 			isFullScreen
 		>
-			<PatternsExplorer { ...restProps } />
+			<PatternsExplorer { ...props } />
 		</Modal>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
index 8779611b45c57..11d92d11a7beb 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -52,6 +52,7 @@ function PatternList( {
 	selectedCategory,
 	patternCategories,
 	rootClientId,
+	onModalClose,
 } ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
@@ -62,9 +63,7 @@ function PatternList( {
 	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
 		destinationRootClientId,
-		selectedCategory,
-		false,
-		true
+		selectedCategory
 	);
 
 	const registeredPatternCategories = useMemo(
@@ -154,7 +153,10 @@ function PatternList( {
 					<>
 						<BlockPatternsList
 							blockPatterns={ pagingProps.categoryPatterns }
-							onClickPattern={ onClickPattern }
+							onClickPattern={ ( pattern, blocks ) => {
+								onClickPattern( pattern, blocks );
+								onModalClose();
+							} }
 							isDraggable={ false }
 						/>
 						<BlockPatternsPaging { ...pagingProps } />
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
index 71e3d711efda0..45db4732aa9c6 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -1,11 +1,10 @@
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -17,8 +16,6 @@ import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
 
-export const PATTERNS_MODAL_NAME = 'block-editor/block-patterns-explorer';
-
 function BlockPatternsTab( {
 	onSelectCategory,
 	selectedCategory,
@@ -26,10 +23,7 @@ function BlockPatternsTab( {
 	rootClientId,
 	children,
 } ) {
-	const isModalActive = useSelect( ( select ) =>
-		select( interfaceStore ).isModalActive( PATTERNS_MODAL_NAME )
-	);
-	const { openModal, closeModal } = useDispatch( interfaceStore );
+	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 
 	const categories = usePatternCategories( rootClientId );
 
@@ -53,7 +47,7 @@ function BlockPatternsTab( {
 					<Button
 						__next40pxDefaultSize
 						className="block-editor-inserter__patterns-explore-button"
-						onClick={ () => openModal( PATTERNS_MODAL_NAME ) }
+						onClick={ () => setShowPatternsExplorer( true ) }
 						variant="secondary"
 					>
 						{ __( 'Explore all patterns' ) }
@@ -74,11 +68,11 @@ function BlockPatternsTab( {
 					) }
 				</MobileTabNavigation>
 			) }
-			{ isModalActive && (
+			{ showPatternsExplorer && (
 				<PatternsExplorerModal
 					initialCategory={ selectedCategory || categories[ 0 ] }
 					patternCategories={ categories }
-					onModalClose={ closeModal }
+					onModalClose={ () => setShowPatternsExplorer( false ) }
 					rootClientId={ rootClientId }
 				/>
 			) }
diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
index 0feb6f3372aca..91b34c0ec72c3 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -6,7 +6,6 @@ import { cloneBlock, createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -23,7 +22,6 @@ import { isFiltered } from '../../../store/utils';
  * @param {string=}  rootClientId     Insertion's root client ID.
  * @param {string}   selectedCategory The selected pattern category.
  * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.
- * @param {boolean}  shouldCloseModal Should close the modal after inserting a pattern.
  *
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
@@ -31,8 +29,7 @@ const usePatternsState = (
 	onInsert,
 	rootClientId,
 	selectedCategory,
-	isQuick,
-	shouldCloseModal = false
+	isQuick
 ) => {
 	const options = useMemo(
 		() => ( { [ isFiltered ]: !! isQuick } ),
@@ -78,7 +75,6 @@ const usePatternsState = (
 	}, [ patternCategories, userPatternCategories ] );
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { closeModal } = useDispatch( interfaceStore );
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const destinationRootClientId = isQuick
@@ -113,9 +109,6 @@ const usePatternsState = (
 				false,
 				destinationRootClientId
 			);
-			if ( shouldCloseModal ) {
-				closeModal?.();
-			}
 			createSuccessNotice(
 				sprintf(
 					/* translators: %s: block pattern title. */

From 9395980e1d8833adf2440a7a4d6c03607129f58f Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 31 Jan 2025 12:15:57 +0530
Subject: [PATCH 4/4] refactor: pass onModalClose directly to PatternsExplorer
 in PatternsExplorerModal

---
 .../components/inserter/block-patterns-explorer/index.js    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
index 8a0d3ac638652..f224ad0d6566f 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
@@ -40,14 +40,14 @@ function PatternsExplorer( { initialCategory, rootClientId, onModalClose } ) {
 	);
 }
 
-function PatternsExplorerModal( { ...props } ) {
+function PatternsExplorerModal( { onModalClose, ...restProps } ) {
 	return (
 		<Modal
 			title={ __( 'Patterns' ) }
-			onRequestClose={ props.onModalClose }
+			onRequestClose={ onModalClose }
 			isFullScreen
 		>
-			<PatternsExplorer { ...props } />
+			<PatternsExplorer onModalClose={ onModalClose } { ...restProps } />
 		</Modal>
 	);
 }