feat: add support for yoast breadcrumbs (#855)

* feat: add support for yoast breadcrumb * feat: display the breadcrumbs only on tablet and larger screens * fix: revert font family to inherit * fix: breadcrumb position and color for Newspack Nelson * feat: update themes when highlight menu is enabled * fix: lint * fix: lint * fix: remove border and padding depending on featured image style * feat: update font family to heading * feat: update breadcrumb border style to dotted * fix: sass typo * feat: update Nelson breadcrumb border-top color * feat: don't display breadcrumb if the featured image is behind or beside * feat: reorder sass file * fix: wrong border-color variable for the breadcrumbs using nelson
Automattic · Apr 1, 2020 · dfdcf28 · dfdcf28
1 parent 8087e9d
commit dfdcf28
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 6 deletions.
diff --git a/newspack-joseph/sass/style.scss b/newspack-joseph/sass/style.scss
@@ -68,6 +68,21 @@ body {
 	}
 }
 
+// Yoast Breadcrumbs
+.site-breadcrumb {
+	border-bottom: 1px solid;
+
+	.has-highlight-menu & {
+		border-top: 1px solid;
+		margin-top: 0.25rem;
+		padding-top: 0;
+
+		.wrapper {
+			border: 0;
+		}
+	}
+}
+
 /* Font Family */
 figcaption,
 .entry-meta,

diff --git a/newspack-katharine/inc/child-color-patterns.php b/newspack-katharine/inc/child-color-patterns.php
@@ -48,7 +48,8 @@ function newspack_katharine_custom_colors_css() {
 		.cat-links:before,
 		.archive .page-title:before,
 		figcaption:after,
-		.wp-caption-text:after {
+		.wp-caption-text:after,
+		.has-highlight-menu .site-breadcrumb .wrapper > span::before {
 			background-color: ' . esc_html( $primary_color ) . ';
 		}
 

diff --git a/newspack-katharine/sass/style.scss b/newspack-katharine/sass/style.scss
@@ -408,3 +408,14 @@ figcaption,
 		color: inherit;
 	}
 }
+
+// Yoast Breadcrumbs
+
+.site-breadcrumb {
+	.has-highlight-menu & {
+		.wrapper {
+			border-top-color: currentColor;
+			border-top-style: dotted;
+		}
+	}
+}
diff --git a/newspack-nelson/inc/child-color-patterns.php b/newspack-nelson/inc/child-color-patterns.php
@@ -69,7 +69,9 @@ function newspack_nelson_custom_colors_css() {
 			/* Header short height; default background */
 			.h-sh.h-db .site-header,
 			.site-content #primary,
-			#page .site-header {
+			#page .site-header,
+			/* Yoast Breadcrumb */
+			.has-highlight-menu .site-breadcrumb .wrapper {
 				border-color: ' . esc_html( newspack_adjust_brightness( $header_color, -40 ) ) . ';
 			}
 
@@ -88,6 +90,9 @@ function newspack_nelson_custom_colors_css() {
 			.nav1 .sub-menu a,
 			.h-sb .site-header .highlight-menu .menu-label,
 			.h-sb .site-header .highlight-menu a,
+			.h-sb .site-breadcrumb,
+			.h-sb .site-breadcrumb a,
+			.h-sb .site-breadcrumb .breadcrumb_last,
 			.h-sb .site-footer {
 				color: ' . esc_html( $header_color_contrast ) . ';
 			}

diff --git a/newspack-nelson/sass/style.scss b/newspack-nelson/sass/style.scss
@@ -64,7 +64,8 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 }
 
 .site-content,
-.newspack-front-page.hide-homepage-title .site-content {
+.newspack-front-page.hide-homepage-title .site-content,
+.site-breadcrumb {
 	@include media( tablet ) {
 		margin-top: #{-3.5 * $size__spacing-unit};
 	}
@@ -509,3 +510,36 @@ blockquote {
 		}
 	}
 }
+
+// Yoast Breadcrumb
+
+.site-breadcrumb {
+	@include media( tablet ) {
+		margin-bottom: #{3.5 * $size__spacing-unit};
+	}
+
+	@include media( desktop ) {
+		margin-bottom: #{6 * $size__spacing-unit};
+	}
+
+	.h-sb & {
+		color: $color__background-body;
+
+		a,
+		.breadcrumb_last {
+			color: inherit;
+		}
+
+		a:active,
+		a:focus,
+		a:hover {
+			opacity: 0.75;
+		}
+	}
+
+	.has-highlight-menu & {
+		.wrapper {
+			border-top-color: $color__primary-variation;
+		}
+	}
+}
diff --git a/newspack-sacha/sass/style.scss b/newspack-sacha/sass/style.scss
@@ -465,6 +465,14 @@ cite {
 	}
 }
 
