Widgets editor: Add Breadcrumbs Block

[ramonjd]

Description

This PR adds <BlockBreadcrumb /> to the Widgets Editor so we can navigate through the blocks in the editor.

Resolves #32418

How has this been tested?

Manually.

1. Fire up this branch and head over to /wp-admin/themes.php?page=gutenberg-widgets
2. Check that the breadcrumbs block appears in the footer when you select a block in the widget editor.
3. Also make sure that the breadcrumb block doesn't appear in mobile viewports.
4. 🎉

Screenshots

Types of changes

Adding existing Breadcrumb block to the Widgets interface.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[noisysocks]

This works great. Thanks for jumping on it @ramonjd!

Can we reword it so that instead of "Document" it says "Widgets"? This matches the title of the page. "Document" is a bit odd in this context since, unlike the post editor, there's no single document that we're editing. cc. @critterverse

[ramonjd]

Can we reword it so that instead of "Document" it says "Widgets"? This matches the title of the page. "Document" is a bit odd in this context since, unlike the post editor, there's no single document that we're editing.

Good call @noisysocks

I've thrown up a PR that adds a new prop to the Breadcrumb block so we can pass a custom root label.

#32528

[critterverse]

Nice, this works great! I think we would also want to include the ability to turn this on and off in the ellipses menu in the upper right corner. This option is usually within the Preferences modal but I think we could put it directly inline with other options (similar to what we did for the "contain text cursor in block" option):

[ramonjd]

I think we would also want to include the ability to turn this on and off in the ellipses menu in the upper right corner.

Yes! My instinct is that it would be a good follow-up PR, closely behind this one.

I'm only thinking of PR bloat: the toggle might involve store additions + tests and so on.

Very glad to be told otherwise. :)

[noisysocks]

Yes! My instinct is that it would be a good follow-up PR, closely behind this one.

Yep that's totally fine.

[ramonjd]

Rebased on top of #32528

The root breadcrumb label now reads 'Widgets'

[noisysocks]

Thanks @ramonjd!

[kevin940726]

LGTM too 👍

[ramonjd]

I think we would also want to include the ability to turn this on and off in the ellipses menu in the upper right corner. This option is usually within the Preferences modal but I think we could put it directly inline with other options (similar to what we did for the "contain text cursor in block" option):

Thanks @critterverse ! I've followed your advice and thrown up a draft PR: #32569

Once this one lands I'll rebase and add test instructions.

🙇