Template Parts: Add rename template part command

packages/edit-site/src/components/editor/index.js

@@ -50,6 +50,7 @@ import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import PatternModal from '../pattern-modal';
+import TemplatePartModal from '../template-part-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
@@ -227,6 +228,7 @@ export default function Editor( { isLoading, onClick } ) {
 										) }
 										<SiteEditorCanvas onClick={ onClick } />
 										<PatternModal />
+										<TemplatePartModal />
 									</>
 								) }
 								{ editorMode === 'text' && isEditMode && (

packages/edit-site/src/components/template-part-modal/index.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import TemplatePartRenameModal from './rename';
+
+export const TEMPLATE_PART_MODALS = {
+	rename: 'edit-site/template-part-rename',
+	duplicate: 'edit-site/template-part-duplicate',
+};
+
+export default function TemplatePartModal() {
+	// Duplication command and modal is in separate follow-up.
+	return (
+		<>
+			<TemplatePartRenameModal />
+			{ /* <PatternDuplicateModal /> */ }
+		</>
+	);
+}

packages/edit-site/src/components/template-part-modal/rename.js

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_PART_MODALS } from './';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+function RenameModal( { onClose, templatePart, ...props } ) {
+	const originalName =
+		typeof templatePart.title === 'string'
+			? templatePart.title
+			: templatePart.title.raw;
+	const [ name, setName ] = useState( decodeEntities( 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 === templatePart.title || isSaving ) {
+			return;
+		}
+
+		try {
+			await editEntityRecord(
+				'postType',
+				templatePart.type,
+				templatePart.id,
+				{
+					title: name,
+				}
+			);
+
+			setIsSaving( true );
+			setName( '' );
+			onClose?.();
+
+			await saveSpecifiedEntityEdits(
+				'postType',
+				templatePart.type,
+				templatePart.id,
+				[ 'title' ],
+				{ throwOnError: true }
+			);
+
+			createSuccessNotice( __( 'Template part renamed' ), {
+				type: 'snackbar',
+				id: 'template-part-update',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while renaming the template part.'
+					  );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'template-part-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>
+	);
+}
+
+export default function TemplatePartRenameModal() {
+	const { record } = useEditedEntityRecord();
+	const { closeModal } = useDispatch( interfaceStore );
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( TEMPLATE_PART_MODALS.rename )
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return <RenameModal onClose={ closeModal } templatePart={ record } />;
+}

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

@@ -32,8 +32,14 @@ import isTemplateRevertable from '../../utils/is-template-revertable';
 import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
 import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { PATTERN_MODALS } from '../../components/pattern-modal';
+import { TEMPLATE_PART_MODALS } from '../../components/template-part-modal';
 import { unlock } from '../../lock-unlock';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import {
+	PATTERN_TYPES,
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -249,7 +255,7 @@ function useEditUICommands() {
 }
 
 function usePatternCommands() {
-	const { isLoaded, record: pattern } = useEditedEntityRecord();
+	const { isLoaded, record } = useEditedEntityRecord();
 	const { openModal } = useDispatch( interfaceStore );
 
 	if ( ! isLoaded ) {
@@ -258,7 +264,7 @@ function usePatternCommands() {
 
 	const commands = [];
 
-	if ( pattern?.type === 'wp_block' ) {
+	if ( record?.type === PATTERN_TYPES.user ) {
 		commands.push( {
 			name: 'core/rename-pattern',
 			label: __( 'Rename pattern' ),
@@ -279,6 +285,22 @@ function usePatternCommands() {
 		} );
 	}
 
+	if ( record?.type === TEMPLATE_PART_POST_TYPE ) {
+		if ( record?.source === TEMPLATE_ORIGINS.custom ) {
+			commands.push( {
+				name: 'core/rename-template-part',
+				label: __( 'Rename template part' ),
+				icon: symbol,
+				callback: ( { close } ) => {
+					openModal( TEMPLATE_PART_MODALS.rename );
+					close();
+				},
+			} );
+		}
+
+		// All template parts will be eligible for duplication in a follow-up.
+	}
+
 	return { isLoading: false, commands };
 }