Update the title area in the template editor (#32037)

Co-authored-by: Jorge <jorge.costa@developer.pt>
WordPress · May 28, 2021 · 5054025 · 5054025
1 parent 37c5148
commit 5054025
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 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
@@ -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
@@ -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
@@ -4,8 +4,45 @@
 	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;
+		height: auto;
+
+		&::before {
+			height: 100%;
+		}
+
+		&.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;
+
+		&::before {
+			left: 0;
+			right: 0;
+		}
+
+		@include break-xlarge() {
+			max-width: none;
+		}
 	}
 }