Header: Update site title and page tile in local navigation bar

See WordPress/wporg-mu-plugins#535
WordPress · Jun 27, 2024 · 6694d2d · 6694d2d
1 parent 9b05787
commit 6694d2d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_nav-front.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_nav-front.php
@@ -11,7 +11,7 @@
 <!-- wp:wporg/local-navigation-bar {"backgroundColor":"charcoal-1","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}},"position":{"type":"sticky"},"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}}},"textColor":"white","fontSize":"small"} -->
 	<!-- wp:group -->
 	<div class="wp-block-group">
-		<!-- wp:site-title {"level":1,"isLink":false,"fontSize":"small","fontFamily":"inter"} /-->
+		<!-- wp:site-title {"level":0,"isLink":false,"fontSize":"small","className":"wporg-local-navigation-bar__show-on-scroll"} /-->
 	</div>
 	<!-- /wp:group -->
 

diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_nav.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_nav.php
@@ -9,7 +9,15 @@
 
 ?>
 <!-- wp:wporg/local-navigation-bar {"backgroundColor":"charcoal-1","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 {"menuSlug":"showcase","overlayBackgroundColor":"charcoal-1","overlayTextColor":"white","icon":"menu","layout":{"type":"flex","orientation":"horizontal"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /-->
 <!-- /wp:wporg/local-navigation-bar -->
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php
@@ -25,6 +25,10 @@
 					<h1 class="wp-block-heading has-heading-2-font-size" style="margin-top:0"><?php esc_html_e( 'Showcase', 'wporg' ); ?></h1>
 					<!-- /wp:heading -->
 
+					<!-- wp:heading {"fontSize":"heading-2",style":{"spacing":{"margin":{"top":"0"}}},"className":"screen-reader-text"} -->
+					<h1 class="wp-block-heading has-heading-2-font-size screen-reader-text" style="margin-top:0"><?php esc_html_e( 'Showcase', 'wporg' ); ?></h1>
+					<!-- /wp:heading -->
+
 					<!-- wp:paragraph {"fontSize":"small",style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}}}} -->
 					<p class="has-small-font-size" style="margin-top:var(--wp--preset--spacing--10)"><?php esc_html_e( 'Star-studded sites built with WordPress.', 'wporg' ); ?></p>
 					<!-- /wp:paragraph -->

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
@@ -99,22 +99,34 @@ a:where(:not(.wp-element-button)):focus-visible {
 		}
 	}
 
-	/* Hide the site title on small screens, title appears in local nav. */
+	/* Hide the visible site title on small screens. */
 	@media (max-width: 599px) {
-		h1,
+		h1:not(.screen-reader-text),
 		h1 + p {
 			display: none;
 		}
 	}
-}
 
-/* Hide the site title on small screens, title appears in local nav. */
-@media (min-width: 600px) {
-	body.home .wp-block-site-title {
-		display: none;
+	/* Hide the screen-reader site title on large screens. */
+	@media (min-width: 600px) {
+		h1.screen-reader-text {
+			display: none;
+		}
 	}
 }
 
+/* Both blocks are in the local header, but only one should be shown at any given time. */
+body.blog .wp-block-wporg-local-navigation-bar .wp-block-post-title,
+body.archive .wp-block-wporg-local-navigation-bar .wp-block-post-title,
+body.search .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;
+}
+
 /* Style the site grid. */
 .wp-block-query .is-layout-grid {
 	.wp-block-post-title {