From f3480ebe1b3a558f823e091d6ceca64b73bb8e45 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] 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               |  6 ++++-
 6 files changed, 39 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 0cbf154ba213c1..52df978e2cd5b3 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 f66bc2973a0d2a..7eb77f9c0bd88c 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 3f42d4736f57bb..6705d953c67594 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' },
@@ -65,8 +65,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 d540dd032a6461..d83745196576f8 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 d33a5ae22c0fd9..7b0a96248771ef 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 cd7a8fdb7c218a..93bfcf9d64c466 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
@@ -36,6 +36,10 @@
 		color: var(--wp-block-synced-color);
 	}
 
+	.block-editor-block-icon {
+		flex-shrink: 0;
+	}
+
 	h1 {
 		white-space: nowrap;
 		overflow: hidden;
@@ -69,9 +73,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;