@wordpress/patterns 1.4.1 → 1.5.0

package/build-module/components/rename-pattern-modal.js

@@ -0,0 +1,90 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal, TextControl, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+export default function RenamePatternModal({
+  onClose,
+  onError,
+  onSuccess,
+  pattern,
+  ...props
+}) {
+  const originalName = decodeEntities(pattern.title);
+  const [name, setName] = useState(originalName);
+  const [isSaving, setIsSaving] = useState(false);
+  const {
+    editEntityRecord,
+    __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits
+  } = useDispatch(coreStore);
+  const {
+    createSuccessNotice,
+    createErrorNotice
+  } = useDispatch(noticesStore);
+  const onRename = async event => {
+    event.preventDefault();
+    if (!name || name === pattern.title || isSaving) {
+      return;
+    }
+    try {
+      await editEntityRecord('postType', pattern.type, pattern.id, {
+        title: name
+      });
+      setIsSaving(true);
+      setName('');
+      onClose?.();
+      const savedRecord = await saveSpecifiedEntityEdits('postType', pattern.type, pattern.id, ['title'], {
+        throwOnError: true
+      });
+      onSuccess?.(savedRecord);
+      createSuccessNotice(__('Pattern renamed'), {
+        type: 'snackbar',
+        id: 'pattern-update'
+      });
+    } catch (error) {
+      onError?.();
+      const errorMessage = error.message && error.code !== 'unknown_error' ? error.message : __('An error occurred while renaming the pattern.');
+      createErrorNotice(errorMessage, {
+        type: 'snackbar',
+        id: 'pattern-update'
+      });
+    } finally {
+      setIsSaving(false);
+      setName('');
+    }
+  };
+  const onRequestClose = () => {
+    onClose?.();
+    setName('');
+  };
+  return createElement(Modal, {
+    title: __('Rename'),
+    ...props,
+    onRequestClose: onClose
+  }, createElement("form", {
+    onSubmit: onRename
+  }, createElement(VStack, {
+    spacing: "5"
+  }, createElement(TextControl, {
+    __nextHasNoMarginBottom: true,
+    label: __('Name'),
+    value: name,
+    onChange: setName,
+    required: true
+  }), createElement(HStack, {
+    justify: "right"
+  }, createElement(Button, {
+    variant: "tertiary",
+    onClick: onRequestClose
+  }, __('Cancel')), createElement(Button, {
+    variant: "primary",
+    type: "submit"
+  }, __('Save'))))));
+}
+//# sourceMappingURL=rename-pattern-modal.js.map

