From bb8eaf0138d1830411351c7c02f7199f585b0552 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 11 Aug 2022 17:09:54 +0400
Subject: [PATCH 1/5] Allow renaming any user-created template part

---
 .../edit-site/src/components/template-details/index.js     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
index 7c7704a4580481..5533c70fb563bd 100644
--- a/packages/edit-site/src/components/template-details/index.js
+++ b/packages/edit-site/src/components/template-details/index.js
@@ -35,8 +35,13 @@ export default function TemplateDetails( { template, onClose } ) {
 		postId: undefined,
 	} );
 
+	const isTemplatePart = template.type === 'wp_template_part';
+
 	// Only user-created and non-default templates can change the name.
-	const canEditTitle = template.is_custom && ! template.has_theme_file;
+	// But any user-created template part can be renamed.
+	const canEditTitle = isTemplatePart
+		? ! template.has_theme_file
+		: template.is_custom && ! template.has_theme_file;
 
 	if ( ! template ) {
 		return null;

From 8f689de528fd9429583910c03c325f9de8f5643e Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 11 Aug 2022 17:14:31 +0400
Subject: [PATCH 2/5] Use text instead of heading

---
 .../edit-site/src/components/template-details/index.js    | 8 ++++----
 .../edit-site/src/components/template-details/style.scss  | 4 ----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
index 5533c70fb563bd..74e30a92604a61 100644
--- a/packages/edit-site/src/components/template-details/index.js
+++ b/packages/edit-site/src/components/template-details/index.js
@@ -6,7 +6,6 @@ import {
 	Button,
 	MenuGroup,
 	MenuItem,
-	__experimentalHeading as Heading,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -58,13 +57,14 @@ export default function TemplateDetails( { template, onClose } ) {
 				{ canEditTitle ? (
 					<EditTemplateTitle template={ template } />
 				) : (
-					<Heading
-						level={ 4 }
+					<Text
+						size={ 16 }
 						weight={ 600 }
 						className="edit-site-template-details__title"
+						as="p"
 					>
 						{ title }
-					</Heading>
+					</Text>
 				) }
 
 				{ description && (
diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
index 7d8a0261bc6fa5..09e636d9cb31bc 100644
--- a/packages/edit-site/src/components/template-details/style.scss
+++ b/packages/edit-site/src/components/template-details/style.scss
@@ -8,10 +8,6 @@
 		border-top: $border-width solid $gray-400;
 	}
 
-	.edit-site-template-details__title {
-		margin: 0;
-	}
-
 	.edit-site-template-details__description {
 		margin: $grid-unit-15 0 0;
 		color: $gray-700;

From 680caeb0935f236cfc411cc47f83089829e18ca5 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Thu, 11 Aug 2022 17:49:57 +0400
Subject: [PATCH 3/5] Add template parts area selector

---
 .../src/components/template-details/index.js  | 10 ++++-
 .../components/template-details/style.scss    |  1 -
 .../template-part-area-selector.js            | 38 +++++++++++++++++++
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/edit-site/src/components/template-details/template-part-area-selector.js

diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
index 74e30a92604a61..1dd796b81c598a 100644
--- a/packages/edit-site/src/components/template-details/index.js
+++ b/packages/edit-site/src/components/template-details/index.js
@@ -6,6 +6,7 @@ import {
 	Button,
 	MenuGroup,
 	MenuItem,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -19,6 +20,7 @@ import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
 import { useLink } from '../routes/link';
+import TemplatePartAreaSelector from './template-part-area-selector';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -53,7 +55,7 @@ export default function TemplateDetails( { template, onClose } ) {
 
 	return (
 		<div className="edit-site-template-details">
-			<div className="edit-site-template-details__group">
+			<VStack className="edit-site-template-details__group" spacing={ 3 }>
 				{ canEditTitle ? (
 					<EditTemplateTitle template={ template } />
 				) : (
@@ -76,7 +78,11 @@ export default function TemplateDetails( { template, onClose } ) {
 						{ description }
 					</Text>
 				) }
-			</div>
+
+				{ isTemplatePart && (
+					<TemplatePartAreaSelector id={ template.id } />
+				) }
+			</VStack>
 
 			<TemplateAreas closeTemplateDetailsDropdown={ onClose } />
 
diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
index 09e636d9cb31bc..531d4d2487d126 100644
--- a/packages/edit-site/src/components/template-details/style.scss
+++ b/packages/edit-site/src/components/template-details/style.scss
@@ -9,7 +9,6 @@
 	}
 
 	.edit-site-template-details__description {
-		margin: $grid-unit-15 0 0;
 		color: $gray-700;
 	}
 
diff --git a/packages/edit-site/src/components/template-details/template-part-area-selector.js b/packages/edit-site/src/components/template-details/template-part-area-selector.js
new file mode 100644
index 00000000000000..1eff28d2d4c976
--- /dev/null
+++ b/packages/edit-site/src/components/template-details/template-part-area-selector.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+export default function TemplatePartAreaSelector( { id } ) {
+	const [ area, setArea ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'area',
+		id
+	);
+
+	const definedAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
+
+	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
+		label,
+		value: _area,
+	} ) );
+
+	return (
+		<SelectControl
+			label={ __( 'Area' ) }
+			labelPosition="top"
+			options={ areaOptions }
+			value={ area }
+			onChange={ setArea }
+		/>
+	);
+}

From b751aaf6b0cb49b867bbc3b6d8ba6e3e5ce20cec Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 12 Aug 2022 14:06:23 +0400
Subject: [PATCH 4/5] Hide text control help for template parts

---
 .../components/template-details/edit-template-title.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

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
index d5a4b3ff192615..5d7e63c7054887 100644
--- a/packages/edit-site/src/components/template-details/edit-template-title.js
+++ b/packages/edit-site/src/components/template-details/edit-template-title.js
@@ -19,9 +19,13 @@ export default function EditTemplateTitle( { template } ) {
 		<TextControl
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
-			help={ __(
-				'Give the template a title that indicates its purpose, e.g. "Full Width".'
-			) }
+			help={
+				template.type !== 'wp_template_part'
+					? __(
+							'Give the template a title that indicates its purpose, e.g. "Full Width".'
+					  )
+					: null
+			}
 			onChange={ ( newTitle ) => {
 				if ( ! newTitle && ! forceEmpty ) {
 					setForceEmpty( true );

From 355eace289fc6045c632d81aa271b3d241f663de Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 12 Aug 2022 20:11:04 +0400
Subject: [PATCH 5/5] Move template part area selector into a separate group

---
 .../edit-site/src/components/template-details/index.js    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
index 1dd796b81c598a..7b9326deaab797 100644
--- a/packages/edit-site/src/components/template-details/index.js
+++ b/packages/edit-site/src/components/template-details/index.js
@@ -78,11 +78,13 @@ export default function TemplateDetails( { template, onClose } ) {
 						{ description }
 					</Text>
 				) }
+			</VStack>
 
-				{ isTemplatePart && (
+			{ isTemplatePart && (
+				<div className="edit-site-template-details__group">
 					<TemplatePartAreaSelector id={ template.id } />
-				) }
-			</VStack>
+				</div>
+			) }
 
 			<TemplateAreas closeTemplateDetailsDropdown={ onClose } />