From ebaab07c42b245134edae997a20781a34b869246 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Fri, 28 May 2021 15:12:10 +0100
Subject: [PATCH 1/2] Update the title area in the template editor

---
 .../post-editor-template-mode.test.js         |  2 +-
 .../components/header/template-title/index.js | 42 +++++++++++++++----
 .../header/template-title/style.scss          | 31 +++++++++++++-
 3 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js
index 1135441dfbad5..a1c01f4c7d9f6 100644
--- a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js
+++ b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js
@@ -53,7 +53,7 @@ const switchToTemplateMode = async () => {
 		'.edit-post-template-top-area',
 		( el ) => el.innerText
 	);
-	expect( title ).toContain( 'About\n' );
+	expect( title ).toContain( 'Just an FSE Post\n' );
 };
 
 const createNewTemplate = async ( templateName ) => {
diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
index 9aa21c0f27121..3781f45242c55 100644
--- a/packages/edit-post/src/components/header/template-title/index.js
+++ b/packages/edit-post/src/components/header/template-title/index.js
@@ -1,29 +1,39 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Dropdown, ToolbarItem, Button } from '@wordpress/components';
+import { chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../../store';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 import DeleteTemplate from './delete-template';
 import EditTemplateTitle from './edit-template-title';
 
 function TemplateTitle() {
-	const { template, isEditing } = useSelect( ( select ) => {
+	const { template, isEditing, title } = useSelect( ( select ) => {
 		const { isEditingTemplate, getEditedPostTemplate } = select(
 			editPostStore
 		);
+		const { getEditedPostAttribute } = select( editorStore );
+
 		const _isEditing = isEditingTemplate();
+
 		return {
 			template: _isEditing ? getEditedPostTemplate() : null,
 			isEditing: _isEditing,
+			title: getEditedPostAttribute( 'title' ),
 		};
 	}, [] );
 
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { setIsEditingTemplate } = useDispatch( editPostStore );
+
 	if ( ! isEditing || ! template ) {
 		return null;
 	}
@@ -45,13 +55,31 @@ function TemplateTitle() {
 						contentClassName="edit-post-template-top-area__popover"
 						renderToggle={ ( { onToggle } ) => (
 							<>
-								<div>{ __( 'About' ) }</div>
 								<Button
 									{ ...toolbarItemHTMLProps }
-									isSmall
-									variant="tertiary"
+									className="edit-post-template-post-title"
+									isLink
+									showTooltip
+									label={ sprintf(
+										/* translators: %s: Title of the referring post, e.g: "Hello World!" */
+										__( 'Edit %s' ),
+										title
+									) }
+									onClick={ () => {
+										clearSelectedBlock();
+										setIsEditingTemplate( false );
+									} }
+								>
+									{ title }
+								</Button>
+								<Button
+									{ ...toolbarItemHTMLProps }
+									className="edit-post-template-title"
+									isLink
+									icon={ chevronDown }
+									showTooltip
 									onClick={ onToggle }
-									aria-label={ __( 'Template Options' ) }
+									label={ __( 'Template Options' ) }
 								>
 									{ templateTitle }
 								</Button>
diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
index 5403b3d08d9a2..f38f2c4bda74f 100644
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -4,8 +4,35 @@
 	align-content: space-between;
 	width: 100%;
 	align-items: center;
-	.components-button.is-small {
-		height: $button-size-small;
+
+	.edit-post-template-title,
+	.edit-post-template-post-title {
+		padding: 0;
+		text-decoration: none;
+
+		&.has-icon {
+			svg {
+				order: 1;
+				margin-right: 0;
+			}
+		}
+	}
+
+	.edit-post-template-title {
+		color: $gray-900;
+	}
+
+	.edit-post-template-post-title {
+		margin-top: $grid-unit-05;
+		max-width: 160px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: block;
+
+		@include break-xlarge() {
+			max-width: none;
+		}
 	}
 }
 

From 912769872302e7d555851aff48cdaeacdad679ad Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 28 May 2021 18:47:06 +0100
Subject: [PATCH 2/2] Fix styling

---
 .../src/components/header/template-title/style.scss    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
index f38f2c4bda74f..c537b7c05b539 100644
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ b/packages/edit-post/src/components/header/template-title/style.scss
@@ -9,6 +9,11 @@
 	.edit-post-template-post-title {
 		padding: 0;
 		text-decoration: none;
+		height: auto;
+
+		&::before {
+			height: 100%;
+		}
 
 		&.has-icon {
 			svg {
@@ -30,6 +35,11 @@
 		text-overflow: ellipsis;
 		display: block;
 
+		&::before {
+			left: 0;
+			right: 0;
+		}
+
 		@include break-xlarge() {
 			max-width: none;
 		}