Add breadcrumbs to templates

[renintw]

Add breadcrumbs to the sites, except for Home and the Learning Pathway taxonomy. See design.

Closes #2442

I noticed in the design there's a Learn WordPress breadcrumb, which link does it link to? It appears to be redundant with 'Home'. @WordPress/meta-design

Screenshots

post type	screenshot
Home
Post
My Course
Online Workshops
Apply to Faciliate
Grandchild Page
Contribute
Lessons Archive
Courses Archive
Single Course
Learning Pathways (got some issues rendering image here in the local env, but yeah this is the learning pathways)

[adamwoodnz]

Learning Pathways (got some issues rendering image here in the local env, but yeah this is the learning pathways)

Looks like this is actually the section title. $content should be coming from this function, seems like the reference is not working for you?

[adamwoodnz]

Single lesson is showing the course name but not the lesson name

[adamwoodnz]

Looking good! Apart from the second 'Learn WordPress' breadcrumb you've noted, the only other thing I've noticed is that the /learning-pathways page shouldn't have breadcrumbs

[fcoveram]

I noticed in the design there's a Learn WordPress breadcrumb, which link does it link to? It appears to be redundant with 'Home'.

You are right @renintw. The "Learn WordPress" link should not be there, sorry for the confusion. The mockups were updated.

[renintw]

Looks like this is actually the section title. $content should be coming from this function, seems like the reference is not working for you?

Since I got all these error messages, those lines are currently commented out.
What are the steps to properly set up the learning pathway config? I reckon some settings need to be done in the wp-admin. And does it require to activate sensei pro to make the functions fully work?

Notice: Trying to get property ‘term_id’ of non-object in /var/www/html/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content.php on line 11 Notice: Trying to get property ‘slug’ of non-object in /var/www/html/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content.php on line 12 Notice: Trying to get property ‘term_id’ of non-object in /var/www/html/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content.php on line 14 Notice: Trying to get property ‘term_id’ of non-object in /var/www/html/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content.php on line 15 Notice: Trying to get property ‘term_id’ of non-object in /var/www/html/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content.php on line 16 Notice: Undefined index: in /var/www/html/wp-content/themes/pub/wporg-learn-2024/functions.php on line 214

