From 6149584daabde2c7ef7391cc4dfc190e40119cde Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 28 Jun 2023 15:40:37 +0200
Subject: [PATCH 1/3] Remove redundant shortcut button.

---
 .../src/components/header/document-title/index.js        | 9 +++------
 .../src/components/header/document-title/style.scss      | 9 ++++-----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/edit-post/src/components/header/document-title/index.js b/packages/edit-post/src/components/header/document-title/index.js
index 619fa4ef29014..7e0e1b6243615 100644
--- a/packages/edit-post/src/components/header/document-title/index.js
+++ b/packages/edit-post/src/components/header/document-title/index.js
@@ -72,12 +72,9 @@ function DocumentTitle() {
 						{ templateTitle }
 					</Text>
 				</HStack>
-			</Button>
-			<Button
-				className="edit-post-document-title__shortcut"
-				onClick={ () => openCommandCenter() }
-			>
-				{ displayShortcut.primary( 'k' ) }
+				<span className="edit-post-document-title__shortcut">
+					{ displayShortcut.primary( 'k' ) }
+				</span>
 			</Button>
 		</div>
 	);
diff --git a/packages/edit-post/src/components/header/document-title/style.scss b/packages/edit-post/src/components/header/document-title/style.scss
index e39ecf607e430..86b868f981f06 100644
--- a/packages/edit-post/src/components/header/document-title/style.scss
+++ b/packages/edit-post/src/components/header/document-title/style.scss
@@ -37,12 +37,11 @@
 }
 
 .edit-post-document-title__shortcut {
-	flex-shrink: 0;
-	color: $gray-700;
-	padding: 0 $grid-unit-15;
+	color: $gray-800;
+	text-align: right;
 
-	&:hover {
-		color: $gray-700;
+	.edit-post-document-title__shortcut:hover & {
+		color: $gray-900;
 	}
 }
 

From 9c5aaf67a33deb83228bcd6c08b9c98d1b78a86b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 29 Jun 2023 09:11:46 +0200
Subject: [PATCH 2/3] Fix focus and hover style and improve consistency.

---
 .../components/header/document-title/index.js | 22 ++++-----
 .../header/document-title/style.scss          | 32 +++++-------
 .../document-actions/index.js                 |  7 +--
 .../document-actions/style.scss               | 49 +++++++++----------
 4 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/packages/edit-post/src/components/header/document-title/index.js b/packages/edit-post/src/components/header/document-title/index.js
index 7e0e1b6243615..0cbf154ba213c 100644
--- a/packages/edit-post/src/components/header/document-title/index.js
+++ b/packages/edit-post/src/components/header/document-title/index.js
@@ -47,18 +47,16 @@ function DocumentTitle() {
 
 	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__back"
+				onClick={ () => {
+					clearSelectedBlock();
+					setIsEditingTemplate( false );
+				} }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+			>
+				{ __( 'Back' ) }
+			</Button>
 			<Button
 				className="edit-post-document-title__title"
 				onClick={ () => openCommandCenter() }
diff --git a/packages/edit-post/src/components/header/document-title/style.scss b/packages/edit-post/src/components/header/document-title/style.scss
index 86b868f981f06..f66bc2973a0d2 100644
--- a/packages/edit-post/src/components/header/document-title/style.scss
+++ b/packages/edit-post/src/components/header/document-title/style.scss
@@ -13,9 +13,11 @@
 	border-radius: 4px;
 	width: min(100%, 450px);
 
-	&:hover {
-		color: currentColor;
-		background: $gray-200;
+	.components-button {
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
 	}
 }
 
@@ -24,37 +26,25 @@
 	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;
+		color: var(--wp-block-synced-color);
 	}
 }
 
 .edit-post-document-title__shortcut {
 	color: $gray-800;
-	text-align: right;
-
-	.edit-post-document-title__shortcut:hover & {
-		color: $gray-900;
-	}
 }
 
