Editor Breadcrumb: add a rootLabelText prop

[ramonjd]

Description

Hi!

This PR adds a rootLabelText prop to <BlockBreadcrumb /> so that we can have flexibility to change the label, or just provide a more appropriate label for the "root" element in different editor contexts, for example the Widgets editor root level could be "Widgets".

See #32498 for context.

One day we might like to replace "Document" in the Site Editor with the name of the the site template for example.

How has this been tested?

Manually.

Apply the following patch to this branch. It adds the Breadcrumb block to the widgets editor.

Click to see the patch code

diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index 22320cac6b..cf69328dd4 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -7,7 +7,10 @@ import {
 	useViewportMatch,
 } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import {
+	__experimentalLibrary as Library,
+	BlockBreadcrumb,
+} from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -32,6 +35,8 @@ const interfaceLabels = {
 	body: __( 'Widgets and blocks' ),
 	/* translators: accessibility text for the widgets screen settings landmark region. */
 	sidebar: __( 'Widgets settings' ),
+	/* translators: accessibility text for the widgets screen footer landmark region. */
+	footer: __( 'Widgets footer' ),
 };
 
 function Interface( { blockEditorSettings } ) {
@@ -107,6 +112,13 @@ function Interface( { blockEditorSettings } ) {
 					blockEditorSettings={ blockEditorSettings }
 				/>
 			}
+			footer={
+				! isMobileViewport && (
+					<div className="edit-widgets-layout__footer">
+						<BlockBreadcrumb rootLabelText={ __( 'Widgets' ) } />
+					</div>
+				)
+			}
 		/>
 	);
 }

Head over to /wp-admin/themes.php?page=gutenberg-widgets

Check that the breadcrumbs block appears in the footer when you select a block in the widget editor, and that the root element label is "Widgets".

Go to the Editor and Site Editor and make sure the default is "Document".

Checklist:

• My code is tested.
• My code follows the WordPress code style.
  https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->
• My code has proper inline documentation.

[noisysocks]

If you run npm run docs:build and commit the result that should fix the lint failures.

[talldan]

One day we might like to replace "Document" in the Site Editor with the name of the the site template for example.

It might be good to switch away from using 'Document' in the post editor as well. It could use the post type's singular_name like the sidebar's tab title now does (see #17311):

Ok to treat that as a separate issue/PR though, this change probably unlocks that improvement, which is great 👍 .

[ramonjd]

If you run npm run docs:build and commit the result that should fix the lint failures.

TIL Thanks for the tip.

[ramonjd]

Ok to treat that as a separate issue/PR though, this change probably unlocks that improvement, which is great 👍 .

Oh nice, thanks! I might take a squiz at that this week too if time permits.

[ramonjd]

It might be good to switch away from using 'Document' in the post editor as well. It could use the post type's singular_name like the sidebar's tab title now does (see #17311):

I've thrown up a PR here for the post editor only.
#32609

Would love some 👀 to see if it's the right approach. Thank you!