Header: Use different templates based on page heirarchy

source/wp-content/themes/wporg-developer-2023/functions.php

@@ -177,6 +177,7 @@
 require_once __DIR__ . '/src/command-github/block.php';
 require_once __DIR__ . '/src/command-title/block.php';
 require_once __DIR__ . '/src/command-subcommand/block.php';
+require_once __DIR__ . '/src/page-title/index.php';
 require_once __DIR__ . '/src/reference-new-updated/block.php';
 require_once __DIR__ . '/src/resource-select/index.php';
 require_once __DIR__ . '/src/search-filters/index.php';

source/wp-content/themes/wporg-developer-2023/inc/block-hooks.php

@@ -8,6 +8,7 @@
 use function DevHub\is_parsed_post_type;
 
 add_filter( 'render_block', __NAMESPACE__ . '\filter_handbook_meta_link_block', 10, 2 );
+add_filter( 'render_block_data', __NAMESPACE__ . '\modify_header_template_part' );
 
 /**
  * Filters the search block and conditionally inserts search filters.
@@ -77,3 +78,32 @@ function filter_handbook_meta_link_block( $block_content, $block ) {
 
 	return $block_content;
 }
+
+/**
+ * Update header template based on current query.
+ *
+ * @param array $parsed_block The block being rendered.
+ *
+ * @return array The updated block.
+ */
+function modify_header_template_part( $parsed_block ) {
+	if (
+		'core/template-part' === $parsed_block['blockName'] &&
+		! empty( $parsed_block['attrs']['slug'] ) &&
+		str_starts_with( $parsed_block['attrs']['slug'], 'header' )
+	) {
+		$template_slug = 'header-third';
+		if (
+			function_exists( 'wporg_is_handbook' ) &&
+			wporg_is_handbook() &&
+			! wporg_is_handbook_landing_page()
+		) {
+			$parsed_block['attrs']['slug'] = $template_slug;
+		} elseif ( 'command' === get_post_type() && is_single() ) {
+			$parsed_block['attrs']['slug'] = $template_slug;
+		} elseif ( is_parsed_post_type() && ! is_search() ) {
+			$parsed_block['attrs']['slug'] = $template_slug;
+		}
+	}
+	return $parsed_block;
+}

source/wp-content/themes/wporg-developer-2023/parts/header-alt.html

