Improve consistency of the Post editor and Site editor Document actio…

…ns (#52246) * Remove redundant shortcut button. * Fix focus and hover style and improve consistency. * Rename post document-title and improve CSS consistency.
WordPress · Jul 27, 2023 · c08b078 · c08b078
1 parent 41b6e4b
commit c08b078
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 78 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,24 +46,26 @@ 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>
-
+		<div className="edit-post-document-actions">
+			<Button
+				className="edit-post-document-actions__back"
+				onClick={ () => {
+					clearSelectedBlock();
+					setIsEditingTemplate( false );
+				} }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+			>
+				{ __( '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">
@@ -72,15 +74,12 @@ function DocumentTitle() {
 						{ templateTitle }
 					</Text>
 				</HStack>
-			</Button>
-			<Button
-				className="edit-post-document-title__shortcut"
-				onClick={ () => openCommandCenter() }
-			>
-				{ displayShortcut.primary( 'k' ) }
+				<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;
@@ -13,13 +13,21 @@
 	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;
+		}
 	}
 }
 
-.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;
@@ -28,34 +36,29 @@
 		color: var(--wp-block-synced-color);
 	}
 
+	.block-editor-block-icon {
+		flex-shrink: 0;
+	}
+
 	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 {
-	flex-shrink: 0;
-	color: $gray-700;
-	padding: 0 $grid-unit-15;
-
-	&:hover {
-		color: $gray-700;
-	}
+.edit-post-document-actions__shortcut {
+	color: $gray-800;
 }
 
-.edit-post-document-title__left {
+.edit-post-document-actions__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-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/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,
@@ -156,7 +157,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
@@ -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() {
@@ -36,20 +39,22 @@
 }
 
 .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;
 	overflow: hidden;
-	grid-column: 2 / 3;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
 
 	.block-editor-block-icon {
 		min-width: $grid-unit-30;
+		flex-shrink: 0;
 	}
 
 	h1 {
@@ -77,26 +82,21 @@
 	}
 }
 
-.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;
+	color: $gray-700;
+	gap: 0;
 	z-index: 1;
 
+	&:hover {
+		color: currentColor;
+	}
+
 	.edit-site-document-actions.is-animated & {
 		animation: edit-site-document-actions__slide-in-left 0.3s;
 		@include reduce-motion("animation");