Add breadcrumbs to cli/commands.

[StevenDufresne]

This PR adds the breadcrumbs to cli/commands.

I realized after logging an issue that the designs don't have the breadcrumb. However, I don't understand why this page would not have it when the block-editor handbook landing page and other landing pages have it.
It's also linked in deeper nested pages as the parent and last production currently has the breadcrumb there.

Screenshot

Nested Page

[StevenDufresne]

@ndiego Thoughts?

[adamwoodnz]

If we do add this we'll need to adjust the vertical position of the ToC; it should align with the title.

[StevenDufresne]

I'm getting no table of contents on the staging env (well, i'm getting the back to top).

[StevenDufresne]

Also, if we implement #312, then I imagine it will just work...?

[adamwoodnz]

Also, if we implement #312, then I imagine it will just work...?

That search bar with bottom border is only for handbook pages if I understand it correctly.

[fcoveram]

…I don't understand why this page would not have it when the block-editor handbook landing page and other landing pages have it.

Breadcrumbs appear from the third level and beyond (Home / Level 2 / Level 3). The idea was to avoid duplicative content as in level 2's pages local nav shows the current page in bold. So in the nested page example, it's correct to show it.

That search bar with bottom border is only for handbook pages if I understand it correctly.

Yes. ← Updating this response as this comment informs about an update of this component. The bottom border in Articles should be removed.

[adamwoodnz]

So in the nested page example, it's correct to show it.

Ah ok, so I think we only need to add this to single-command.html

[StevenDufresne]

Breadcrumbs appear from the third level and beyond (Home / Level 2 / Level 3). The idea was to avoid duplicative content as in level 2's pages local nav shows the current page in bold. So in the nested page example, it's correct to show it.

@fcoveram Does that mean it shouldn't be in the block editor handbook?

[fcoveram]

@fcoveram Does that mean it shouldn't be in the block editor handbook?

Exactly.

To assess the change impact, which site sections will have this change? I'm thinking of Developers, Showcase, About WordPress, and News.

The idea of showing it from level 3 is to diminish location redundancy. But in the case of Articles, it feels weird landing on its main page without breadcrumb and then seeing it in all internal pages.

[renintw]

Summarizing the breadcrumb behaviors I've observed while working on another ticket.

Handbook ✅
Only put two here. All handbooks have the same look.

level2	level3

Resource ✅
If clicking on Resource in the breadcrumbs, it would redirect back to Dashicons.
Same in production, visiting Resource page would redirect to Dashicons page.
And there's no breadcrumbs on production, but there's a title though.

local/staging	production

Reference ✅

local/staging	production

Functions ✅
Only put Functions CPT here. Other CPTs have the same look.

In production, it has 4 levels.
We don't need the 'Reference' level? => Done Adding back.

	level2	level3
local/staging
production

Taxonomy ✅
There are overall three taxonomies - since, packages, files

Same here, in production, it has 4 levels.
We don't need the 'Reference' level? => Done Adding back. ✅

local/staging, files	production

There's breadcrumbs on packages page, but isn't on since page. => Done Adding back. ✅

packages	since

The files and since pages can be accessed through the links as indicated below.
Not sure how to access the packages page.

CLI/Commands ✅

I guess this is the most standard one in terms of design.
It only renders breadcrumbs when it's level 3.
It also makes sense not to include Reference in breadcrumbs on CLI/Commands page because there's a button on homepage linking to the page.

	level2	level3
local/staging
production

[renintw]

Currently, most of the pages on developer sites display breadcrumbs at 2 levels.
And to be more specific, CLI-Commands page is the only one that doesn’t display at 2 levels.

And after chatting with @fcoveram, we agree that it makes sense to display the breadcrumbs from Home / Level 1. This is also what we have in Showcase for the site details pages.

Note: In our discussion, it was mentioned that how we describe the levels is slightly off.
All the comments above are labeled as Home / Level 2 / Level 3, but they should actually be Home / Level 1 / Level 2.

[renintw]

@adamwoodnz

I have already added the pages missing the Home/Level1 breadcrumbs.
To test, you can refer to the comments above, where I have marked them with ✅.

Additionally, I have temporarily re-added the 'reference' to the breadcrumbs for now.
Without 'reference', the process becomes a bit odd, as users won't be able to navigate back to the reference page from any CPT pages.

However, this PR mentions the original reason for its removal. (Ref)

@StevenDufresne, is this still a concern? Is the reason we need to remove the 'reference' from the breadcrumbs due to the i18n issue, such as the breadcrumbs being too long?

Update
According to Steve's feedback,
It was removed because the page was gone.
Now it can be brought back.

[fcoveram]

Thanks @renintw for addressing this.

The idea was to avoid duplicative content as in level 1’s pages local nav shows the current page in bold.

That statement shared by me days ago is slightly incorrect. There are L1 pages not displayed in the local nav menu, so displaying them is safer than not. That's the rationale behind this decision.

[adamwoodnz]

Nice work, I like how this simplifies the template setup.

A couple of comments inline.

One more adjustment required now that the CLI Command archive has breadcrumbs; we need to remove this custom ToC spacing rule: https://github.com/WordPress/wporg-developer/blob/trunk/source/wp-content/themes/wporg-developer-2023/src/style/style.scss#L407

Removing that should fix the misaligned ToC and H1:

[renintw]

Updated Screenshot

[adamwoodnz]

LGTM