Update the document title in the template mode of the post editor (#5…

…0864)

packages/edit-post/src/components/header/document-title/index.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { BlockIcon, store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	Button,
+	VisuallyHidden,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { layout, chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { displayShortcut } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../private-apis';
+import { store as editPostStore } from '../../../store';
+
+const { store: commandsStore } = unlock( commandsPrivateApis );
+
+function DocumentTitle() {
+	const { template, isEditing } = useSelect( ( select ) => {
+		const { isEditingTemplate, getEditedPostTemplate } =
+			select( editPostStore );
+		const _isEditing = isEditingTemplate();
+
+		return {
+			template: _isEditing ? getEditedPostTemplate() : null,
+			isEditing: _isEditing,
+		};
+	}, [] );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { setIsEditingTemplate } = useDispatch( editPostStore );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+
+	if ( ! isEditing || ! template ) {
+		return null;
+	}
+
+	let templateTitle = __( 'Default' );
+	if ( template?.title ) {
+		templateTitle = template.title;
+	} else if ( !! template ) {
+		templateTitle = template.slug;
+	}
+
+	return (
+		<div className="edit-post-document-title">
+			<span className="edit-post-document-title__left">
+				<Button
+					onClick={ () => {
+						clearSelectedBlock();
+						setIsEditingTemplate( false );
+					} }
+					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+				>
+					{ __( 'Back' ) }
+				</Button>
+			</span>
+
+			<Button
+				className="edit-post-document-title__title"
+				onClick={ () => openCommandCenter() }
+			>
+				<HStack spacing={ 1 } justify="center">
+					<BlockIcon icon={ layout } />
+					<Text size="body" as="h1">
+						<VisuallyHidden as="span">
+							{ __( 'Editing template: ' ) }
+						</VisuallyHidden>
+						{ templateTitle }
+					</Text>
+				</HStack>
+			</Button>
+			<Button
+				className="edit-post-document-title__shortcut"
+				onClick={ () => openCommandCenter() }
+			>
+				{ displayShortcut.primary( 'k' ) }
+			</Button>
+		</div>
+	);
+}
+
+export default DocumentTitle;

packages/edit-post/src/components/header/document-title/style.scss

@@ -0,0 +1,61 @@
+.edit-post-document-title {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit;
+	height: $button-size;
+	justify-content: space-between;
+	// Flex items will, by default, refuse to shrink below a minimum
+	// intrinsic width. In order to shrink this flexbox item, and
+	// subsequently truncate child text, we set an explicit min-width.
+	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	min-width: 0;
+	background: $gray-100;
+	border-radius: 4px;
+	width: min(100%, 450px);
+
+	&:hover {
+		color: currentColor;
+		background: $gray-200;
+	}
+}
+
+.edit-post-document-title__title.components-button {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
+
+	h1 {
+		color: var(--wp-block-synced-color);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.edit-post-document-title__shortcut {
+	flex-shrink: 0;
+	color: $gray-700;
+	padding: 0 $grid-unit-15;
+
+	&:hover {
+		color: $gray-700;
+	}
+}
+
+.edit-post-document-title__left {
+	min-width: $button-size;
+	flex-shrink: 0;
+
+	.components-button.has-icon.has-text {
+		color: $gray-700;
+		gap: 0;
+
+		&:hover {
+			color: currentColor;
+		}
+	}
+}

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -1,6 +1,5 @@
 .edit-post-header-toolbar {
 	display: inline-flex;
-	flex-grow: 1;
 	align-items: center;
 	border: none;
 

packages/edit-post/src/components/header/index.js

@@ -18,7 +18,7 @@ import { default as DevicePreview } from '../device-preview';
 import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
-import TemplateTitle from './template-title';
+import DocumentTitle from './document-title';
 
 function Header( { setEntitiesSavedStatesCallback } ) {
 	const isLargeViewport = useViewportMatch( 'large' );
@@ -70,7 +70,9 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar />
-				<TemplateTitle />
+				<div className="edit-post-header__document-title">
+					<DocumentTitle />
+				</div>
 			</motion.div>
 			<motion.div
 				variants={ slideY }

packages/edit-post/src/components/header/style.scss

@@ -44,6 +44,12 @@
 	}
 }
 
+.edit-post-header__document-title {
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
+}
+
 /**
  * Buttons on the right side
  */