Site Editor: Allow editing custom template title (#36933)

* Site Editor: Allow editing custom template title

* Fallback to slug

packages/edit-site/src/components/template-details/edit-template-title.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+
+export default function EditTemplateTitle( { template } ) {
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		template.type,
+		'title',
+		template.id
+	);
+
+	return (
+		<TextControl
+			label={ __( 'Title' ) }
+			value={ title }
+			help={ __(
+				'Give the template a title that indicates its purpose, e.g. "Full Width".'
+			) }
+			onChange={ ( newTitle ) => {
+				setTitle( newTitle || template.slug );
+			} }
+		/>
+	);
+}

packages/edit-site/src/components/template-details/index.js

@@ -24,6 +24,7 @@ import {
 } from '../navigation-sidebar/navigation-panel/constants';
 import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
+import EditTemplateTitle from './edit-template-title';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -55,13 +56,17 @@ export default function TemplateDetails( { template, onClose } ) {
 	return (
 		<div className="edit-site-template-details">
 			<div className="edit-site-template-details__group">
-				<Heading
-					level={ 4 }
-					weight={ 600 }
-					className="edit-site-template-details__title"
-				>
-					{ title }
-				</Heading>
+				{ template.is_custom ? (
+					<EditTemplateTitle template={ template } />
+				) : (
+					<Heading
+						level={ 4 }
+						weight={ 600 }
+						className="edit-site-template-details__title"
+					>
+						{ title }
+					</Heading>
+				) }
 
 				{ description && (
 					<Text