Try new Local Navigation block (#269)

* Extract subheader and local navigation into separate pattern * Use the Local Navigation block * Remove breadcrumbs from About and Download subpages * Content: Run sync again after updating pages
WordPress · Jul 11, 2023 · 7beddee · 7beddee
1 parent 8d894c9
commit 7beddee
Show file tree

Hide file tree

Showing 39 changed files with 156 additions and 174 deletions.
diff --git a/source/wp-content/themes/wporg-main-2022/functions.php b/source/wp-content/themes/wporg-main-2022/functions.php
@@ -20,6 +20,8 @@
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
 add_action( 'init', __NAMESPACE__ . '\register_shortcodes' );
 add_filter( 'wp_img_tag_add_loading_attr', __NAMESPACE__ . '\override_lazy_loading', 10, 2 );
+add_filter( 'wporg_block_site_breadcrumbs', __NAMESPACE__ . '\update_site_breadcrumbs' );
+add_filter( 'render_block_core/site-title', __NAMESPACE__ . '\use_parent_page_title', 10, 3 );
 
 /**
  * Enqueue scripts and styles.
@@ -115,6 +117,62 @@ function override_lazy_loading( $value, $image ) {
 	return $value;
 }
 
+/**
+ * Use the page heirarchy to display breadcrumbs.
+ */
+function update_site_breadcrumbs( $breadcrumbs ) {
+	$parent = get_post_parent();
+	if ( ! $parent ) {
+		return $breadcrumbs;
+	}
+
+	$breadcrumbs = array();
+	$breadcrumbs[] = array(
+		'url' => false,
+		'title' => get_the_title(),
+	);
+
+	while ( $parent ) {
+		$breadcrumbs[] = array(
+			'url' => get_permalink( $parent->ID ),
+			'title' => $parent->post_title,
+		);
+		$parent = get_post_parent( $parent );
+	}
+
+	return array_reverse( $breadcrumbs );
+}
+
+/**
+ * Replace the site title & link with the parent page title.
+ *
+ * The About and Download sections are pseudo-individual sites, so when site title
+ * is used there, it should reference the parent page.
+ *
+ * @param string   $block_content The block content.
+ * @param array    $block         The full block, including name and attributes.
+ * @param WP_Block $instance      The block instance.
+ */
+function use_parent_page_title( $block_content, $block, $instance ) {
+	$parent = get_post_parent();
+	if ( ! $parent ) {
+		return $block_content;
+	}
+
+	// Loop up to the first child page, this is the section title.
+	while ( $parent ) {
+		$url = get_permalink( $parent->ID );
+		$title = $parent->post_title;
+		$parent = get_post_parent( $parent );
+	}
+
+	return str_replace(
+		array( home_url(), get_bloginfo( 'name' ) ),
+		array( $url, $title ),
+		$block_content
+	);
+}
+
 /**
  * Prevent Jetpack from looking for a non-existent featured image.
  */

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/_nav-about-details.php b/source/wp-content/themes/wporg-main-2022/patterns/_nav-about-details.php
@@ -0,0 +1,14 @@
+<?php
+// phpcs:disable WordPress.Files.FileName -- Allow underscore for pattern partial.
+/**
+ * Title: Section Nav (About - Details)
+ * Slug: wporg-main-2022/nav-about-details
+ * Inserter: no
+ */
+
+?>
+<!-- wp:wporg/local-navigation-bar {"backgroundColor":"white","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","top":"16px","bottom":"16px"}},"position":{"type":"sticky"},"border":{"top":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"},"right":{},"bottom":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"},"left":{}}},"textColor":"charcoal-1","fontSize":"small"} -->
+<!-- wp:site-title {"level":0,"fontSize":"small"} /-->
+
+<!-- wp:navigation {"ref":16892,"textColor":"blueberry-1","hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
+<!-- /wp:wporg/local-navigation-bar -->
diff --git a/source/wp-content/themes/wporg-main-2022/patterns/_nav-about-people.php b/source/wp-content/themes/wporg-main-2022/patterns/_nav-about-people.php
@@ -0,0 +1,14 @@
+<?php
+// phpcs:disable WordPress.Files.FileName -- Allow underscore for pattern partial.
+/**
+ * Title: Section Nav (About - People)
+ * Slug: wporg-main-2022/nav-about-people
+ * Inserter: no
+ */
+
+?>
+<!-- wp:wporg/local-navigation-bar {"backgroundColor":"white","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","top":"16px","bottom":"16px"}},"position":{"type":"sticky"},"border":{"top":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"},"right":{},"bottom":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"},"left":{}}},"textColor":"charcoal-1","fontSize":"small"} -->
+<!-- wp:site-title {"level":0,"fontSize":"small"} /-->
+
+<!-- wp:navigation {"ref":17028,"textColor":"blueberry-1","hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
+<!-- /wp:wporg/local-navigation-bar -->
diff --git a/source/wp-content/themes/wporg-main-2022/patterns/_nav-about-technology.php b/source/wp-content/themes/wporg-main-2022/patterns/_nav-about-technology.php
@@ -0,0 +1,14 @@
+<?php
+// phpcs:disable WordPress.Files.FileName -- Allow underscore for pattern partial.
+/**
+ * Title: Section Nav (About - Technology)
+ * Slug: wporg-main-2022/nav-about-technology
+ * Inserter: no
+ */
+
+?>
+<!-- wp:wporg/local-navigation-bar {"backgroundColor":"white","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","top":"16px","bottom":"16px"}},"position":{"type":"sticky"},"border":{"top":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"},"right":{},"bottom":{"color":"var:preset|color|light-grey-1","style":"solid","width":"1px"},"left":{}}},"textColor":"charcoal-1","fontSize":"small"} -->
+<!-- wp:site-title {"level":0,"fontSize":"small"} /-->
+
+<!-- wp:navigation {"ref":16421,"textColor":"blueberry-1","hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
+<!-- /wp:wporg/local-navigation-bar -->
diff --git a/source/wp-content/themes/wporg-main-2022/patterns/_nav-download.php b/source/wp-content/themes/wporg-main-2022/patterns/_nav-download.php
@@ -0,0 +1,14 @@
+<?php
+// phpcs:disable WordPress.Files.FileName -- Allow underscore for pattern partial.
+/**
+ * Title: Section Nav (Download)
+ * Slug: wporg-main-2022/nav-download
+ * Inserter: no
+ */
+
+?>
+<!-- wp:wporg/local-navigation-bar {"className":"is-style-brush-stroke","style":{"position":{"type":"sticky"}},"fontSize":"small"} -->
+<!-- wp:site-title {"level":0,"fontSize":"small"} /-->
+
+<!-- wp:navigation {"ref":11576,"hasIcon":false,"layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small"} /-->
+<!-- /wp:wporg/local-navigation-bar -->
diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about-accessibility.php b/source/wp-content/themes/wporg-main-2022/patterns/about-accessibility.php
@@ -6,16 +6,6 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60","top":"16px","bottom":"16px"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:16px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
-<p class="has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:navigation {"ref":16892,"textColor":"blueberry-1","backgroundColor":"white","align":"wide","className":"is-style-dropdown-on-mobile","layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 <h1 class="wp-block-heading" style="margin-bottom:var(--wp--preset--spacing--30)"><?php _e( 'Accessibility', 'wporg' ); ?></h1>

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about-domains.php b/source/wp-content/themes/wporg-main-2022/patterns/about-domains.php
@@ -6,16 +6,6 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60","top":"16px","bottom":"16px"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:16px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
-<p class="has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:navigation {"ref":16892,"textColor":"blueberry-1","backgroundColor":"white","align":"wide","className":"is-style-dropdown-on-mobile","layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 <h1 class="wp-block-heading" style="margin-bottom:var(--wp--preset--spacing--30)"><?php _e( 'Domains', 'wporg' ); ?></h1>

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about-etiquette.php b/source/wp-content/themes/wporg-main-2022/patterns/about-etiquette.php
@@ -6,16 +6,6 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60","top":"16px","bottom":"16px"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:16px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
-<p class="has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:navigation {"ref":17028,"textColor":"blueberry-1","backgroundColor":"white","align":"wide","className":"is-style-dropdown-on-mobile","layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 <h1 class="wp-block-heading" style="margin-bottom:var(--wp--preset--spacing--30)"><?php _e( 'Etiquette', 'wporg' ); ?></h1>

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about-features.php b/source/wp-content/themes/wporg-main-2022/patterns/about-features.php
@@ -6,16 +6,6 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60","top":"16px","bottom":"16px"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:16px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
-<p class="has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:navigation {"ref":16421,"textColor":"blueberry-1","backgroundColor":"white","align":"wide","className":"is-style-dropdown-on-mobile","layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}},"className":"wp-block-heading"} -->
 <h1 class="wp-block-heading" style="margin-bottom:var(--wp--preset--spacing--30)"><?php _e( 'Features', 'wporg' ); ?></h1>

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about-history.php b/source/wp-content/themes/wporg-main-2022/patterns/about-history.php
@@ -6,16 +6,6 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60","top":"16px","bottom":"16px"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:16px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
-<p class="has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:navigation {"ref":16421,"textColor":"blueberry-1","backgroundColor":"white","align":"wide","className":"is-style-dropdown-on-mobile","layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:heading {"level":1} -->
 <h1 class="wp-block-heading"><?php _e( 'History', 'wporg' ); ?></h1>

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about-license.php b/source/wp-content/themes/wporg-main-2022/patterns/about-license.php
@@ -6,16 +6,6 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60","top":"16px","bottom":"16px"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:16px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
-<p class="has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:navigation {"ref":16892,"textColor":"blueberry-1","backgroundColor":"white","align":"wide","className":"is-style-dropdown-on-mobile","layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 <h1 class="wp-block-heading" style="margin-bottom:var(--wp--preset--spacing--30)"><?php _e( 'GNU Public License', 'wporg' ); ?></h1>

diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about-logos.php b/source/wp-content/themes/wporg-main-2022/patterns/about-logos.php
@@ -6,16 +6,6 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60","top":"16px","bottom":"16px"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:16px;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small"} -->
-<p class="has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:navigation {"ref":17028,"textColor":"blueberry-1","backgroundColor":"white","align":"wide","className":"is-style-dropdown-on-mobile","layout":{"type":"flex","justifyContent":"left"},"style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
-<!-- /wp:group --></div>
-<!-- /wp:group -->
-
 <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
 <h1 class="wp-block-heading" style="margin-bottom:var(--wp--preset--spacing--30)"><?php _e( 'Graphics &amp; Logos', 'wporg' ); ?></h1>