@wordpress/patterns 1.4.0 → 1.5.0

package/src/components/rename-pattern-category-modal.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	Button,
+	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';
+
+/**
+ * Internal dependencies
+ */
+import { CATEGORY_SLUG } from './category-selector';
+
+export default function RenamePatternCategoryModal( {
+	category,
+	onClose,
+	onError,
+	onSuccess,
+	...props
+} ) {
+	const [ name, setName ] = useState( decodeEntities( category.name ) );
+	const [ isSaving, setIsSaving ] = useState( false );
+
+	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
+
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const onRename = async ( event ) => {
+		event.preventDefault();
+
+		if ( ! name || name === category.name || isSaving ) {
+			return;
+		}
+
+		try {
+			setIsSaving( true );
+
+			// User pattern category properties may differ as they can be
+			// normalized for use alongside template part areas, core pattern
+			// categories etc. As a result we won't just destructure the passed
+			// category object.
+			const savedRecord = await saveEntityRecord(
+				'taxonomy',
+				CATEGORY_SLUG,
+				{
+					id: category.id,
+					slug: category.slug,
+					name,
+				}
+			);
+
+			invalidateResolution( 'getUserPatternCategories' );
+			onSuccess?.( savedRecord );
+			onClose();
+
+			createSuccessNotice( __( 'Pattern category renamed.' ), {
+				type: 'snackbar',
+				id: 'pattern-category-update',
+			} );
+		} catch ( error ) {
+			onError?.();
+			createErrorNotice( error.message, {
+				type: 'snackbar',
+				id: 'pattern-category-update',
+			} );
+		} finally {
+			setIsSaving( false );
+			setName( '' );
+		}
+	};
+
+	const onRequestClose = () => {
+		onClose();
+		setName( '' );
+	};
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onRequestClose }
+			{ ...props }
+		>
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ name }
+						onChange={ setName }
+						required
+					/>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ onRequestClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							aria-disabled={
+								! name || name === category.name || isSaving
+							}
+							isBusy={ isSaving }
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

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

@@ -0,0 +1,115 @@
+/**
+ * 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 (
+		<Modal title={ __( 'Rename' ) } { ...props } onRequestClose={ onClose }>
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ name }
+						onChange={ setName }
+						required
+					/>
+
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ onRequestClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button variant="primary" type="submit">
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/style.scss

@@ -1,10 +1,36 @@
 .patterns-menu-items__convert-modal {
 	z-index: z-index(".patterns-menu-items__convert-modal");
+
+	// Fix the modal width to prevent added categories from stretching the modal.
+	[role="dialog"] > [role="document"] {
+		width: 350px;
+	}
+
 	.patterns-menu-items__convert-modal-categories {
-		max-width: 300px;
+		width: 100%;
+		position: relative;
+		min-height: 40px;
+	}
+	.components-form-token-field__suggestions-list {
+		position: absolute;
+		box-sizing: border-box;
+		z-index: 1;
+		background-color: $white;
+		// Account for the border width of the token field.
+		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;
+	// Match the minimal height of the category selector.
+	min-height: 40px;
+	// Override the default 1px margin-x.
+	margin: 0;
 }

package/src/lock-unlock.js

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

package/src/private-apis.js

@@ -3,7 +3,10 @@
  */
 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,
@@ -15,7 +18,10 @@ import {
 export const privateApis = {};
 lock( privateApis, {
 	CreatePatternModal,
+	DuplicatePatternModal,
+	RenamePatternModal,
 	PatternsMenuItems,
+	RenamePatternCategoryModal,
 	PATTERN_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,