Fix create pattern menu item

WordPress · Aug 15, 2023 · 2ca55a1 · 2ca55a1
1 parent eda352d
commit 2ca55a1
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 93 deletions.
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/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 ReusableBlockConvertButton from './reusable-block-convert-button';
 import ReusableBlocksManageButton from './reusable-blocks-manage-button';
 
 export default function ReusableBlocksMenuItems( { rootClientId } ) {
-	const clientIds = useSelect(
-		( select ) => select( blockEditorStore ).getSelectedBlockClientIds(),
-		[]
-	);
-
 	return (
-		<>
-			<ReusableBlockConvertButton
-				clientIds={ clientIds }
-				rootClientId={ rootClientId }
-			/>
-			{ clientIds.length === 1 && (
-				<ReusableBlocksManageButton clientId={ clientIds[ 0 ] } />
+		<BlockSettingsMenuControls>
+			{ ( { onClose, selectedClientIds } ) => (
+				<>
+					<ReusableBlockConvertButton
+						clientIds={ selectedClientIds }
+						rootClientId={ rootClientId }
+						onClose={ onClose }
+					/>
+					{ selectedClientIds.length === 1 && (
+						<ReusableBlocksManageButton
+							clientId={ selectedClientIds[ 0 ] }
+						/>
+					) }
+				</>
 			) }
-		</>
+		</BlockSettingsMenuControls>
 	);
 }
diff --git a/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -3,7 +3,6 @@
  */
 import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
 import {
-	BlockSettingsMenuControls,
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
@@ -35,11 +34,13 @@ import { unlock } from '../../lock-unlock';
  * @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 ReusableBlockConvertButton( {
 	clientIds,
 	rootClientId,
+	onClose,
 } ) {
 	const { useReusableBlocksRenameHint, ReusableBlocksRenameHint } = unlock(
 		blockEditorPrivateApis
@@ -148,80 +149,71 @@ export default function ReusableBlockConvertButton( {
 	}
 
 	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<>
-					<MenuItem
-						icon={ symbol }
-						onClick={ () => setIsModalOpen( true ) }
+		<>
+			<MenuItem icon={ symbol } onClick={ () => setIsModalOpen( true ) }>
+				{ showRenameHint
+					? __( 'Create pattern/reusable block' )
+					: __( 'Create pattern' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Create pattern' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+						setTitle( '' );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							onConvert( title );
+							setIsModalOpen( false );
+							setTitle( '' );
+							onClose();
+						} }
 					>
-						{ showRenameHint
-							? __( 'Create pattern/reusable block' )
-							: __( 'Create pattern' ) }
-					</MenuItem>
-					{ isModalOpen && (
-						<Modal
-							title={ __( 'Create pattern' ) }
-							onRequestClose={ () => {
-								setIsModalOpen( false );
-								setTitle( '' );
-							} }
-							overlayClassName="reusable-blocks-menu-items__convert-modal"
-						>
-							<form
-								onSubmit={ ( event ) => {
-									event.preventDefault();
-									onConvert( title );
-									setIsModalOpen( false );
-									setTitle( '' );
-									onClose();
-								} }
-							>
-								<VStack spacing="5">
-									<ReusableBlocksRenameHint />
-									<TextControl
-										__nextHasNoMarginBottom
-										label={ __( 'Name' ) }
-										value={ title }
-										onChange={ setTitle }
-										placeholder={ __( 'My pattern' ) }
-									/>
+						<VStack spacing="5">
+							<ReusableBlocksRenameHint />
+							<TextControl
+								__nextHasNoMarginBottom
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								placeholder={ __( 'My pattern' ) }
+							/>
 
-									<ToggleControl
-										label={ __( 'Synced' ) }
-										help={ __(
-											'Editing the pattern will update it anywhere it is used.'
-										) }
-										checked={ ! syncType }
-										onChange={ () => {
-											setSyncType(
-												! syncType
-													? 'unsynced'
-													: undefined
-											);
-										} }
-									/>
-									<HStack justify="right">
-										<Button
-											variant="tertiary"
-											onClick={ () => {
-												setIsModalOpen( false );
-												setTitle( '' );
-											} }
-										>
-											{ __( 'Cancel' ) }
-										</Button>
+							<ToggleControl
+								label={ __( 'Synced' ) }
+								help={ __(
+									'Editing the pattern will update it anywhere it is used.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
+								} }
+							/>
+							<HStack justify="right">
+								<Button
+									variant="tertiary"
+									onClick={ () => {
+										setIsModalOpen( false );
+										setTitle( '' );
+									} }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
 
-										<Button variant="primary" type="submit">
-											{ __( 'Create' ) }
-										</Button>
-									</HStack>
-								</VStack>
-							</form>
-						</Modal>
-					) }
-				</>
+								<Button variant="primary" type="submit">
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }
diff --git a/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-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 ReusableBlocksManageButton( { clientId } ) {
 	}
 
 	return (
-		<BlockSettingsMenuControls>
+		<>
 			<MenuItem href={ managePatternsUrl }>
 				{ __( 'Manage patterns' ) }
 			</MenuItem>
@@ -73,7 +70,7 @@ function ReusableBlocksManageButton( { clientId } ) {
 						: __( 'Detach pattern' ) }
 				</MenuItem>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }