add rename action

WordPress · Jan 2, 2024 · 64632a8 · 64632a8
1 parent 1ac137d
commit 64632a8
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
@@ -8,11 +8,21 @@ import { paramCase as kebabCase } from 'change-case';
  */
 import { downloadBlob } from '@wordpress/blob';
 import { __ } from '@wordpress/i18n';
+import {
+	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 { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
-import { PATTERN_TYPES } from '../../utils/constants';
+import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 export const exportJSONaction = {
 	id: 'duplicate-pattern',
@@ -32,3 +42,88 @@ export const exportJSONaction = {
 		);
 	},
 };
+
+export const renameAction = {
+	id: 'rename-pattern',
+	label: __( 'Rename' ),
+	isEligible: ( item ) => {
+		const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+		const isUserPattern = item.type === PATTERN_TYPES.user;
+		const isCustomPattern =
+			isUserPattern || ( isTemplatePart && item.isCustom );
+		const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
+		return isCustomPattern && ! hasThemeFile;
+	},
+	RenderModal: ( { item, closeModal } ) => {
+		const [ title, setTitle ] = useState( () => item.title );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		async function onRename( event ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'postType', item.type, item.id, {
+					title,
+				} );
+				// Update state before saving rerenders the list.
+				setTitle( '' );
+				closeModal();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'postType', item.type, item.id, {
+					throwOnError: true,
+				} );
+				createSuccessNotice(
+					item.type === TEMPLATE_PART_POST_TYPE
+						? __( 'Template part renamed.' )
+						: __( 'Pattern renamed.' ),
+					{ type: 'snackbar' }
+				);
+			} catch ( error ) {
+				const fallbackErrorMessage =
+					item.type === TEMPLATE_PART_POST_TYPE
+						? __(
+								'An error occurred while renaming the template part.'
+						  )
+						: __( 'An error occurred while renaming the pattern.' );
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: fallbackErrorMessage;
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+		return (
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
@@ -36,7 +36,7 @@ import {
 	PATTERN_SYNC_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
 } from '../../utils/constants';
-import { exportJSONaction } from './dataviews-pattern-actions';
+import { exportJSONaction, renameAction } from './dataviews-pattern-actions';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import usePatterns from './use-patterns';
@@ -283,7 +283,7 @@ export default function DataviewsPatterns() {
 		};
 	}, [ patterns, view, fields ] );
 
-	const actions = useMemo( () => [ exportJSONaction ], [] );
+	const actions = useMemo( () => [ renameAction, exportJSONaction ], [] );
 	const onChangeView = useCallback(
 		( viewUpdater ) => {
 			let updatedView =