Patterns: Add duplicate pattern command

packages/edit-site/src/components/page-patterns/duplicate-menu-item.js

@@ -12,15 +12,11 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
-	PATTERN_TYPES,
-} from '../../utils/constants';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import CreateTemplatePartModal from '../create-template-part-modal';
 
-const { CreatePatternModal } = unlock( patternsPrivateApis );
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 export default function DuplicateMenuItem( {
@@ -33,7 +29,10 @@ export default function DuplicateMenuItem( {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const history = useHistory();
 
+	const closeModal = () => setIsModalOpen( false );
+
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const isThemePattern = item.type === PATTERN_TYPES.theme;
 
 	async function onTemplatePartSuccess( templatePart ) {
 		createSuccessNotice(
@@ -59,18 +58,6 @@ export default function DuplicateMenuItem( {
 	}
 
 	function onPatternSuccess( { pattern } ) {
-		createSuccessNotice(
-			sprintf(
-				// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
-				__( '"%s" duplicated.' ),
-				pattern.title.raw
-			),
-			{
-				type: 'snackbar',
-				id: 'edit-site-patterns-success',
-			}
-		);
-
 		history.push( {
 			categoryType: PATTERN_TYPES.theme,
 			categoryId,
@@ -81,35 +68,6 @@ export default function DuplicateMenuItem( {
 		onClose();
 	}
 
-	const isThemePattern = item.type === PATTERN_TYPES.theme;
-	const closeModal = () => setIsModalOpen( false );
-	const duplicatedProps = isTemplatePart
-		? {
-				blocks: item.blocks,
-				defaultArea: item.templatePart.area,
-				defaultTitle: sprintf(
-					/* translators: %s: Existing template part title */
-					__( '%s (Copy)' ),
-					item.title
-				),
-		  }
-		: {
-				defaultCategories: isThemePattern
-					? item.categories
-					: item.termLabels,
-				content: isThemePattern
-					? item.content
-					: item.patternBlock.content,
-				defaultSyncType: isThemePattern
-					? PATTERN_SYNC_TYPES.unsynced
-					: item.syncStatus,
-				defaultTitle: sprintf(
-					/* translators: %s: Existing pattern title */
-					__( '%s (Copy)' ),
-					item.title || item.name
-				),
-		  };
-
 	return (
 		<>
 			<MenuItem
@@ -120,23 +78,26 @@ export default function DuplicateMenuItem( {
 				{ label }
 			</MenuItem>
 			{ isModalOpen && ! isTemplatePart && (
-				<CreatePatternModal
-					confirmLabel={ __( 'Duplicate' ) }
-					modalTitle={ __( 'Duplicate pattern' ) }
+				<DuplicatePatternModal
 					onClose={ closeModal }
-					onError={ closeModal }
 					onSuccess={ onPatternSuccess }
-					{ ...duplicatedProps }
+					pattern={ isThemePattern ? item : item.patternBlock }
 				/>
 			) }
 			{ isModalOpen && isTemplatePart && (
 				<CreateTemplatePartModal
-					confirmLabel={ __( 'Duplicate' ) }
+					blocks={ item.blocks }
 					closeModal={ closeModal }
+					confirmLabel={ __( 'Duplicate' ) }
+					defaultArea={ item.templatePart.area }
+					defaultTitle={ sprintf(
+						/* translators: %s: Existing template part title */
+						__( '%s (Copy)' ),
+						item.title
+					) }
 					modalTitle={ __( 'Duplicate template part' ) }
 					onCreate={ onTemplatePartSuccess }
 					onError={ closeModal }
-					{ ...duplicatedProps }
 				/>
 			) }
 		</>

packages/edit-site/src/components/pattern-modal/duplicate.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { getQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_MODALS } from './';
+import { PATTERN_TYPES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function PatternDuplicateModal() {
+	const { record } = useEditedEntityRecord();
+	const { categoryType, categoryId } = getQueryArgs( window.location.href );
+	const { closeModal } = useDispatch( interfaceStore );
+	const history = useHistory();
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate )
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	function onSuccess( { pattern: newPattern } ) {
+		history.push( {
+			categoryType,
+			categoryId,
+			postType: PATTERN_TYPES.user,
+			postId: newPattern.id,
+		} );
+
+		closeModal();
+	}
+
+	return (
+		<DuplicatePatternModal
+			onClose={ closeModal }
+			onSuccess={ onSuccess }
+			pattern={ record }
+		/>
+	);
+}

packages/edit-site/src/components/pattern-modal/index.js

@@ -2,13 +2,18 @@
  * Internal dependencies
  */
 import PatternRenameModal from './rename';
+import PatternDuplicateModal from './duplicate';
 
 export const PATTERN_MODALS = {
 	rename: 'edit-site/pattern-rename',
+	duplicate: 'edit-site/pattern-duplicate',
 };
 
 export default function PatternModal() {
-	// Further modals are likely
-	// e.g. duplicating and switching up sync status etc.
-	return <PatternRenameModal />;
+	return (
+		<>
+			<PatternDuplicateModal />
+			<PatternRenameModal />
+		</>
+	);
 }

packages/edit-site/src/hooks/commands/use-edit-mode-commands.js

@@ -381,6 +381,15 @@ function usePatternCommands() {
 				close();
 			},
 		} );
+		commands.push( {
+			name: 'core/duplicate-pattern',
+			label: __( 'Duplicate pattern' ),
+			icon: symbol,
+			callback: ( { close } ) => {
+				openModal( PATTERN_MODALS.duplicate );
+				close();
+			},
+		} );
 	}
 
 	return { isLoading: false, commands };

packages/patterns/src/components/create-pattern-modal.js

@@ -110,9 +110,9 @@ export default function CreatePatternModal( {
 		} catch ( error ) {
 			createErrorNotice( error.message, {
 				type: 'snackbar',
-				id: 'convert-to-pattern-error',
+				id: 'pattern-create',
 			} );
-			onError();
+			onError?.();
 		} finally {
 			setIsSaving( false );
 			setCategoryTerms( [] );

packages/patterns/src/components/duplicate-pattern-modal.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import CreatePatternModal from './create-pattern-modal';
+import { PATTERN_SYNC_TYPES } from '../constants';
+
+function getTermLabels( pattern, categories ) {
+	// Theme patterns don't have an id and rely on core pattern categories.
+	if ( ! pattern.id ) {
+		return categories.core
+			?.filter( ( category ) =>
+				pattern.categories.includes( category.name )
+			)
+			.map( ( category ) => category.label );
+	}
+
+	return categories.user
+		?.filter( ( category ) =>
+			pattern.wp_pattern_category.includes( category.id )
+		)
+		.map( ( category ) => category.label );
+}
+
+export default function DuplicatePatternModal( {
+	pattern,
+	onClose,
+	onSuccess,
+} ) {
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const categories = useSelect( ( select ) => {
+		const { getUserPatternCategories, getBlockPatternCategories } =
+			select( coreStore );
+
+		return {
+			core: getBlockPatternCategories(),
+			user: getUserPatternCategories(),
+		};
+	} );
+
+	if ( ! pattern ) {
+		return null;
+	}
+
+	const duplicatedProps = {
+		content: pattern.content,
+		defaultCategories: getTermLabels( pattern, categories ),
+		defaultSyncType: ! pattern.id // Theme patterns don't have an ID.
+			? PATTERN_SYNC_TYPES.unsynced
+			: pattern.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
+		defaultTitle: sprintf(
+			/* translators: %s: Existing pattern title */
+			__( '%s (Copy)' ),
+			typeof pattern.title === 'string'
+				? pattern.title
+				: pattern.title.raw
+		),
+	};
+
+	function handleOnSuccess( { pattern: newPattern } ) {
+		createSuccessNotice(
+			sprintf(
+				// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+				__( '"%s" duplicated.' ),
+				newPattern.title.raw
+			),
+			{
+				type: 'snackbar',
+				id: 'patterns-create',
+			}
+		);
+
+		onSuccess?.( { pattern: newPattern } );
+	}
+
+	return (
+		<CreatePatternModal
+			modalTitle={ __( 'Duplicate pattern' ) }
+			confirmLabel={ __( 'Duplicate' ) }
+			onClose={ onClose }
+			onError={ onClose }
+			onSuccess={ handleOnSuccess }
+			{ ...duplicatedProps }
+		/>
+	);
+}

packages/patterns/src/private-apis.js

@@ -3,6 +3,7 @@
  */
 import { lock } from './lock-unlock';
 import CreatePatternModal from './components/create-pattern-modal';
+import DuplicatePatternModal from './components/duplicate-pattern-modal';
 import RenamePatternModal from './components/rename-pattern-modal';
 import PatternsMenuItems from './components';
 import {
@@ -16,6 +17,7 @@ import {
 export const privateApis = {};
 lock( privateApis, {
 	CreatePatternModal,
+	DuplicatePatternModal,
 	RenamePatternModal,
 	PatternsMenuItems,
 	PATTERN_TYPES,