Notice: Trying to access array offset on value of type null in /var/www/html/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content.php on line 51
Notice: Trying to access array offset on value of type null in /var/www/html/wp-content/themes/pub/wporg-learn-2024/patterns/taxonomy-learning-pathway-content.php on line 58```

[renintw]

the only other thing I've noticed is that the /learning-pathways page shouldn't have breadcrumbs

Missed that page, there are currently no CTAs that can link to this page right?
Fix: 55c8358

[renintw]

Single lesson is showing the course name but not the lesson name

A lesson that belongs to a course can be accessed from the lesson archive or from its associated course page. If accessed from the course page, the breadcrumbs shown in the screenshot below would make sense. However, if accessed from the lesson archive, the user might expect to be able to return to the lesson archive?
Currently, I am providing a more consistent experience for users who enter a lesson from its associated course.
What do you think? (I'm thinking if users want to go back to the lesson archive, they can simply use the back button. Moreover, when they click into a lesson and see that it belongs to a specific course, it can potentially encourage them to explore more content. It's still a bit inconsistent in a sense, though)

	screenshot
lesson not belonging to any course
lesson belonging to certain course

[adamwoodnz]

Single lesson is showing the course name but not the lesson name

A lesson that belongs to a course can be accessed from the lesson archive or from its associated course page. If accessed from the course page, the breadcrumbs shown in the screenshot below would make sense. However, if accessed from the lesson archive, the user might expect to be able to return to the lesson archive? Currently, I am providing a more consistent experience for users who enter a lesson from its associated course. What do you think? (I'm thinking if users want to go back to the lesson archive, they can simply use the back button. Moreover, when they click into a lesson and see that it belongs to a specific course, it can potentially encourage them to explore more content. It's still a bit inconsistent in a sense, though)

screenshot
lesson not belonging to any course
lesson belonging to certain course

I think it would be quite unusual for a Lesson to not be part of a Course, so I think prioritising that structure makes sense. In the rare case when it is free standing, having the lesson archive as the parent makes sense to me.

[adamwoodnz]

Looks like this is actually the section title. $content should be coming from this function, seems like the reference is not working for you?

Since I got all these error messages, those lines are currently commented out. What are the steps to properly set up the learning pathway config? I reckon some settings need to be done in the wp-admin. And does it require to activate sensei pro to make the functions fully work?

This isn't using any sensei pro features, just a custom taxonomy. Maybe you don't have the taxonomy set up with the expected slugs; there should be developer, user, designer, and contributor. You can edit the slugs at http://localhost:8888/wp-admin/edit-tags.php?taxonomy=learning-pathway&post_type=course

I've added a taxonomy guard in this PR but obviously needs more to check the term exists.

[adamwoodnz]

Also just noticed there should be no breadcrumbs on the Courses or Lessons archives, sorry I missed this, maybe the designs changed...

[adamwoodnz]

And the empty breadcrumbs are still taking up space on the pages where we return early:

Learning Pathways	Learning Pathway

[renintw]

Also just noticed there should be no breadcrumbs on the Courses or Lessons archives, sorry I missed this, maybe the designs changed...

Just to double confirm, are those pages (archives) supposed to not have breadcrumbs? @WordPress/meta-design Thanks.

[renintw]

I think it would be quite unusual for a Lesson to not be part of a Course, so I think prioritising that structure makes sense. In the rare case when it is free standing, having the lesson archive as the parent makes sense to me.

ah. I mean for lessons that are part of a Course, users can typically get into those lessons in two ways:

1. from a course.
2. from the homepage or lesson archive.

The current breadcrumbs implementation makes the flow consistent for users entering a lesson through a course page. (they can see the previous paths, which include the course title and the course archive)
but it kind of isn't when users coming from the homepage or lesson archive. (I imagine users would expect to see the Learn archive as the previous path in the breadcrumbs)

[renintw]

Maybe you don't have the taxonomy set up with the expected slugs; there should be developer, user, designer, and contributor.

I had set these values from the beginning. I just added the missing contributor, but it's still the same.

Update

Fixed.

[fcoveram]

Also just noticed there should be no breadcrumbs on the Courses or Lessons archives, sorry I missed this, maybe the designs changed...

Just to double confirm, are those pages (archives) supposed to not have breadcrumbs?

Exactly. No breadcrumb on pages that are visible in the local nav. That includes Courses and Pages, and from these screenshots I see it's also on My courses. It should be hidden on this page as well.

Regarding landing on the "Learning Pathway" page (as per this comment), it was intentionally not linked from the homepage and local nav. Adding an index page that does not provide more info for browsing content felt unnecessary.

[adamwoodnz]

I think it would be quite unusual for a Lesson to not be part of a Course, so I think prioritising that structure makes sense. In the rare case when it is free standing, having the lesson archive as the parent makes sense to me.

ah. I mean for lessons that are part of a Course, users can typically get into those lessons in two ways:

1. from a course.
2. from the homepage or lesson archive.

The current breadcrumbs implementation makes the flow consistent for users entering a lesson through a course page. (they can see the previous paths, which include the course title and the course archive) but it kind of isn't when users coming from the homepage or lesson archive. (I imagine users would expect to see the Learn archive as the previous path in the breadcrumbs)

The breadcrumbs aren't supposed to reflect the browsing history though, rather the information hierarchy. That's what I expect, if I want to go back I can use browser history.

[adamwoodnz]

Maybe you don't have the taxonomy set up with the expected slugs; there should be developer, user, designer, and contributor.

I had set these values from the beginning. I just added the missing contributor, but it's still the same.

Hmm I'm not sure what's going on then. It isn't an issue on staging or prod, so it seems likely it's local config. Happy to help debug if you like.

[renintw]

The feedback mentioned above has already been addressed.

@fcoveram There are still some inconsistencies though. I'd like to confirm a few things:

1. The local nav only goes up to the second level, right?
   Like Learn WordPress。Courses (First 。Second)
   

2. Pages should not have breadcrumbs, but I see some do and some don't in the design.

3. If pages shouldn't have breadcrumbs, should a child or grandchild have them? I see it does in the design. (And what do you think the local nav should look like in this case?)
   

Does it make sense to summarize that the local navigation will display up to the second level, and breadcrumbs start to display from when it's the third level?
It looks like this is the case for the developer pages (although its local nav doesn't display the second level directly like this design unless scrolled)

[adamwoodnz]

Code changes LGTM. You could ship this then iterate on the page things in a separate PR maybe.

[fcoveram]

I think we're missing the part of how local nav and breadcrumb behave. IIRC, all discussion and decision happened in wporg-mu-plugins#535. Here are the designs that show different uses cases across the site, and the diagram below summarizes what's in the design file.

In this screenshot, Learn WordPress is a link to self and Course is a label of the page where users are that show up when scrolling down. Take a look at the accessibility page.

[renintw]

Thanks @fcoveram, that's very clear!
I'll move the tweaks of the local nav along with the breadcrumbs of pages into another ticket.