@@ -0,0 +1,15 @@
+<!-- wp:wporg/global-header {"style":{"border":{"bottom":{"color":"var:preset|color|white-opacity-15","style":"solid","width":"1px"}}}} /-->
+
+<!-- wp:wporg/local-navigation-bar {"className":"has-display-contents","backgroundColor":"charcoal-2","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}}},"textColor":"white","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:wporg/page-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":"developer"} /-->
+
+<!-- /wp:wporg/local-navigation-bar -->

source/wp-content/themes/wporg-developer-2023/parts/header-third.html

@@ -0,0 +1,28 @@
+<!--
+	This template part is not called directly from any templates, it's swapped out automatically by `modify_header_template_part`.
+	It should be used on "Level 3+" pages, pages with at least 2 ancestors (for example, Home > Handbook home > Article).
+-->
+
+<!-- wp:wporg/global-header {"style":{"border":{"bottom":{"color":"var:preset|color|white-opacity-15","style":"solid","width":"1px"}}}} /-->
+
+<!-- wp:wporg/local-navigation-bar {"className":"has-display-contents","backgroundColor":"charcoal-2","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"},":hover":{"color":{"text":"var:preset|color|white"}}}}},"textColor":"white","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:wporg/page-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":"developer"} /-->
+
+<!-- /wp:wporg/local-navigation-bar -->
+
+<!-- wp:group {"className":"wporg-breadcrumbs","align":"full","style":{"spacing":{"padding":{"top":"18px","bottom":"18px","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wporg-breadcrumbs wp-block-group alignfull has-white-background-color has-background" style="padding-top:18px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:18px;padding-left:var(--wp--preset--spacing--edge-space)">
+
+	<!-- wp:wporg/site-breadcrumbs {"fontSize":"small"} /-->
+
+</div>
+<!-- /wp:group -->

source/wp-content/themes/wporg-developer-2023/parts/header.html

@@ -5,14 +5,5 @@
 	<!-- wp:site-title {"level":0,"fontSize":"small"} /-->
 
 	<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"charcoal-2","overlayTextColor":"white","layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small","menuSlug":"developer"} /-->
-
-<!-- /wp:wporg/local-navigation-bar -->
-
 
-<!-- wp:group {"className":"wporg-breadcrumbs","align":"full","style":{"spacing":{"padding":{"top":"18px","bottom":"18px","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wporg-breadcrumbs wp-block-group alignfull has-white-background-color has-background" style="padding-top:18px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:18px;padding-left:var(--wp--preset--spacing--edge-space)">
-
-	<!-- wp:wporg/site-breadcrumbs {"fontSize":"small"} /-->
-
-</div>
-<!-- /wp:group -->
+<!-- /wp:wporg/local-navigation-bar -->

source/wp-content/themes/wporg-developer-2023/patterns/front-page-header.php

@@ -9,9 +9,7 @@
 
 <!-- wp:wporg/local-navigation-bar {"backgroundColor":"charcoal-2","style":{"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 {"icon":"menu","overlayBackgroundColor":"charcoal-2","overlayTextColor":"white","layout":{"type":"flex","orientation":"horizontal"},"fontSize":"small","menuSlug":"developer"} /-->
 

source/wp-content/themes/wporg-developer-2023/patterns/search-content.php

@@ -13,8 +13,8 @@
 	<!-- wp:group {"className":"align-left","layout":{"type":"constrained","contentSize":"","justifyContent":"left"},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
 	<div class="wp-block-group align-left" style="margin-bottom:var(--wp--preset--spacing--40)">
 
-		<!-- wp:group {"align":"wide","className":"wporg-search-controls","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|20"}}}} -->
-		<div id="wporg-search" class="wp-block-group alignwide wporg-search-controls" style="margin-top:var(--wp--preset--spacing--10);margin-bottom:var(--wp--preset--spacing--20)">
+		<!-- wp:group {"align":"wide","className":"wporg-search-controls","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} -->
+		<div id="wporg-search" class="wp-block-group alignwide wporg-search-controls" style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)">
 
 			<!-- wp:search {"label":"<?php esc_attr_e( 'Search', 'wporg' ); ?>","showLabel":false,"placeholder":"<?php esc_attr_e( 'Search resources', 'wporg' ); ?>","width":232,"widthUnit":"px","buttonText":"<?php esc_attr_e( 'Search', 'wporg' ); ?>","buttonPosition":"button-inside","buttonUseIcon":true,"className":"is-style-secondary-search-control wporg-filtered-search-form"} /-->
 

source/wp-content/themes/wporg-developer-2023/src/page-title/block.json

@@ -0,0 +1,28 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/page-title",
+	"version": "0.1.0",
+	"title": "Page Title",
+	"category": "widgets",
+	"description": "Page Title",
+    "attributes": {
+		"level": {
+			"type": "integer",
+			"default": 1
+		}
+	},
+	"supports": {
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
+	},
+	"textdomain": "wporg",
+	"editorScript": "file:./index.js"
+}

source/wp-content/themes/wporg-developer-2023/src/page-title/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from '../shared/dynamic-edit';
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+} );

source/wp-content/themes/wporg-developer-2023/src/page-title/index.php

@@ -0,0 +1,50 @@
+<?php
+namespace WordPressdotorg\Theme\Developer_2023\Page_Title;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/page-title',
+		array(
+			'render_callback' => __NAMESPACE__ . '\render',
+		)
+	);
+}
+
+/**
+ * Render the block content.
+ *
+ * @return string Returns the block markup.
+ */
+function render( $attributes, $content, $block ) {
+	$tag_name = 'h1';
+	if ( isset( $attributes['level'] ) ) {
+		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
+	}
+
+	$title = get_the_title();
+
+	if ( is_search() ) {
+		$title = __( 'Search results', 'wporg' );
+	} elseif ( is_archive() ) {
+		$title = get_the_archive_title();
+	} elseif ( in_array( get_post_type(), array( 'wp-parser-function', 'wp-parser-method' ) ) ) {
+		$title .= '()';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+	return sprintf(
+		'<%1$s %2$s>%3$s</section>',
+		$tag_name,
+		$wrapper_attributes,
+		$title,
+	);
+}

source/wp-content/themes/wporg-developer-2023/src/style/style.scss

@@ -3,14 +3,14 @@
  * templates or theme.json settings.
  */
 
+body.handbook-landing-page {
+	--wp--custom--wporg-sidebar-container--spacing--margin--top: 100px;
+}
+
 .wporg-breadcrumbs {
 	// If the breadcrumbs are present, the space after them needs to be reduced.
 	// The next content is typically the search field.
 	margin-bottom: calc(var(--wp--preset--spacing--10) * -1);
-
-	@media (max-width: 767px) {
-		display: none !important;
-	}
 }
 
 pre {

source/wp-content/themes/wporg-developer-2023/templates/archive.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
+<!-- wp:template-part {"slug":"header-alt","className":"has-display-contents"} /-->
 
 <!-- wp:template-part {"slug":"search","className":"has-display-contents"} /-->
 

source/wp-content/themes/wporg-developer-2023/templates/page-dashicons.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
+<!-- wp:template-part {"slug":"header-alt","className":"has-display-contents"} /-->
 
 <!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->

source/wp-content/themes/wporg-developer-2023/templates/search.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
+<!-- wp:template-part {"slug":"header-alt","className":"has-display-contents"} /-->
 
 <!-- wp:group {"tagName":"main","layout":{"type":"constrained","justifyContent":"left"},"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}}} -->
 <main class="wp-block-group alignfull" style="padding-left:var(--wp--preset--spacing--edge-space);padding-right:var(--wp--preset--spacing--edge-space)">

source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
+<!-- wp:template-part {"slug":"header-alt","className":"has-display-contents"} /-->
 
 <!-- wp:template-part {"slug":"search-wide","className":"has-display-contents"} /-->