Rename post document-title and improve CSS consistency.

WordPress · Jul 25, 2023 · 2b67b2b · 2b67b2b
1 parent 9c5aaf6
commit 2b67b2b
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 17 deletions.
diff --git a/...components/header/document-title/index.js → ...mponents/header/document-actions/index.js b/...components/header/document-title/index.js → ...mponents/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,12 +74,12 @@ function DocumentTitle() {
 						{ templateTitle }
 					</Text>
 				</HStack>
-				<span className="edit-post-document-title__shortcut">
+				<span className="edit-post-document-actions__shortcut">
 					{ displayShortcut.primary( 'k' ) }
 				</span>
 			</Button>
 		</div>
 	);
 }
 
-export default DocumentTitle;
+export default DocumentActions;
diff --git a/...mponents/header/document-title/style.scss → ...onents/header/document-actions/style.scss b/...mponents/header/document-title/style.scss → ...onents/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
@@ -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
@@ -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
@@ -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
@@ -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;