Gutenberg: New Breadcrumbs Block

[paaljoachim]

It would be nice to have a breadcrumbs block that we can add to the any area of the content.

EDIT:
I am cleaning up the proposal.

Here is a screenshot that uses the paragraph block to exemplify breadcrumbs.

One could add a breadcrumbs block to a post/page template, and style it directly in the template, and/or the block could become a dynamic reusable block.
Some styling options could be font color, font size, background color, icon between each level and width(if the breadcrumbs block is to stretch all the way across the post/page). Showing the path hierarchy with page/post title names.

This would be one of the Full Site Editing blocks which would be dynamic in nature, showing the relevant information based on the page/post one is currently on.

---

Initial post:

Here is an example from @aristath 's Gridd theme: https://github.com/wplemon/gridd

Here we need to be able to change the text and background color.
Rename/relink breadcrumbs in relation to @karmatosed 's below question. (Reason why I mentioned renaming is that some sites will automatically add a title called Home to the front page. It would be good to have the home page name used instead of the name Home.)

[karmatosed]

I like the idea of this block. I don't think it needs too many options. I am not sure about renaming or linking, that feels like heading into the territory of navigation for me, which there is already a block for. However, would you be able to tell me more what you were thinking there @paaljoachim?

[sybrew]

Breadcrumbs are fundamental to any website with more than one page, where they help visitors traverse pages easily. In essence, they must contain links all the way back to the homepage.

From Google: https://support.google.com/webmasters/answer/7451184?hl=en#hierarchy

A breadcrumb is a row of internal links at the top or bottom of the page that allows visitors to quickly navigate back to a previous section or the root page. Many breadcrumbs have the most general page (usually the root page) as the first, leftmost link and list the more specific sections out to the right. We recommend using breadcrumb structured data markup when showing breadcrumbs.

It'd be great to have this a block in Gutenberg/Core, as it'll push Phase 2's "Full Site editing" further towards completion.

[aristath]

Adding some thoughts here:

A breadcrumbs block will definitely be one the things that will be necessary for FSE... Breadcrumbs is one of the most basic things any theme adds, and it's always one of the messiest things to get right. Providing authors & users with a robust & clean solution would go a long way!

• On the editor side:
  
  
  
  • If used inside a template it would basically need to be a plain placeholder, since the actual breadcrumb will depend on the post the template is used on.
  
  
  • If used on a single post/page (basically anything other than a template or template-part), we _could_ provide the option to customize the path. It would be nice, but not necessary for the initial implementation.
  
  
• On the front side:
  
  
  
  • Minimal styles would have to be implemented. Nothing fancy, just a display:flex on its wrapper, and separators between the items.
  
  

The block will need to be dynamic and not save the actual breadcrumbs HTML/path. Taxonomy hierarchies change, post categories & tags change, even the slugs can change. With that in mind, the breadcrumbs will need to be generated on post-render.

As for how the breadcrumbs themselves will be generated, there are lots of implementations out there. One of the most robust I've seen so far is the one in hybrid-breadcrumbs by @justintadlock, or the implementation from Yoast SEO. We could probably extract some of the logic from that and work on abstracting it, clean it up and remove the things that won't be necessary in the context of a block, strip it to its basics and make it into a block that can be used consistently.