Fix pattern creation button in list view dropdown menu (#53562)

Co-authored-by: Glen Davies <[email protected]>
WordPress · Aug 15, 2023 · b04b4ae · b04b4ae
1 parent ba80165
commit b04b4ae
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 149 deletions.
diff --git a/packages/e2e-test-utils/src/click-menu-item.js b/packages/e2e-test-utils/src/click-menu-item.js
@@ -4,8 +4,8 @@
  * @param {string} label The label to search the menu item for.
  */
 export async function clickMenuItem( label ) {
-	const menuItems = await page.$x(
+	const menuItem = await page.waitForXPath(
 		`//*[@role="menu"]//*[text()="${ label }"]`
 	);
-	await menuItems[ 0 ].click();
+	await menuItem.click();
 }
diff --git 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
@@ -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
@@ -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>
+		</>
 	);
 }
 

diff --git a/packages/patterns/src/index.native.js b/packages/patterns/src/index.native.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import './store';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	CreatePatternModal: () => null,
+	PatternsMenuItems: () => null,
+} );
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>
+		</>
 	);
 }