From 350ef425c128986bd0a9e8a279ad88dd18fefeb9 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Sun, 28 Nov 2021 19:06:05 +0400
Subject: [PATCH] Site Editor: Allow editing custom template title

---
 .../template-details/edit-template-title.js   | 28 +++++++++++++++++++
 .../src/components/template-details/index.js  | 19 ++++++++-----
 2 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 packages/edit-site/src/components/template-details/edit-template-title.js

diff --git a/packages/edit-site/src/components/template-details/edit-template-title.js b/packages/edit-site/src/components/template-details/edit-template-title.js
new file mode 100644
index 00000000000000..c8aafc0195699a
--- /dev/null
+++ b/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 );
+			} }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
index 7de495fd09324d..9467c12f9ba6a4 100644
--- a/packages/edit-site/src/components/template-details/index.js
+++ b/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