Blocks: Add Breadcrumbs block #71793
Conversation
ntsekouras
requested review from
Mamaduka,
jameskoster,
mcsf and
youknowriad
ntsekouras
requested review from
ajitbohra,
fabiankaegy,
juanmaguitar and
spacedmonkey
as code owners
ntsekouras
added
[Type] Enhancement
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @BrunoAHVincent, @rodolfomartinez. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +1.17 kB (+0.06%) Total Size: 1.96 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in e977d63. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18271342506
|
ntsekouras
added
[Package] Blocks
|
Hey, took this for a spin, nice work. I may be doing some things wrong with the compilation, if so let me know. When I inserted it first, I inserted it in a post, just to quickly test. It gave me this: 
If it doesn't work there, can we omit the block from the post editor inserter? And if you can insert it regardless, perhaps we can clarify the error message. That speaks to the purpose of this as well, which is confusing, so let me also include this screenshot: 
"Post Breadcrumbs" reads to me as breadcrumbs for a post. I imagine something like Home → Blog → 2025 → [Postname]. Yet it explains in the description, as well as the error message that it's for hierarchical post types, i.e. Pages. I don't think the name or description helps that. Can we:
When I do insert it in a Page template, I expect to see the actual breadcrumb, but I see only this: 
I suspect this is because I'm inserting it into a template, but the template holds only dummy content and doesn't have a hierarchy. But the pagination block has a similar problem, yet it shows this: I'd do something similar here, and in a template, show: "Home / Ancestor / Parent / Page" ... or something like that. Be sure to even underline home, ancestor and parent in the above example, you can link to #. The purpose is to make it possible to visually style the breadcrumb. Not a blocker, but a followup that would be good to add when possible, would be the ability to customize the separator. / is a good default because it's bidirectional and works in RTL languages, but I imagine a theme developer would like to be able to replace with a variety of alternatives, such as > or → or · or | or —. To be clear I'd expect here an input field where you can add your own unicode character, not an icon selector. We also need a better icon. I can design one for you, not today but perhaps tomorrow. 
Finally, if we call this block just "Breadcrumbs", can we make it work not just for hierarchical posts, but for other post types as well? Not a blocker, but it seems useful to have a single block you could use in a variety of contexts. |
ntsekouras
added
the
No Core Sync Required
ntsekouras
force-pushed
the
add/breacrumb-block
branch
from
b6890a4 to
bed0a63
Compare
This behavior is tricky and added a filter here, similar to what we do for template parts, post content etc.. In general it's still not working exactly as you had in mind, because if we also show the template, the block can be inserted. I'm not sure we should try to fine tune this as much as we can (like checking specific templates etc..) because it might get out of hand trying to add various conditionals. We have the same issue with many blocks right now (ex. Archive Title, Term description and many more) and if we want to find a good solution for such context detection we should explore a way to cover all blocks. I'd even argue that this block might not even need special care, but maybe it's fine due to its name (
The other thing that is quite fragile is the placeholder, which I added in my last commit. This block is server side rendered and we try to have a placeholder in the editor that matches that. This means that if we change the server side output and not update the I'd love some more thoughts about this. Maybe @Mamaduka or @youknowriad?
That would be awesome, thank you! |
I think it's ok to have a placeholder when there's no context that tries to mimick the output. |
+1. A general placeholder should be fine when there's no context. There's not much we can do in those scenarios. |
|
Great progress in a short amount of time, kudos. 
I think this works. But perhaps instead of "Page", can it be "Current" or "Item" or "Entry"? Something else that's more agnostic to the CPT you're on? Or if it's still going to be a breadcrumb blocks for posts only, perhaps hardcode "Post"? I don't want to make this placeholder any more fragile than you say it already is, but that's the last piece. 
Can this be a text input instead? 
Can we add the typography and color panel here so you can style those? As for icons, how about this? |
ntsekouras
changed the title
ntsekouras
force-pushed
the
add/breacrumb-block
branch
from
bed0a63 to
866313c
Compare
Co-authored-by: Aki Hamano <[email protected]>
This reverts commit 6ec5a07.
ntsekouras
force-pushed
the
add/breacrumb-block
branch
from
4eb7739 to
fb2d9f0
Compare
|
Since the plan is to support breadcrumbs for multiple types(post, terms, archive, etc..) I renamed the block to just What do you think of merging and quickly following up with more functionality, starting with terms? |
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
As v1, we think it's robust, minimal, and ready to ship.
We can add the "terms" behavior as a follow-up which would force us to think about how to differentiate between "auto" and "manual" behavior. I think we need a "help" text in the sidebar explaining what the block does in "auto" behavior.
Let's carefully consider this in a follow-up.
P.S. Once the Gutenberg_Hierarchical_Sort class is backported to core, we might be able to refactor the Edit component to use client-side rendering. See:
|
Maybe I’m doing something wrong, but I tried testing this in Playground, and added it to the Single template. While it shows in the site editor: 
It does not output anything on the front end: 
|
|
@bgardner - The current version only works for singular post views of hierarchical post types. |
|
@bgardner it's what @justintadlock said. I'll open a follow up to support more cases and start with |
|
@justintadlock Singular being different than Single? |
"Singular" covers more use cases than "single" (for example, Honestly, it'd be more appropriate to say that the current version is tied to a post context and only when that post type is hierarchical. It's not really checking if we're on a single or singular view. Regardless, it basically only works for Pages and hierarchical post types at the moment. |
|
@justintadlock Completely understand. Just wanted to confirm that what I posted above is expected behavior (and not a bug). Which it appears to be (expected). Appreciate it! |
|
Edit: I meant to add this comment in #72124. I'll add it there. |
What?
Part of: #71026
Resolves: #21943
This PR adds a simple breadcrumbs block that has two options:
Tasks:
Testing Instructions
pages)Screenshots or screencast