Add breadcrumbs to templates (#2491)

* Add site breadcrumbs to course and lesson single pages. * Change text from 'Learn' to 'Home'
WordPress · Jun 6, 2024 · 052f794 · 052f794
1 parent 88c5b7c
commit 052f794
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 11 deletions.
diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
@@ -14,6 +14,7 @@
  */
 add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
+add_filter( 'wporg_block_site_breadcrumbs', __NAMESPACE__ . '\set_site_breadcrumbs' );
 add_filter( 'wporg_block_navigation_menus', __NAMESPACE__ . '\add_site_navigation_menus' );
 add_filter( 'single_template_hierarchy', __NAMESPACE__ . '\modify_single_template' );
 remove_filter( 'template_include', array( 'Sensei_Templates', 'template_loader' ), 10, 1 );
@@ -213,3 +214,64 @@ function get_learning_pathway_level_content( $learning_pathway ) {
 
 	return $content[ $learning_pathway ];
 }
+
+/**
+ * Filters breadcrumb items for the site-breadcrumb block.
+ *
+ * @param array $breadcrumbs
+ *
+ * @return array
+ */
+function set_site_breadcrumbs( $breadcrumbs ) {
+	if ( isset( $breadcrumbs[0] ) ) {
+		// Change the title of the first breadcrumb to 'Home'.
+		$breadcrumbs[0]['title'] = 'Home';
+	}
+
+	$post_type = get_post_type();
+
+	if ( is_singular() && 'page' !== $post_type && 'post' !== $post_type ) {
+		// CPT single page: Insert the archive breadcrumb into the second position.
+		$post_type_object = get_post_type_object( $post_type );
+		$archive_title = $post_type_object->labels->name;
+		$archive_url = get_post_type_archive_link( $post_type );
+
+		$archive_breadcrumb = array(
+			'url' => $archive_url,
+			'title' => $archive_title,
+		);
+
+		array_splice( $breadcrumbs, 1, 0, array( $archive_breadcrumb ) );
+
+		// If it's a lesson single page, change the second breadcrumb to the course archive
+		// and insert the lesson course breadcrumb into the third position.
+		if ( is_singular( 'lesson' ) ) {
+			$lesson_course_id = get_post_meta( get_the_ID(), '_lesson_course', true );
+
+			if ( empty( $lesson_course_id ) ) {
+				return $breadcrumbs;
+			}
+
+			$post_type_object = get_post_type_object( 'course' );
+			$archive_title = $post_type_object->labels->name;
+			$archive_url = get_post_type_archive_link( $post_type );
+
+			$archive_breadcrumb = array(
+				'url' => $archive_url,
+				'title' => $archive_title,
+			);
+
+			$lesson_course_title = get_the_title( $lesson_course_id );
+			$lesson_course_link = get_permalink( $lesson_course_id );
+			$lesson_course_breadcrumb = array(
+				'url' => $lesson_course_link,
+				'title' => $lesson_course_title,
+			);
+
+			$breadcrumbs[1] = $archive_breadcrumb;
+			array_splice( $breadcrumbs, 2, 0, array( $lesson_course_breadcrumb ) );
+		}
+	}
+
+	return $breadcrumbs;
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php
@@ -14,17 +14,9 @@
 	<!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"0px","bottom":"0px"}}},"className":"sensei-course-theme-header-content","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
 	<div class="wp-block-group sensei-course-theme-header-content" style="padding-top:0px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:0px;padding-left:var(--wp--preset--spacing--edge-space)">
 
-		<!-- wp:group {"style":{"spacing":{"blockGap":"15px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
-		<div class="wp-block-group">
-
-			<!-- wp:site-title {"level":2,"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-4"}}},"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"charcoal-4","fontSize":"small"} /-->
-
-			<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|light-grey-1"}}}},"textColor":"light-grey-1"} -->
-			<p class="has-light-grey-1-color has-text-color has-link-color" aria-hidden="true">/</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:sensei-lms/course-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"margin":{"top":"0"},"padding":{"right":"0","left":"0"}}},"fontSize":"small"} /-->
-
+		<!-- wp:group {"className":"wporg-breadcrumbs","align":"full","style":{"spacing":{"padding":{"top":"18px","bottom":"18px","right":"var:preset|spacing|edge-space"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+		<div class="wporg-breadcrumbs wp-block-group alignfull has-white-background-color has-background" style="padding-top:18px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:18px;">
+			<!-- wp:wporg/site-breadcrumbs {"fontSize":"small"} /-->
 		</div>
 		<!-- /wp:group -->
 

diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/single-course.html b/wp-content/themes/pub/wporg-learn-2024/templates/single-course.html
@@ -1,5 +1,12 @@
 <!-- wp:template-part {"slug":"header","className":"has-display-contents","tagName":"div"} /-->
 
+<!-- wp:group {"className":"wporg-breadcrumbs","align":"full","style":{"spacing":{"padding":{"top":"18px","bottom":"18px","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wporg-breadcrumbs wp-block-group alignfull has-white-background-color has-background" style="padding-top:18px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:18px;padding-left:var(--wp--preset--spacing--edge-space)">
+	<!-- wp:wporg/site-breadcrumbs {"fontSize":"small"} /-->
+</div>
+<!-- /wp:group -->
+
+
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
 <main class="wp-block-group entry-content">