Add the Blue Bar (#41)

Introduces the "Blue Bar" or, more accurately, a local header beneath the global header. It includes a simple taxonomy-based breadcrumb on the left and a CSS-based dropdown menu of categories on the right. The color scheme changes ("The Not Blue Bar") for certain categories. The layout responsively handles mobile, tablet, and desktop views.

This also makes the entire site header (including the global header) fixed to the top when not in a narrow mobile viewport, as called for in the design.

Fixes #32

source/wp-content/themes/wporg-news-2021/block-template-parts/header-navigation.html

@@ -0,0 +1,32 @@
+<!-- wp:group {"align":"wide","className":"local-header__navigation"} -->
+<div class="wp-block-group alignwide local-header__navigation">
+	<!-- wp:group {"className":"local-header__breadcrumb"} -->
+	<div class="wp-block-group local-header__breadcrumb">
+		<!-- wp:navigation {"orientation":"horizontal"} -->
+			<!-- wp:home-link {"label":"News"} /-->
+		<!-- /wp:navigation -->
+		<!-- wp:query-title {"type":"archive","className":"local-header__breadcrumb-current"} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"className":"local-header__categories"} -->
+	<div class="wp-block-group local-header__categories">
+		<!--
+			The checkbox allows us to have a toggleable state for the categories dropdown that will persist when
+			not in focus. This way we can manage the dropdown with CSS only, and not have to bring in JS.
+			Inspired by https://codepen.io/Sidstumple/pen/RwNZYBe
+		-->
+		<!-- wp:html -->
+		<input type="checkbox" id="local-header__categories-toggle" class="local-header__categories-toggle" aria-label="Show categories list" />
+		<label for="local-header__categories-toggle" class="local-header__categories-label">
+			<span>Categories</span>
+			<svg width="10" height="7" viewBox="0 0 10 7" fill="none" stroke="white" stroke-width="1.2" xmlns="http://www.w3.org/2000/svg">
+				<path d="M0.416667 1.33325L5 5.49992L9.58331 1.33325" />
+			</svg>
+		</label>
+		<!-- /wp:html -->
+		<!-- wp:categories /-->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

source/wp-content/themes/wporg-news-2021/block-template-parts/header.html

@@ -0,0 +1,2 @@
+<!-- wp:wporg/global-header /-->
+<!-- wp:template-part {"slug":"header-navigation","tagName":"nav","className":"local-header","layout":{"inherit":true}} /-->

source/wp-content/themes/wporg-news-2021/block-templates/index.html

@@ -1,12 +1,6 @@
-<!-- wp:wporg/global-header /-->
-
-<!-- wp:group {"tagName":"header","className":"header-archive header-archive-all-posts","layout":{"inherit":true}} -->
-<header class="wp-block-group header-archive header-archive-all-posts">
-	<!-- wp:heading {"level":1,"align":"wide"} -->
-	<h1 class="alignwide">All Posts</h1>
-	<!-- /wp:heading -->
-</header>
-<!-- /wp:group -->
+<!-- wp:template-part {"slug":"header","align":"full","className":"site-header-container"} /-->
+<!-- This is a hack to ensure content isn't covered by the fixed header -->
+<!-- wp:template-part {"slug":"header","align":"full","className":"site-header-offset"} /-->
 
 <!-- wp:query {"tagName":"main","className":"site-content-container content-archive"} -->
 <main class="wp-block-query site-content-container content-archive">

source/wp-content/themes/wporg-news-2021/block-templates/single.html

@@ -1,4 +1,6 @@
-<!-- wp:wporg/global-header /-->
+<!-- wp:template-part {"slug":"header","align":"full","className":"site-header-container"} /-->
+<!-- This is a hack to ensure content isn't covered by the fixed header -->
+<!-- wp:template-part {"slug":"header","align":"full","className":"site-header-offset"} /-->
 
 <!-- wp:template-part {"slug":"content-single","tagName":"main","className":"site-content-container content-single"} /-->
 

source/wp-content/themes/wporg-news-2021/functions.php

