Post Editor: use the post type singular_name as the root Block Breadcrumb label

packages/edit-post/src/components/layout/index.js

@@ -19,7 +19,7 @@ import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { Button, ScrollLock, Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	ComplementaryArea,
 	FullscreenMode,
@@ -86,8 +86,12 @@ function Layout( { styles } ) {
 		hasReducedUI,
 		showBlockBreadcrumbs,
 		isTemplateMode,
+		documentLabel,
 	} = useSelect( ( select ) => {
-		const editorSettings = select( editorStore ).getEditorSettings();
+		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const editorSettings = getEditorSettings();
+		const postTypeLabel = getPostTypeLabel();
+
 		return {
 			isTemplateMode: select( editPostStore ).isEditingTemplate(),
 			hasFixedToolbar: select( editPostStore ).isFeatureActive(
@@ -123,6 +127,8 @@ function Layout( { styles } ) {
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),
+			// translators: Default label for the Document in the Block Breadcrumb.
+			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 		};
 	}, [] );
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
@@ -247,7 +253,7 @@ function Layout( { styles } ) {
 					isRichEditingEnabled &&
 					mode === 'visual' && (
 						<div className="edit-post-layout__footer">
-							<BlockBreadcrumb />
+							<BlockBreadcrumb rootLabelText={ documentLabel } />
 						</div>
 					)
 				}

packages/edit-post/src/components/sidebar/settings-header/index.js

@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
@@ -19,16 +18,11 @@ const SettingsHeader = ( { sidebarName } ) => {
 	const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' );
 
 	const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
-		const currentPostType = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( currentPostType );
+		const postTypeLabel = select( editorStore ).getPostTypeLabel();
 
 		return {
-			documentLabel:
-				// Disable reason: Post type labels object is shaped like this.
-				// eslint-disable-next-line camelcase
-				postType?.labels?.singular_name ??
-				// translators: Default label for the Document sidebar tab, not selected.
-				__( 'Document' ),
+			// translators: Default label for the Document sidebar tab, not selected.
+			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 			isTemplateMode: select( editPostStore ).isEditingTemplate(),
 		};
 	}, [] );

packages/editor/src/store/selectors.js

@@ -1748,3 +1748,20 @@ export function __experimentalGetTemplateInfo( state, template ) {
 		icon: templateIcon,
 	};
 }
+
+/**
+ * Returns a post type label depending on the current post.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string|undefined} The post type label if available, otherwise undefined.
+ */
+export const getPostTypeLabel = createRegistrySelector(
+	( select ) => ( state ) => {
+		const currentPostType = getCurrentPostType( state );
+		const postType = select( coreStore ).getPostType( currentPostType );
+		// Disable reason: Post type labels object is shaped like this.
+		// eslint-disable-next-line camelcase
+		return postType?.labels?.singular_name;
+	}
+);

packages/editor/src/store/test/selectors.js

@@ -112,6 +112,19 @@ selectorNames.forEach( ( name ) => {
 			getAutosave() {
 				return state.getAutosave && state.getAutosave();
 			},
+
+			getPostType() {
+				const postTypeLabel = {
+					post: 'Post',
+					page: 'Page',
+				}[ state.postType ];
+
+				return {
+					labels: {
+						singular_name: postTypeLabel,
+					},
+				};
+			},
 		} );
 
 		selectorNames.forEach( ( otherName ) => {
@@ -169,6 +182,7 @@ const {
 	isPostSavingLocked,
 	isPostAutosavingLocked,
 	canUserUseUnfilteredHTML,
+	getPostTypeLabel,
 	__experimentalGetDefaultTemplateType,
 	__experimentalGetDefaultTemplateTypes,
 	__experimentalGetTemplateInfo,
@@ -3025,4 +3039,35 @@ describe( 'selectors', () => {
 			} );
 		} );
 	} );
+
+	describe( 'getPostTypeLabel', () => {
+		it( 'should return the correct label for the current post type', () => {
+			const postTypes = [
+				{
+					state: {
+						postType: 'page',
+					},
+					expected: 'Page',
+				},
+				{
+					state: {
+						postType: 'post',
+					},
+					expected: 'Post',
+				},
+			];
+
+			postTypes.forEach( ( { state, expected } ) =>
+				expect( getPostTypeLabel( state ) ).toBe( expected )
+			);
+		} );
+
+		it( 'should return `undefined` when the post type label does not exist', () => {
+			const postTypes = [ {}, { postType: 'humpty' } ];
+
+			postTypes.forEach( ( state ) =>
+				expect( getPostTypeLabel( state ) ).toBeUndefined()
+			);
+		} );
+	} );
 } );