package/build-module/components/rename-pattern-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","Modal","TextControl","__experimentalHStack","HStack","__experimentalVStack","VStack","store","coreStore","useDispatch","useState","decodeEntities","__","noticesStore","RenamePatternModal","onClose","onError","onSuccess","pattern","props","originalName","title","name","setName","isSaving","setIsSaving","editEntityRecord","__experimentalSaveSpecifiedEntityEdits","saveSpecifiedEntityEdits","createSuccessNotice","createErrorNotice","onRename","event","preventDefault","type","id","savedRecord","throwOnError","error","errorMessage","message","code","onRequestClose","createElement","onSubmit","spacing","__nextHasNoMarginBottom","label","value","onChange","required","justify","variant","onClick"],"sources":["@wordpress/patterns/src/components/rename-pattern-modal.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tModal,\n\tTextControl,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useDispatch } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { __ } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\n\nexport default function RenamePatternModal( {\n\tonClose,\n\tonError,\n\tonSuccess,\n\tpattern,\n\t...props\n} ) {\n\tconst originalName = decodeEntities( pattern.title );\n\tconst [ name, setName ] = useState( originalName );\n\tconst [ isSaving, setIsSaving ] = useState( false );\n\n\tconst {\n\t\teditEntityRecord,\n\t\t__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,\n\t} = useDispatch( coreStore );\n\n\tconst { createSuccessNotice, createErrorNotice } =\n\t\tuseDispatch( noticesStore );\n\n\tconst onRename = async ( event ) => {\n\t\tevent.preventDefault();\n\n\t\tif ( ! name || name === pattern.title || isSaving ) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait editEntityRecord( 'postType', pattern.type, pattern.id, {\n\t\t\t\ttitle: name,\n\t\t\t} );\n\n\t\t\tsetIsSaving( true );\n\t\t\tsetName( '' );\n\t\t\tonClose?.();\n\n\t\t\tconst savedRecord = await saveSpecifiedEntityEdits(\n\t\t\t\t'postType',\n\t\t\t\tpattern.type,\n\t\t\t\tpattern.id,\n\t\t\t\t[ 'title' ],\n\t\t\t\t{ throwOnError: true }\n\t\t\t);\n\n\t\t\tonSuccess?.( savedRecord );\n\n\t\t\tcreateSuccessNotice( __( 'Pattern renamed' ), {\n\t\t\t\ttype: 'snackbar',\n\t\t\t\tid: 'pattern-update',\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tonError?.();\n\n\t\t\tconst errorMessage =\n\t\t\t\terror.message && error.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while renaming the pattern.' );\n\n\t\t\tcreateErrorNotice( errorMessage, {\n\t\t\t\ttype: 'snackbar',\n\t\t\t\tid: 'pattern-update',\n\t\t\t} );\n\t\t} finally {\n\t\t\tsetIsSaving( false );\n\t\t\tsetName( '' );\n\t\t}\n\t};\n\n\tconst onRequestClose = () => {\n\t\tonClose?.();\n\t\tsetName( '' );\n\t};\n\n\treturn (\n\t\t<Modal title={ __( 'Rename' ) } { ...props } onRequestClose={ onClose }>\n\t\t\t<form onSubmit={ onRename }>\n\t\t\t\t<VStack spacing=\"5\">\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tvalue={ name }\n\t\t\t\t\t\tonChange={ setName }\n\t\t\t\t\t\trequired\n\t\t\t\t\t/>\n\n\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button variant=\"tertiary\" onClick={ onRequestClose }>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t<Button variant=\"primary\" type=\"submit\">\n\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n"],"mappings":"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"}

package/build-module/lock-unlock.js

@@ -5,5 +5,5 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 export const {
   lock,
   unlock
-} = __dangerousOptInToUnstableAPIsOnlyForCoreModules('I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.', '@wordpress/patterns');
+} = __dangerousOptInToUnstableAPIsOnlyForCoreModules('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/patterns');
 //# sourceMappingURL=lock-unlock.js.map

package/build-module/lock-unlock.js.map

@@ -1 +1 @@
-{"version":3,"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"sources":["@wordpress/patterns/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',\n\t\t'@wordpress/patterns'\n\t);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAgD,QAAQ,yBAAyB;AAC1F,OAAO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5BF,gDAAgD,CAC/C,8GAA8G,EAC9G,qBACD,CAAC"}
+{"version":3,"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"sources":["@wordpress/patterns/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',\n\t\t'@wordpress/patterns'\n\t);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAgD,QAAQ,yBAAyB;AAC1F,OAAO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5BF,gDAAgD,CAC/C,iHAAiH,EACjH,qBACD,CAAC"}

package/build-module/private-apis.js

@@ -3,12 +3,18 @@
  */
 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 RenamePatternCategoryModal from './components/rename-pattern-category-modal';
 import { PATTERN_TYPES, PATTERN_DEFAULT_CATEGORY, PATTERN_USER_CATEGORY, PATTERN_CORE_SOURCES, PATTERN_SYNC_TYPES } from './constants';
 export const privateApis = {};
 lock(privateApis, {
   CreatePatternModal,
+  DuplicatePatternModal,
+  RenamePatternModal,
   PatternsMenuItems,
+  RenamePatternCategoryModal,
   PATTERN_TYPES,
   PATTERN_DEFAULT_CATEGORY,
   PATTERN_USER_CATEGORY,

package/build-module/private-apis.js.map

@@ -1 +1 @@
-{"version":3,"names":["lock","CreatePatternModal","PatternsMenuItems","PATTERN_TYPES","PATTERN_DEFAULT_CATEGORY","PATTERN_USER_CATEGORY","PATTERN_CORE_SOURCES","PATTERN_SYNC_TYPES","privateApis"],"sources":["@wordpress/patterns/src/private-apis.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { lock } from './lock-unlock';\nimport CreatePatternModal from './components/create-pattern-modal';\nimport PatternsMenuItems from './components';\nimport {\n\tPATTERN_TYPES,\n\tPATTERN_DEFAULT_CATEGORY,\n\tPATTERN_USER_CATEGORY,\n\tPATTERN_CORE_SOURCES,\n\tPATTERN_SYNC_TYPES,\n} from './constants';\n\nexport const privateApis = {};\nlock( privateApis, {\n\tCreatePatternModal,\n\tPatternsMenuItems,\n\tPATTERN_TYPES,\n\tPATTERN_DEFAULT_CATEGORY,\n\tPATTERN_USER_CATEGORY,\n\tPATTERN_CORE_SOURCES,\n\tPATTERN_SYNC_TYPES,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,eAAe;AACpC,OAAOC,kBAAkB,MAAM,mCAAmC;AAClE,OAAOC,iBAAiB,MAAM,cAAc;AAC5C,SACCC,aAAa,EACbC,wBAAwB,EACxBC,qBAAqB,EACrBC,oBAAoB,EACpBC,kBAAkB,QACZ,aAAa;AAEpB,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BR,IAAI,CAAEQ,WAAW,EAAE;EAClBP,kBAAkB;EAClBC,iBAAiB;EACjBC,aAAa;EACbC,wBAAwB;EACxBC,qBAAqB;EACrBC,oBAAoB;EACpBC;AACD,CAAE,CAAC"}
+{"version":3,"names":["lock","CreatePatternModal","DuplicatePatternModal","RenamePatternModal","PatternsMenuItems","RenamePatternCategoryModal","PATTERN_TYPES","PATTERN_DEFAULT_CATEGORY","PATTERN_USER_CATEGORY","PATTERN_CORE_SOURCES","PATTERN_SYNC_TYPES","privateApis"],"sources":["@wordpress/patterns/src/private-apis.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { lock } from './lock-unlock';\nimport CreatePatternModal from './components/create-pattern-modal';\nimport DuplicatePatternModal from './components/duplicate-pattern-modal';\nimport RenamePatternModal from './components/rename-pattern-modal';\nimport PatternsMenuItems from './components';\nimport RenamePatternCategoryModal from './components/rename-pattern-category-modal';\nimport {\n\tPATTERN_TYPES,\n\tPATTERN_DEFAULT_CATEGORY,\n\tPATTERN_USER_CATEGORY,\n\tPATTERN_CORE_SOURCES,\n\tPATTERN_SYNC_TYPES,\n} from './constants';\n\nexport const privateApis = {};\nlock( privateApis, {\n\tCreatePatternModal,\n\tDuplicatePatternModal,\n\tRenamePatternModal,\n\tPatternsMenuItems,\n\tRenamePatternCategoryModal,\n\tPATTERN_TYPES,\n\tPATTERN_DEFAULT_CATEGORY,\n\tPATTERN_USER_CATEGORY,\n\tPATTERN_CORE_SOURCES,\n\tPATTERN_SYNC_TYPES,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,eAAe;AACpC,OAAOC,kBAAkB,MAAM,mCAAmC;AAClE,OAAOC,qBAAqB,MAAM,sCAAsC;AACxE,OAAOC,kBAAkB,MAAM,mCAAmC;AAClE,OAAOC,iBAAiB,MAAM,cAAc;AAC5C,OAAOC,0BAA0B,MAAM,4CAA4C;AACnF,SACCC,aAAa,EACbC,wBAAwB,EACxBC,qBAAqB,EACrBC,oBAAoB,EACpBC,kBAAkB,QACZ,aAAa;AAEpB,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BX,IAAI,CAAEW,WAAW,EAAE;EAClBV,kBAAkB;EAClBC,qBAAqB;EACrBC,kBAAkB;EAClBC,iBAAiB;EACjBC,0BAA0B;EAC1BC,aAAa;EACbC,wBAAwB;EACxBC,qBAAqB;EACrBC,oBAAoB;EACpBC;AACD,CAAE,CAAC"}

package/build-style/style-rtl.css

@@ -106,10 +106,30 @@
 .patterns-menu-items__convert-modal {
   z-index: 1000001;
 }
+.patterns-menu-items__convert-modal [role=dialog] > [role=document] {
+  width: 350px;
+}
 .patterns-menu-items__convert-modal .patterns-menu-items__convert-modal-categories {
-  max-width: 300px;
+  width: 100%;
+  position: relative;
+  min-height: 40px;
+}
+.patterns-menu-items__convert-modal .components-form-token-field__suggestions-list {
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 1;
+  background-color: #fff;
+  width: calc(100% + 2px);
+  right: -1px;
+  min-width: initial;
+  border: 1px solid var(--wp-admin-theme-color);
+  border-top: none;
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
 }
 
 .patterns-create-modal__name-input input[type=text] {
-  min-height: 34px;
+  min-height: 40px;
+  margin: 0;
 }

package/build-style/style.css

@@ -106,10 +106,30 @@
 .patterns-menu-items__convert-modal {
   z-index: 1000001;
 }
+.patterns-menu-items__convert-modal [role=dialog] > [role=document] {
+  width: 350px;
+}
 .patterns-menu-items__convert-modal .patterns-menu-items__convert-modal-categories {
-  max-width: 300px;
+  width: 100%;
+  position: relative;
+  min-height: 40px;
+}
+.patterns-menu-items__convert-modal .components-form-token-field__suggestions-list {
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 1;
+  background-color: #fff;
+  width: calc(100% + 2px);
+  left: -1px;
+  min-width: initial;
+  border: 1px solid var(--wp-admin-theme-color);
+  border-top: none;
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
 }
 
 .patterns-create-modal__name-input input[type=text] {
-  min-height: 34px;
+  min-height: 40px;
+  margin: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "1.4.1",
+	"version": "1.5.0",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,8 +19,7 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=16.0.0",
-		"npm": ">=8 <9"
+		"node": ">=16.0.0"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -32,19 +31,19 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/block-editor": "^12.11.1",
-		"@wordpress/blocks": "^12.20.1",
-		"@wordpress/components": "^25.9.1",
-		"@wordpress/compose": "^6.20.0",
-		"@wordpress/core-data": "^6.20.1",
-		"@wordpress/data": "^9.13.1",
-		"@wordpress/element": "^5.20.0",
-		"@wordpress/html-entities": "^3.43.0",
-		"@wordpress/i18n": "^4.43.0",
-		"@wordpress/icons": "^9.34.0",
-		"@wordpress/notices": "^4.11.1",
-		"@wordpress/private-apis": "^0.25.0",
-		"@wordpress/url": "^3.44.0"
+		"@wordpress/block-editor": "^12.12.0",
+		"@wordpress/blocks": "^12.21.0",
+		"@wordpress/components": "^25.10.0",
+		"@wordpress/compose": "^6.21.0",
+		"@wordpress/core-data": "^6.21.0",
+		"@wordpress/data": "^9.14.0",
+		"@wordpress/element": "^5.21.0",
+		"@wordpress/html-entities": "^3.44.0",
+		"@wordpress/i18n": "^4.44.0",
+		"@wordpress/icons": "^9.35.0",
+		"@wordpress/notices": "^4.12.0",
+		"@wordpress/private-apis": "^0.26.0",
+		"@wordpress/url": "^3.45.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -53,5 +52,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e17f760ed0dc11cce78157d7c2f2086b1b3c09d8"
+	"gitHead": "f83bb1a71e8fa416131b81a9f282a72a1dc6c694"
 }

package/src/components/category-selector.js

@@ -4,8 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { FormTokenField } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -13,40 +11,29 @@ const unescapeString = ( arg ) => {
 	return decodeEntities( arg );
 };
 
-const EMPTY_ARRAY = [];
-const MAX_TERMS_SUGGESTIONS = 20;
-const DEFAULT_QUERY = {
-	per_page: MAX_TERMS_SUGGESTIONS,
-	_fields: 'id,name',
-	context: 'view',
-};
 export const CATEGORY_SLUG = 'wp_pattern_category';
 
-export default function CategorySelector( { values, onChange } ) {
+export default function CategorySelector( {
+	categoryTerms,
+	onChange,
+	categoryMap,
+} ) {
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );
 
-	const { searchResults } = useSelect(
-		( select ) => {
-			const { getEntityRecords } = select( coreStore );
-
-			return {
-				searchResults: !! search
-					? getEntityRecords( 'taxonomy', CATEGORY_SLUG, {
-							...DEFAULT_QUERY,
-							search,
-					  } )
-					: EMPTY_ARRAY,
-			};
-		},
-		[ search ]
-	);
-
 	const suggestions = useMemo( () => {
-		return ( searchResults ?? [] ).map( ( term ) =>
-			unescapeString( term.name )
-		);
-	}, [ searchResults ] );
+		return Array.from( categoryMap.values() )
+			.map( ( category ) => unescapeString( category.label ) )
+			.filter( ( category ) => {
+				if ( search !== '' ) {
+					return category
+						.toLowerCase()
+						.includes( search.toLowerCase() );
+				}
+				return true;
+			} )
+			.sort( ( a, b ) => a.localeCompare( b ) );
+	}, [ search, categoryMap ] );
 
 	function handleChange( termNames ) {
 		const uniqueTerms = termNames.reduce( ( terms, newTerm ) => {
@@ -64,17 +51,16 @@ export default function CategorySelector( { values, onChange } ) {
 	}
 
 	return (
-		<>
-			<FormTokenField
-				className="patterns-menu-items__convert-modal-categories"
-				value={ values }
-				suggestions={ suggestions }
-				onChange={ handleChange }
-				onInputChange={ debouncedSearch }
-				maxSuggestions={ MAX_TERMS_SUGGESTIONS }
-				label={ __( 'Categories' ) }
-				tokenizeOnBlur={ true }
-			/>
-		</>
+		<FormTokenField
+			className="patterns-menu-items__convert-modal-categories"
+			value={ categoryTerms }
+			suggestions={ suggestions }
+			onChange={ handleChange }
+			onInputChange={ debouncedSearch }
+			label={ __( 'Categories' ) }
+			tokenizeOnBlur
+			__experimentalExpandOnFocus
+			__next40pxDefaultSize
+		/>
 	);
 }

package/src/components/create-pattern-modal.js

@@ -10,8 +10,8 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -28,20 +28,62 @@ import CategorySelector, { CATEGORY_SLUG } from './category-selector';
 import { unlock } from '../lock-unlock';
 
 export default function CreatePatternModal( {
-	onSuccess,
-	onError,
+	confirmLabel = __( 'Create' ),
+	defaultCategories = [],
+	className = 'patterns-menu-items__convert-modal',
 	content,
+	modalTitle = __( 'Create pattern' ),
 	onClose,
-	className = 'patterns-menu-items__convert-modal',
+	onError,
+	onSuccess,
+	defaultSyncType = PATTERN_SYNC_TYPES.full,
+	defaultTitle = '',
 } ) {
-	const [ syncType, setSyncType ] = useState( PATTERN_SYNC_TYPES.full );
-	const [ categoryTerms, setCategoryTerms ] = useState( [] );
-	const [ title, setTitle ] = useState( '' );
+	const [ syncType, setSyncType ] = useState( defaultSyncType );
+	const [ categoryTerms, setCategoryTerms ] = useState( defaultCategories );
+	const [ title, setTitle ] = useState( defaultTitle );
+
 	const [ isSaving, setIsSaving ] = useState( false );
 	const { createPattern } = unlock( useDispatch( patternsStore ) );
 	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 
+	const { corePatternCategories, userPatternCategories } = useSelect(
+		( select ) => {
+			const { getUserPatternCategories, getBlockPatternCategories } =
+				select( coreStore );
+
+			return {
+				corePatternCategories: getBlockPatternCategories(),
+				userPatternCategories: getUserPatternCategories(),
+			};
+		}
+	);
+
+	const categoryMap = useMemo( () => {
+		// Merge the user and core pattern categories and remove any duplicates.
+		const uniqueCategories = new Map();
+		[ ...userPatternCategories, ...corePatternCategories ].forEach(
+			( category ) => {
+				if (
+					! uniqueCategories.has( category.label ) &&
+					// There are two core categories with `Post` label so explicitly remove the one with
+					// the `query` slug to avoid any confusion.
+					category.name !== 'query'
+				) {
+					// We need to store the name separately as this is used as the slug in the
+					// taxonomy and may vary from the label.
+					uniqueCategories.set( category.label, {
+						label: category.label,
+						value: category.label,
+						name: category.name,
+					} );
+				}
+			}
+		);
+		return uniqueCategories;
+	}, [ userPatternCategories, corePatternCategories ] );
+
 	async function onCreate( patternTitle, sync ) {
 		if ( ! title || isSaving ) {
 			return;
@@ -68,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( [] );
@@ -84,10 +126,16 @@ export default function CreatePatternModal( {
 	 */
 	async function findOrCreateTerm( term ) {
 		try {
+			// We need to match any existing term to the correct slug to prevent duplicates, eg.
+			// the core `Headers` category uses the singular `header` as the slug.
+			const existingTerm = categoryMap.get( term );
+			const termData = existingTerm
+				? { name: existingTerm.label, slug: existingTerm.name }
+				: { name: term };
 			const newTerm = await saveEntityRecord(
 				'taxonomy',
 				CATEGORY_SLUG,
-				{ name: term },
+				termData,
 				{ throwOnError: true }
 			);
 			invalidateResolution( 'getUserPatternCategories' );
@@ -103,7 +151,7 @@ export default function CreatePatternModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create pattern' ) }
+			title={ modalTitle }
 			onRequestClose={ () => {
 				onClose();
 				setTitle( '' );
@@ -126,8 +174,9 @@ export default function CreatePatternModal( {
 						className="patterns-create-modal__name-input"
 					/>
 					<CategorySelector
-						values={ categoryTerms }
+						categoryTerms={ categoryTerms }
 						onChange={ setCategoryTerms }
+						categoryMap={ categoryMap }
 					/>
 					<ToggleControl
 						label={ __( 'Synced' ) }
@@ -160,7 +209,7 @@ export default function CreatePatternModal( {
 							aria-disabled={ ! title || isSaving }
 							isBusy={ isSaving }
 						>
-							{ __( 'Create' ) }
+							{ confirmLabel }
 						</Button>
 					</HStack>
 				</VStack>

package/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 }
+		/>
+	);
+}