@@ -11,6 +11,7 @@
 add_action( 'after_setup_theme', __NAMESPACE__ . '\theme_support', 9 );
 add_action( 'after_setup_theme', __NAMESPACE__ . '\editor_styles' );
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
+add_action( 'get_the_archive_title_prefix', __NAMESPACE__ . '\modify_archive_title_prefix' );
 
 /**
  * Register theme support.
@@ -105,3 +106,14 @@ function fonts_url() {
 	// Make a single request for the theme fonts.
 	return esc_url_raw( 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families ) );
 }
+
+/**
+ * Blank out the archive title prefix.
+ *
+ * TODO This filter can be removed if/when this issue is resolved: https://github.com/WordPress/gutenberg/issues/30519
+ *
+ * @return string
+ */
+function modify_archive_title_prefix() {
+	return '';
+}

source/wp-content/themes/wporg-news-2021/sass/components/_header.scss

@@ -0,0 +1,241 @@
+.site-header {
+	&-container {
+		width: 100%;
+
+		// Don't fix the header on mobile, because screen real estate is limited.
+		// Matches the breakpoint for the admin bar.
+		@include break-small {
+			position: fixed;
+		}
+	}
+
+	// Since the site header has a dynamic height, depending on the viewport width, this allows us to
+	// offset the content by the same amount so it isn't covered by the visible fixed header.
+	// See https://stackoverflow.com/a/59853252
+	&-offset {
+		display: none;
+
+		@include break-small {
+			display: block;
+			visibility: hidden; // This removes the element and descendents from the accessibility tree.
+		}
+	}
+}
+
+.local-header {
+	// Evidently strings for custom properties can't be concatenated inside a `url()`, which is why each of the
+	// color variations has to define its own version of the SVG.
+	--bar-background-image: url("assets/svg/brush-stroke-nav-bar-blue-1.svg"),
+	url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%233e58e1'%3E%3C/rect%3E%3C/svg%3E");
+	--bar-text-color: var(--wp--preset--color--white);
+	--bar-link-color: var(--wp--preset--color--white);
+
+	min-height: 56px;
+	background-image: var(--bar-background-image);
+	background-position: 5% bottom, left calc( 100% - 56px );
+	background-repeat: repeat-x;
+	color: var(--bar-text-color);
+
+	.wp-site-blocks & {
+		margin-top: 0;
+	}
+
+	svg {
+		stroke: var(--bar-text-color);
+	}
+
+	// Color variations
+	.category-development & {
+		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-green.svg"),
+		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%2372d1a7'%3E%3C/rect%3E%3C/svg%3E");
+		--bar-text-color: var(--wp--preset--color--black);
+		--bar-link-color: var(--wp--preset--color--black);
+	}
+
+	.category-events & {
+		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-white.svg"),
+		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%23ffffff'%3E%3C/rect%3E%3C/svg%3E");
+		--bar-text-color: var(--wp--preset--color--black);
+		--bar-link-color: var(--wp--preset--color--blue-1);
+	}
+
+	.category-month-in-wordpress & {
+		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-dark-grey.svg"),
+		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%2323282d'%3E%3C/rect%3E%3C/svg%3E");
+		--bar-text-color: var(--wp--preset--color--white);
+		--bar-link-color: var(--wp--preset--color--white);
+	}
+
+	.category-security & {
+		--bar-background-image: url("assets/svg/brush-stroke-nav-bar-coral-red.svg"),
+		url("data:image/svg+xml,%3Csvg height='1000' width='1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' height='1000' width='1' r='0' rx='0' ry='0' fill='%23f86368'%3E%3C/rect%3E%3C/svg%3E");
+		--bar-text-color: var(--wp--preset--color--black);
+		--bar-link-color: var(--wp--preset--color--black);
+	}
+
+	&__navigation {
+		position: relative;
+
+		@include break-mobile {
+			display: flex;
+			align-items: flex-start;
+			justify-content: space-between;
+		}
+
+		[class*="wp-container-"] & {
+			padding: 15px 0.5em;
+
+			@include break-mobile {
+				padding: 0 0.5em;
+			}
+
+			@include break-xlarge {
+				padding: 0;
+			}
+		}
+	}
+
+	&__breadcrumb {
+		color: var(--bar-text-color);
+
+		@include break-mobile {
+			line-height: 50px;
+		}
+
+		&-current {
+			display: inline-block;
+			font-family: var(--wp--preset--font-family--inter);
+			font-size: 1rem;
+			font-weight: 700;
+
+			[class*="wp-container-"] & {
+				margin-top: 0;
+			}
+
+			&:before {
+				content: "\0020\00B7\0020";
+			}
+		}
+
+		.wp-block-navigation {
+			display: inline-block;
+		}
+
+		a {
+			color: var(--bar-link-color);
+		}
+	}
+
+	&__categories {
+		--flex-items-per-column: 8;
+
+		@include break-medium {
+			--flex-items-per-column: 4;
+		}
+
+		[class*="wp-container-"] & {
+			margin-top: 0;
+		}
+
+		// This selector overcomes the overly generic `input[type=checkbox] + label` rule in the reset.
+		label#{&}-label {
+			display: block;
+			color: var(--bar-text-color);
+			margin: 0;
+			padding: 15px 0;
+			cursor: pointer;
+
+			@include break-mobile {
+				line-height: 50px;
+				padding: 0;
+				text-align: right;
+			}
+
+			span {
+				padding: 0 3px 0 0;
+			}
+
+			svg {
+				vertical-align: middle;
+			}
+		}
+
+		&-toggle {
+			opacity: 0;
+			width: 0;
+			height: 0;
+			appearance: none;
+			position: fixed;
+
+			&:checked {
+				& + label {
+					@include break-mobile {
+						height: calc( 1rem * var(--wp--custom--body--typography--line-height) * var(--flex-items-per-column) + 125px );
+					}
+
+					span {
+						text-decoration: underline;
+					}
+
+					svg {
+						transform: rotate( 180deg );
+					}
+				}
+
+				& ~ .wp-block-categories {
+					display: flex;
+					opacity: 1;
+					animation-duration: 400ms;
+					animation-name: categories-fade-in;
+
+					@at-root {
+						@keyframes categories-fade-in {
+							from {
+								opacity: 0;
+							}
+
+							to {
+								opacity: 1;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.wp-block-categories {
+			display: none;
+			opacity: 0;
+			flex-direction: column;
+			flex-wrap: wrap;
+			width: calc( min( 100%, var(--wp--custom--layout--wide-size) ) );
+			color: var(--bar-text-color);
+			list-style: none;
+			padding: 0 0 2em 0;
+
+			@include break-mobile {
+				padding: 0 0.5em 0;
+				position: absolute;
+				left: 0;
+				top: 75px;
+				max-height: calc( 1rem * var(--wp--custom--body--typography--line-height) * var(--flex-items-per-column) );
+			}
+
+			[class*="wp-container-"] & {
+				margin-top: 0;
+			}
+
+			a {
+				color: var(--bar-link-color);
+			}
+
+			.current-cat {
+				font-weight: 700;
+
+				&:before {
+					content: "\0020\00B7\0020";
+				}
+			}
+		}
+	}
+}

source/wp-content/themes/wporg-news-2021/sass/components/_style.scss

@@ -0,0 +1 @@
+@import "header";

source/wp-content/themes/wporg-news-2021/sass/post/_header.scss

@@ -1,14 +1,3 @@
-.header-archive {
-	h1 {
-		font-size: 7.5rem;
-	}
-
-	&-all-posts {
-		color: var(--wp--preset--color--white);
-		background-color: var(--wp--preset--color--blue-1);
-	}
-}
-
 .entry-header {
 	&[class*="wp-container-"] * + * {
 		margin-top: 0;

source/wp-content/themes/wporg-news-2021/sass/style.scss

@@ -29,6 +29,10 @@ GNU General Public License for more details.
 // - Styles for basic HTML elemants
 @import "elements/style";
 
+// Components
+// - Styles for site components
+@import "components/style";
+
 // Blocks
 // - These styles replace key Gutenberg Block styles for fonts, colors, and
 //   spacing with CSS-variables overrides