Add the Blue Bar

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