Headers: Update site & page title in local navigation

See WordPress/wporg-mu-plugins#535
WordPress · Jun 27, 2024 · f24f286 · f24f286
1 parent 4518990
commit f24f286
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/source/wp-content/themes/wporg-documentation-2022/parts/header-home.html b/source/wp-content/themes/wporg-documentation-2022/parts/header-home.html
@@ -2,9 +2,7 @@
 
 <!-- wp:wporg/local-navigation-bar {"backgroundColor":"charcoal-2","style":{"position":{"type":"sticky"},"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}}},"textColor":"white","fontSize":"small"} -->
 
-	<!-- wp:html -->
-	<div style="height:calc(var(--wp--custom--body--small--typography--line-height) * var(--wp--preset--font-size--small));" aria-hidden="true"></div>
-	<!-- /wp:html -->
+	<!-- wp:site-title {"level":0,"fontSize":"small","className":"wporg-local-navigation-bar__show-on-scroll"} /-->
 
 	<!-- wp:navigation {"menuSlug":"documentation","icon":"menu","overlayBackgroundColor":"charcoal-2","overlayTextColor":"white","layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
 

diff --git a/source/wp-content/themes/wporg-documentation-2022/parts/header.html b/source/wp-content/themes/wporg-documentation-2022/parts/header.html
@@ -2,7 +2,15 @@
 
 <!-- wp:wporg/local-navigation-bar {"backgroundColor":"charcoal-2","style":{"position":{"type":"sticky"},"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}}},"textColor":"white","fontSize":"small"} -->
 
-	<!-- wp:site-title {"level":0,"fontSize":"small"} /-->
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"textColor":"light-grey-1","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+	<div class="wp-block-group has-light-grey-1-color has-text-color">
+		<!-- wp:site-title {"level":0,"fontSize":"small","textColor":"white"} /-->
+
+		<!-- wp:query-title {"type":"filter","level":0,"fontSize":"small","fontFamily":"inter","className":"wporg-local-navigation-bar__fade-in-scroll"} /-->
+
+		<!-- wp:post-title {"level":0,"fontSize":"small","fontFamily":"inter","className":"wporg-local-navigation-bar__fade-in-scroll"} /-->
+	</div>
+	<!-- /wp:group -->
 
 	<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"charcoal-2","overlayTextColor":"white","layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small","menuSlug":"documentation"} /-->
 

diff --git a/source/wp-content/themes/wporg-documentation-2022/src/style/style.scss b/source/wp-content/themes/wporg-documentation-2022/src/style/style.scss
@@ -17,6 +17,16 @@ p.has-background {
 	padding: var(--wp--preset--spacing--20);
 }
 
+/* Both blocks are in the local header, but only one should be shown at any given time. */
+body.archive .wp-block-wporg-local-navigation-bar .wp-block-post-title {
+	display: none;
+}
+
+body.single .wp-block-wporg-local-navigation-bar .wp-block-query-title,
+body.page .wp-block-wporg-local-navigation-bar .wp-block-query-title {
+	display: none;
+}
+
 // Scale down very large headings so they fit on mid-sized screens.
 .wp-block-heading.has-heading-cta-font-size {
 	// Scales from 54px at 400 wide to 120px at 900 wide.