DocumentBar: replace icon with post type label (#65170)

* Adds post type label to DocumentBar * Removes the post type icon from the DocumentBar * Try fixing one of the e2e tests * Remove IconType import and add typedef * Adds font-weight to heading and uses darker grey for constrast * Adjusts title overflow so it dosen't apply to post type label * Moves font weight to h1 * Try fixing more e2e tests * Fix another e2e * Add fix for mid screensizes when Back button is present * Hide post type label on small screen sizes --------- Co-authored-by: creativecoder <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Sep 17, 2024 · 788bb9e · 788bb9e
1 parent c0e3ad8
commit 788bb9e
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 89 deletions.
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -9,7 +9,7 @@ import {
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { backup, closeSmall, seen } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -32,24 +32,15 @@ const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
  *
  * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
  */
-function getEditorCanvasContainerTitleAndIcon( view ) {
+function getEditorCanvasContainerTitle( view ) {
 	switch ( view ) {
 		case 'style-book':
-			return {
-				title: __( 'Style Book' ),
-				icon: seen,
-			};
+			return __( 'Style Book' );
 		case 'global-styles-revisions':
 		case 'global-styles-revisions:style-book':
-			return {
-				title: __( 'Style Revisions' ),
-				icon: backup,
-			};
+			return __( 'Style Revisions' );
 		default:
-			return {
-				title: '',
-				icon: '',
-			};
+			return '';
 	}
 }
 
@@ -118,9 +109,7 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
-	const { title } = getEditorCanvasContainerTitleAndIcon(
-		editorCanvasContainerView
-	);
+	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
@@ -158,4 +147,4 @@ function useHasEditorCanvasContainer() {
 }
 
 export default EditorCanvasContainer;
-export { useHasEditorCanvasContainer, getEditorCanvasContainerTitleAndIcon };
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -37,7 +37,7 @@ import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import GlobalStylesSidebar from '../global-styles-sidebar';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import {
-	getEditorCanvasContainerTitleAndIcon,
+	getEditorCanvasContainerTitle,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
@@ -204,8 +204,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	);
 
 	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
-	const { title, icon } =
-		getEditorCanvasContainerTitleAndIcon( editorCanvasView );
+	const title = getEditorCanvasContainerTitle( editorCanvasView );
 
 	const isReady = ! isLoading;
 	const transition = {
@@ -238,7 +237,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={ title }
-					icon={ icon }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={

diff --git a/packages/editor/README.md b/packages/editor/README.md
@@ -266,7 +266,7 @@ _Parameters_
 
 -   _props_ `Object`: The component props.
 -   _props.title_ `string`: A title for the document, defaulting to the document or template title currently being edited.
--   _props.icon_ `import("@wordpress/components").IconType`: An icon for the document, defaulting to an icon for document or template currently being edited.
+-   _props.icon_ `IconType`: An icon for the document, no default. (A default icon indicating the document post type is no longer used.)
 
 _Returns_
 

diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -28,18 +28,8 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
 
-const TYPE_LABELS = {
-	// translators: 1: Pattern title.
-	wp_pattern: __( 'Editing pattern: %s' ),
-	// translators: 1: Navigation menu title.
-	wp_navigation: __( 'Editing navigation menu: %s' ),
-	// translators: 1: Template title.
-	wp_template: __( 'Editing template: %s' ),
-	// translators: 1: Template part title.
-	wp_template_part: __( 'Editing template part: %s' ),
-};
+/** @typedef {import("@wordpress/components").IconType} IconType */
 
 const MotionButton = motion( Button );
 
@@ -52,21 +42,21 @@ const MotionButton = motion( Button );
  * ```jsx
  * <DocumentBar />
  * ```
- * @param {Object}                                   props       The component props.
- * @param {string}                                   props.title A title for the document, defaulting to the document or
- *                                                               template title currently being edited.
- * @param {import("@wordpress/components").IconType} props.icon  An icon for the document, defaulting to an icon for document
- *                                                               or template currently being edited.
+ * @param {Object}   props       The component props.
+ * @param {string}   props.title A title for the document, defaulting to the document or
+ *                               template title currently being edited.
+ * @param {IconType} props.icon  An icon for the document, no default.
+ *                               (A default icon indicating the document post type is no longer used.)
  *
  * @return {JSX.Element} The rendered DocumentBar component.
  */
 export default function DocumentBar( props ) {
 	const {
 		postType,
+		postTypeLabel,
 		documentTitle,
 		isNotFound,
 		isUnsyncedPattern,
-		templateIcon,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
 	} = useSelect( ( select ) => {
@@ -76,8 +66,11 @@ export default function DocumentBar( props ) {
 			getEditorSettings,
 			__experimentalGetTemplateInfo: getTemplateInfo,
 		} = select( editorStore );
-		const { getEditedEntityRecord, isResolving: isResolvingSelector } =
-			select( coreStore );
+		const {
+			getEditedEntityRecord,
+			getPostType,
+			isResolving: isResolvingSelector,
+		} = select( coreStore );
 		const _postType = getCurrentPostType();
 		const _postId = getCurrentPostId();
 		const _document = getEditedEntityRecord(
@@ -86,8 +79,11 @@ export default function DocumentBar( props ) {
 			_postId
 		);
 		const _templateInfo = getTemplateInfo( _document );
+		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
+
 		return {
 			postType: _postType,
+			postTypeLabel: _postTypeLabel,
 			documentTitle: _document.title,
 			isNotFound:
 				! _document &&
@@ -98,12 +94,6 @@ export default function DocumentBar( props ) {
 					_postId
 				),
 			isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced',
-			templateIcon: unlock( select( editorStore ) ).getPostIcon(
-				_postType,
-				{
-					area: _document?.area,
-				}
-			),
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
@@ -118,7 +108,7 @@ export default function DocumentBar( props ) {
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
 	const entityTitle = isTemplate ? templateTitle : documentTitle;
 	const title = props.title || entityTitle;
-	const icon = props.icon || templateIcon;
+	const icon = props.icon;
 
 	const mountedRef = useRef( false );
 	useEffect( () => {
@@ -187,20 +177,18 @@ export default function DocumentBar( props ) {
 							isReducedMotion ? { duration: 0 } : undefined
 						}
 					>
-						<BlockIcon icon={ icon } />
-						<Text
-							size="body"
-							as="h1"
-							aria-label={
-								! props.title && TYPE_LABELS[ postType ]
-									? // eslint-disable-next-line @wordpress/valid-sprintf
-									  sprintf( TYPE_LABELS[ postType ], title )
-									: undefined
-							}
-						>
-							{ title
-								? decodeEntities( title )
-								: __( 'No title' ) }
+						{ icon && <BlockIcon icon={ icon } /> }
+						<Text size="body" as="h1">
+							<span className="editor-document-bar__post-title">
+								{ title
+									? decodeEntities( title )
+									: __( 'No title' ) }
+							</span>
+							{ postTypeLabel && ! props.title && (
+								<span className="editor-document-bar__post-type-label">
+									{ '· ' + decodeEntities( postTypeLabel ) }
+								</span>
+							) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
@@ -25,6 +25,14 @@
 			background: $gray-200;
 		}
 	}
+
+	&.has-back-button {
+		@media screen and (min-width: #{ ($break-medium) }) and (max-width: #{ ($break-large) }) {
+			.editor-document-bar__post-type-label {
+				display: none;
+			}
+		}
+	}
 }
 
 .editor-document-bar__command {
@@ -34,34 +42,44 @@
 }
 
 .editor-document-bar__title {
-	flex: 1;
 	overflow: hidden;
 	color: $gray-900;
-	gap: $grid-unit-05;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	margin: 0 auto;
+	max-width: 70%;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
 	@include break-medium() {
 		padding-left: $grid-unit-30;
 	}
 
+	h1 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 400;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+}
+
+.editor-document-bar__post-title {
+	color: currentColor;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+
 	.editor-document-bar.is-global & {
 		color: var(--wp-block-synced-color);
 	}
+}
 
-	.block-editor-block-icon {
-		min-width: $grid-unit-30;
-		flex-shrink: 0;
-	}
+.editor-document-bar__post-type-label {
+	flex: 0;
+	color: $gray-800;
+	padding-left: $grid-unit-05;
 
-	h1 {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 70%;
-		color: currentColor;
+	@media screen and (max-width: #{ ($break-small) }) {
+		display: none;
 	}
 }
 

diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
@@ -58,7 +58,6 @@ export default function EditorInterface( {
 	customSavePanel,
 	forceDisableBlockTools,
 	title,
-	icon,
 	iframeProps,
 } ) {
 	const {
@@ -140,7 +139,6 @@ export default function EditorInterface( {
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
-						icon={ icon }
 					/>
 				)
 			}

diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
@@ -47,7 +47,6 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
-	icon,
 } ) {
 	const zoomOutExperimentEnabled =
 		window.__experimentalEnableZoomOutExperiment;
@@ -121,7 +120,7 @@ function Header( {
 					variants={ toolbarVariations }
 					transition={ { type: 'tween' } }
 				>
-					<DocumentBar title={ title } icon={ icon } />
+					<DocumentBar title={ title } />
 				</motion.div>
 			) }
 			<motion.div

diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
@@ -196,7 +196,7 @@ class PostEditorTemplateMode {
 		);
 
 		const title = this.editorTopBar.getByRole( 'heading', {
-			name: 'Editing template: Single Entries',
+			name: 'Single Entries',
 		} );
 
 		await expect( title ).toBeVisible();

diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
@@ -47,7 +47,7 @@ test.describe( 'Site editor command palette', () => {
 			page
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'heading', { level: 1 } )
-		).toHaveText( 'Index' );
+		).toContainText( 'Index' );
 	} );
 
 	test( 'Open the command palette and navigate to Customize CSS', async ( {

diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js
@@ -108,7 +108,7 @@ test.describe( 'Block template registration', () => {
 		} );
 
 		// Swap template.
-		await page.getByRole( 'button', { name: 'Post' } ).click();
+		await page.getByRole( 'button', { name: 'Post', exact: true } ).click();
 		await page.getByRole( 'button', { name: 'Template options' } ).click();
 		await page.getByRole( 'menuitem', { name: 'Swap template' } ).click();
 		await page.getByText( 'Plugin Template' ).click();
@@ -135,7 +135,7 @@ test.describe( 'Block template registration', () => {
 		} );
 
 		// Swap template.
-		await page.getByRole( 'button', { name: 'Post' } ).click();
+		await page.getByRole( 'button', { name: 'Post', exact: true } ).click();
 		await page.getByRole( 'button', { name: 'Template options' } ).click();
 		await page.getByRole( 'menuitem', { name: 'Swap template' } ).click();
 		await page.getByText( 'Custom', { exact: true } ).click();

diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js
@@ -25,7 +25,7 @@ test.describe( 'Site editor title', () => {
 		const title = page
 			.getByRole( 'region', { name: 'Editor top bar' } )
 			.getByRole( 'heading', {
-				name: 'Editing template: Index',
+				name: 'Index',
 			} );
 
 		await expect( title ).toBeVisible();
@@ -44,7 +44,7 @@ test.describe( 'Site editor title', () => {
 		const title = page
 			.getByRole( 'region', { name: 'Editor top bar' } )
 			.getByRole( 'heading', {
-				name: 'Editing template part: header',
+				name: 'header',
 			} );
 
 		await expect( title ).toBeVisible();