From 1bb555501ac9c2461f0763a2fa2f90100f19514f Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Tue, 15 Aug 2023 10:24:50 +0800
Subject: [PATCH] Update to the patterns package

---
 packages/patterns/src/components/index.js     | 31 +++++-----
 .../src/components/pattern-convert-button.js  | 61 +++++++++----------
 .../src/components/patterns-manage-button.js  |  9 +--
 3 files changed, 47 insertions(+), 54 deletions(-)

diff --git a/packages/patterns/src/components/index.js b/packages/patterns/src/components/index.js
index 35639602978c3..755b5f3556ee5 100644
--- a/packages/patterns/src/components/index.js
+++ b/packages/patterns/src/components/index.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,20 +10,22 @@ import PatternConvertButton from './pattern-convert-button';
 import PatternsManageButton from './patterns-manage-button';
 
 export default function PatternsMenuItems( { rootClientId } ) {
-	const clientIds = useSelect(
-		( select ) => select( blockEditorStore ).getSelectedBlockClientIds(),
-		[]
-	);
-
 	return (
-		<>
-			<PatternConvertButton
-				clientIds={ clientIds }
-				rootClientId={ rootClientId }
-			/>
-			{ clientIds.length === 1 && (
-				<PatternsManageButton clientId={ clientIds[ 0 ] } />
+		<BlockSettingsMenuControls>
+			{ ( { onClose, selectedClientIds } ) => (
+				<>
+					<PatternConvertButton
+						clientIds={ selectedClientIds }
+						rootClientId={ rootClientId }
+						onClose={ onClose }
+					/>
+					{ selectedClientIds.length === 1 && (
+						<PatternsManageButton
+							clientId={ selectedClientIds[ 0 ] }
+						/>
+					) }
+				</>
 			) }
-		</>
+		</BlockSettingsMenuControls>
 	);
 }
diff --git a/packages/patterns/src/components/pattern-convert-button.js b/packages/patterns/src/components/pattern-convert-button.js
index 65bd5131deeef..6c29e81203b5e 100644
--- a/packages/patterns/src/components/pattern-convert-button.js
+++ b/packages/patterns/src/components/pattern-convert-button.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { MenuItem } from '@wordpress/components';
 import { symbol } from '@wordpress/icons';
@@ -24,9 +21,14 @@ import CreatePatternModal from './create-pattern-modal';
  * @param {Object}   props              Component props.
  * @param {string[]} props.clientIds    Client ids of selected blocks.
  * @param {string}   props.rootClientId ID of the currently selected top-level block.
+ * @param {()=>void} props.onClose      Callback to close the menu.
  * @return {import('@wordpress/element').WPComponent} The menu control or null.
  */
-export default function PatternConvertButton( { clientIds, rootClientId } ) {
+export default function PatternConvertButton( {
+	clientIds,
+	rootClientId,
+	onClose,
+} ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const canConvert = useSelect(
@@ -103,34 +105,27 @@ export default function PatternConvertButton( { clientIds, rootClientId } ) {
 		setIsModalOpen( false );
 	};
 	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<>
-					<MenuItem
-						icon={ symbol }
-						onClick={ () => setIsModalOpen( true ) }
-					>
-						{ __( 'Create pattern' ) }
-					</MenuItem>
-					{ isModalOpen && (
-						<CreatePatternModal
-							clientIds={ clientIds }
-							onSuccess={ ( pattern ) => {
-								handleSuccess( pattern );
-								onClose();
-							} }
-							onError={ () => {
-								setIsModalOpen( false );
-								onClose();
-							} }
-							onClose={ () => {
-								setIsModalOpen( false );
-								onClose();
-							} }
-						/>
-					) }
-				</>
+		<>
+			<MenuItem icon={ symbol } onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Create pattern' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<CreatePatternModal
+					clientIds={ clientIds }
+					onSuccess={ ( pattern ) => {
+						handleSuccess( pattern );
+						onClose();
+					} }
+					onError={ () => {
+						setIsModalOpen( false );
+						onClose();
+					} }
+					onClose={ () => {
+						setIsModalOpen( false );
+						onClose();
+					} }
+				/>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }
diff --git a/packages/patterns/src/components/patterns-manage-button.js b/packages/patterns/src/components/patterns-manage-button.js
index ab3107a215180..bfa36521a28c1 100644
--- a/packages/patterns/src/components/patterns-manage-button.js
+++ b/packages/patterns/src/components/patterns-manage-button.js
@@ -5,10 +5,7 @@ import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { isReusableBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -62,7 +59,7 @@ function PatternsManageButton( { clientId } ) {
 	}
 
 	return (
-		<BlockSettingsMenuControls>
+		<>
 			<MenuItem href={ managePatternsUrl }>
 				{ __( 'Manage patterns' ) }
 			</MenuItem>
@@ -73,7 +70,7 @@ function PatternsManageButton( { clientId } ) {
 						: __( 'Detach pattern' ) }
 				</MenuItem>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }