Editor Breadcrumb: add a rootLabelText prop (#32528)

packages/block-editor/README.md

@@ -104,6 +104,11 @@ Undocumented declaration.
 
 Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
 
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.rootLabelText_ `string`: Translated label for the root element of the breadcrumb trail.
+
 _Returns_
 
 -   `WPElement`: Block Breadcrumb.

packages/block-editor/src/components/block-breadcrumb/README.md

@@ -13,6 +13,15 @@ The block breadcrumb trail displays the hierarchy of the current block selection
 
 ## Development guidelines
 
+#### Props
+
+##### rootLabelText
+
+Label text for the root element (the first `<li />`) of the breadcrumb trail.
+
+-   Type: `String`
+-   Required: No
+
 ### Usage
 
 Renders a block breadcrumb with default style.

packages/block-editor/src/components/block-breadcrumb/index.js

@@ -14,9 +14,11 @@ import { store as blockEditorStore } from '../../store';
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
  *
- * @return {WPElement} Block Breadcrumb.
+ * @param  {Object}   props               Component props.
+ * @param  {string}   props.rootLabelText Translated label for the root element of the breadcrumb trail.
+ * @return {WPElement}                    Block Breadcrumb.
  */
-function BlockBreadcrumb() {
+function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
 		const {
@@ -31,6 +33,7 @@ function BlockBreadcrumb() {
 			hasSelection: !! getSelectionStart().clientId,
 		};
 	}, [] );
+	const rootLabel = rootLabelText || __( 'Document' );
 
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but
@@ -57,10 +60,10 @@ function BlockBreadcrumb() {
 						isTertiary
 						onClick={ clearSelectedBlock }
 					>
-						{ __( 'Document' ) }
+						{ rootLabel }
 					</Button>
 				) }
-				{ ! hasSelection && __( 'Document' ) }
+				{ ! hasSelection && rootLabel }
 			</li>
 			{ parents.map( ( parentClientId ) => (
 				<li key={ parentClientId }>

packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockBreadcrumb should render correctly 1`] = `
+<ul
+  aria-label="Block breadcrumb"
+  class="block-editor-block-breadcrumb"
+  role="list"
+>
+  <li
+    aria-current="true"
+    class="block-editor-block-breadcrumb__current"
+  >
+    Document
+  </li>
+</ul>
+`;

packages/block-editor/src/components/block-breadcrumb/test/index.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import BlockBreadcrumb from '../';
+
+describe( 'BlockBreadcrumb', () => {
+	it( 'should render correctly', () => {
+		const { container } = render( <BlockBreadcrumb /> );
+
+		expect( container.firstChild ).toMatchSnapshot();
+	} );
+
+	describe( 'Root label text', () => {
+		test( 'should display default label of "Document"', () => {
+			render( <BlockBreadcrumb /> );
+
+			const rootLabelTextDefault = screen.getByText( 'Document' );
+
+			expect( rootLabelTextDefault ).toBeInTheDocument();
+		} );
+
+		test( 'should display `rootLabelText` value', () => {
+			render( <BlockBreadcrumb rootLabelText="Tuhinga" /> );
+
+			const rootLabelText = screen.getByText( 'Tuhinga' );
+			const rootLabelTextDefault = screen.queryByText( 'Document' );
+
+			expect( rootLabelTextDefault ).toBeNull();
+			expect( rootLabelText ).toBeInTheDocument();
+		} );
+	} );
+} );