+// Yoast Breadcrumbs
+
+.site-breadcrumb {
+	.wrapper {
+		justify-content: center;
+	}
+}
+
 // Pop-up
 
 .entry-content {

diff --git a/newspack-scott/inc/child-color-patterns.php b/newspack-scott/inc/child-color-patterns.php
@@ -32,7 +32,8 @@ function newspack_scott_custom_colors_css() {
 		.accent-header:not(.widget-title):before,
 		.article-section-title:before,
 		.cat-links:before,
-		.page-title:before {
+		.page-title:before,
+		.site-breadcrumb .wrapper > span::before {
 			background-color: ' . esc_html( $primary_color ) . ';
 		}
 

diff --git a/newspack-scott/sass/style.scss b/newspack-scott/sass/style.scss
@@ -296,3 +296,18 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 .site-info {
 	font-family: $font__heading;
 }
+
+/* Yoast Breadcrumbs */
+
+.site-breadcrumb {
+	.wrapper {
+		> span::before {
+			background-color: $color__primary;
+			content: '';
+			display: inline-block;
+			height: 0.75em;
+			margin: 0 0.5em 0 0;
+			width: 0.75em;
+		}
+	}
+}
diff --git a/newspack-theme/header.php b/newspack-theme/header.php
@@ -217,6 +217,12 @@
 
 	</header><!-- #masthead -->
 
+	<?php
+	if ( function_exists('yoast_breadcrumb') ) {
+		yoast_breadcrumb( '<div class="site-breadcrumb desktop-only"><div class="wrapper">','</div></div>' );
+	}
+	?>
+
 	<?php do_action( 'after_header' ); ?>
 
 	<div id="content" class="site-content">
diff --git a/newspack-theme/inc/template-functions.php b/newspack-theme/inc/template-functions.php
@@ -112,6 +112,10 @@ function newspack_body_classes( $classes ) {
 		$classes[] = 'has-tertiary-menu';
 	}
 
+	if ( has_nav_menu( 'highlight-menu' ) ) {
+		$classes[] = 'has-highlight-menu';
+	}
+
 	// Adds a class of has-sidebar when there is a sidebar present.
 	if ( is_active_sidebar( 'sidebar-1' ) && ! ( is_front_page() && 'posts' !== get_option( 'show_on_front' ) ) ) {
 		$classes[] = 'has-sidebar';

diff --git a/newspack-theme/inc/typography.php b/newspack-theme/inc/typography.php
@@ -121,7 +121,10 @@ function newspack_custom_typography_css() {
 		.jp-relatedposts-i2,
 		#jp-relatedposts.jp-relatedposts,
 		.jp-relatedposts-i2 .jp-relatedposts-headline,
-		#jp-relatedposts.jp-relatedposts .jp-relatedposts-headline
+		#jp-relatedposts.jp-relatedposts .jp-relatedposts-headline,
+
+		/* Yoast Breadcrumbs */
+		.site-breadcrumb .wrapper > span
 		{
 			font-family: ' . wp_kses( $font_header, null ) . ';
 		}';

diff --git a/newspack-theme/js/src/amp-fallback.js b/newspack-theme/js/src/amp-fallback.js
@@ -86,7 +86,7 @@
 	// Make sure comments exist before going any further.
 	if ( null !== commentsToggle ) {
 		const commentsWrapper = document.getElementById( 'comments-wrapper' ),
-		commentsToggleTextContain = commentsToggle.getElementsByTagName( 'span' )[ 0 ];
+			commentsToggleTextContain = commentsToggle.getElementsByTagName( 'span' )[ 0 ];
 
 		commentsToggle.addEventListener(
 			'click',

diff --git a/newspack-theme/sass/plugins/yoast-breadcrumb.scss b/newspack-theme/sass/plugins/yoast-breadcrumb.scss
@@ -0,0 +1,33 @@
+.site-breadcrumb {
+	color: $color__text-light;
+
+	.wrapper {
+		padding: 0.5em 0;
+
+		> span {
+			font-family: $font__heading;
+			font-size: $font__size-xxs;
+			line-height: $font__line-height-heading;
+		}
+	}
+
+	.breadcrumb_last {
+		color: $color__text-main;
+	}
+
+	// Hide on homepage and if the Featured Image is Behind or Beside
+	.home &,
+	.single-featured-image-behind &,
+	.single-featured-image-beside & {
+		display: none;
+	}
+
+	// Has Highlight Menu
+	.has-highlight-menu & {
+		padding-top: 0.25rem;
+
+		.wrapper {
+			border-top: 1px solid $color__border;
+		}
+	}
+}
diff --git a/newspack-theme/sass/style-base.scss b/newspack-theme/sass/style-base.scss
@@ -55,3 +55,6 @@
 
 /* Newspack Ads support */
 @import 'plugins/newspack-ads';
+
+/* Yoast Breadcrumb support */
+@import 'plugins/yoast-breadcrumb';