-.edit-post-document-title__left {
+.edit-post-document-title__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
+	color: $gray-700;
+	gap: 0;
 
-	.components-button.has-icon.has-text {
-		color: $gray-700;
-		gap: 0;
-
-		&:hover {
-			color: currentColor;
-		}
+	&:hover {
+		color: currentColor;
 	}
 }
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
index 3a048e753631f..b644b0fe2afd5 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -17,7 +17,8 @@ import {
 import { BlockIcon } from '@wordpress/block-editor';
 import { store as commandsStore } from '@wordpress/commands';
 import {
-	chevronLeftSmall as chevronLeftSmallIcon,
+	chevronLeftSmall,
+	chevronRightSmall,
 	page as pageIcon,
 	navigation as navigationIcon,
 	symbol,
@@ -153,7 +154,7 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 			{ onBack && (
 				<Button
 					className="edit-site-document-actions__back"
-					icon={ chevronLeftSmallIcon }
+					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
 					onClick={ ( event ) => {
 						event.stopPropagation();
 						onBack();
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index d26bbdaf28ff6..7426180b5eaa9 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -1,7 +1,9 @@
 .edit-site-document-actions {
-	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
+	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.
@@ -10,11 +12,12 @@
 	background: $gray-100;
 	border-radius: 4px;
 	width: min(100%, 450px);
-	overflow: hidden;
 
-	&:hover {
-		color: currentColor;
-		background: $gray-200;
+	.components-button {
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
 	}
 
 	@include break-medium() {
@@ -27,18 +30,19 @@
 }
 
 .edit-site-document-actions__command {
-	grid-column: 1 / -1;
-	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
-	grid-row: 1;
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
 }
 
-
 .edit-site-document-actions__title {
 	flex-grow: 1;
 	color: var(--wp-block-synced-color);
 	overflow: hidden;
-	grid-column: 2 / 3;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
 
 	.block-editor-block-icon {
 		min-width: $grid-unit-30;
@@ -70,25 +74,20 @@
 	}
 }
 
-.edit-site-document-actions__shortcut,
-.edit-site-document-actions__back {
-	color: $gray-800;
-
-	.edit-site-document-actions:hover & {
-		color: $gray-900;
-	}
-}
-
 .edit-site-document-actions__shortcut {
-	text-align: right;
+	color: $gray-800;
 }
 
-.edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
-	grid-column: 1 / 2;
-	grid-row: 1;
 	z-index: 1;
+	color: $gray-700;
+	gap: 0;
+
+	&:hover {
+		color: currentColor;
+	}
 
 	.edit-site-document-actions.is-animated & {
 		animation: edit-site-document-actions__slide-in-left 0.3s;

From 2b67b2b58ab25c04717aaf96bb4f7450b363ff41 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 3 Jul 2023 13:09:58 +0200
Subject: [PATCH 3/3] Rename post document-title and improve CSS consistency.

---
 .../index.js                                  | 18 +++++++++------
 .../style.scss                                | 22 +++++++++++++++----
 .../edit-post/src/components/header/index.js  |  6 ++---
 .../src/components/header/style.scss          |  2 +-
 packages/edit-post/src/style.scss             |  2 +-
 .../document-actions/style.scss               |  3 ++-
 6 files changed, 36 insertions(+), 17 deletions(-)
 rename packages/edit-post/src/components/header/{document-title => document-actions}/index.js (83%)
 rename packages/edit-post/src/components/header/{document-title => document-actions}/style.scss (69%)

diff --git a/packages/edit-post/src/components/header/document-title/index.js b/packages/edit-post/src/components/header/document-actions/index.js
similarity index 83%
rename from packages/edit-post/src/components/header/document-title/index.js
rename to packages/edit-post/src/components/header/document-actions/index.js
index 0cbf154ba213c..52df978e2cd5b 100644
--- a/packages/edit-post/src/components/header/document-title/index.js
+++ b/packages/edit-post/src/components/header/document-actions/index.js
@@ -19,7 +19,7 @@ import { displayShortcut } from '@wordpress/keycodes';
  */
 import { store as editPostStore } from '../../../store';
 
-function DocumentTitle() {
+function DocumentActions() {
 	const { template, isEditing } = useSelect( ( select ) => {
 		const { isEditingTemplate, getEditedPostTemplate } =
 			select( editPostStore );
@@ -46,9 +46,9 @@ function DocumentTitle() {
 	}
 
 	return (
-		<div className="edit-post-document-title">
+		<div className="edit-post-document-actions">
 			<Button
-				className="edit-post-document-title__back"
+				className="edit-post-document-actions__back"
 				onClick={ () => {
 					clearSelectedBlock();
 					setIsEditingTemplate( false );
@@ -58,10 +58,14 @@ function DocumentTitle() {
 				{ __( 'Back' ) }
 			</Button>
 			<Button
-				className="edit-post-document-title__title"
+				className="edit-post-document-actions__command"
 				onClick={ () => openCommandCenter() }
 			>
-				<HStack spacing={ 1 } justify="center">
+				<HStack
+					className="edit-post-document-actions__title"
+					spacing={ 1 }
+					justify="center"
+				>
 					<BlockIcon icon={ layout } />
 					<Text size="body" as="h1">
 						<VisuallyHidden as="span">
@@ -70,7 +74,7 @@ function DocumentTitle() {
 						{ templateTitle }
 					</Text>
 				</HStack>
-				<span className="edit-post-document-title__shortcut">
+				<span className="edit-post-document-actions__shortcut">
 					{ displayShortcut.primary( 'k' ) }
 				</span>
 			</Button>
@@ -78,4 +82,4 @@ function DocumentTitle() {
 	);
 }
 
-export default DocumentTitle;
+export default DocumentActions;
diff --git a/packages/edit-post/src/components/header/document-title/style.scss b/packages/edit-post/src/components/header/document-actions/style.scss
similarity index 69%
rename from packages/edit-post/src/components/header/document-title/style.scss
rename to packages/edit-post/src/components/header/document-actions/style.scss
index f66bc2973a0d2..7eb77f9c0bd88 100644
--- a/packages/edit-post/src/components/header/document-title/style.scss
+++ b/packages/edit-post/src/components/header/document-actions/style.scss
@@ -1,4 +1,4 @@
-.edit-post-document-title {
+.edit-post-document-actions {
 	display: flex;
 	align-items: center;
 	gap: $grid-unit;
@@ -21,10 +21,24 @@
 	}
 }
 
-.edit-post-document-title__title.components-button {
+.edit-post-document-actions__command {
 	flex-grow: 1;
 	color: var(--wp-block-synced-color);
 	overflow: hidden;
+}
+
+.edit-post-document-actions__title {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
+
+	.block-editor-block-icon {
+		flex-shrink: 0;
+	}
 
 	h1 {
 		white-space: nowrap;
@@ -34,11 +48,11 @@
 	}
 }
 
-.edit-post-document-title__shortcut {
+.edit-post-document-actions__shortcut {
 	color: $gray-800;
 }
 
-.edit-post-document-title__back.components-button.has-icon.has-text {
+.edit-post-document-actions__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
 	color: $gray-700;
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 9c9462a641dd3..ab4bbd4bbc5d1 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/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 DocumentTitle from './document-title';
+import DocumentActions from './document-actions';
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -60,8 +60,8 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar />
-				<div className="edit-post-header__document-title">
-					<DocumentTitle />
+				<div className="edit-post-header__center">
+					<DocumentActions />
 				</div>
 			</motion.div>
 			<motion.div
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index d540dd032a646..d83745196576f 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -44,7 +44,7 @@
 	}
 }
 
-.edit-post-header__document-title {
+.edit-post-header__center {
 	flex-grow: 1;
 	display: flex;
 	justify-content: center;
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index fac5deef18f71..74f42ca498282 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -2,7 +2,7 @@
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/header-toolbar/style.scss";
-@import "./components/header/document-title/style.scss";
+@import "./components/header/document-actions/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/block-manager/style.scss";
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 7426180b5eaa9..dd442264e6398 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -46,6 +46,7 @@
 
 	.block-editor-block-icon {
 		min-width: $grid-unit-30;
+		flex-shrink: 0;
 	}
 
 	h1 {
@@ -81,9 +82,9 @@
 .edit-site-document-actions__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
-	z-index: 1;
 	color: $gray-700;
 	gap: 0;
+	z-index: 1;
 
 	&:hover {
 		color: currentColor;