Try/header template part wrapped (#3714)

* Modified site-title styles to match comps

* Added a navigation rendering function to render the navigation block based on a classic data source, wrap the output in an HTML block to be inserted anywhere blocks are do_block()'ed

* Added a header template part that leverages the rendered navigation block markup

* Replaced usage of navigation block template with new template-part

* Added styles for header for proper layout unachievable with blocks.

quadrat/404.php

@@ -15,11 +15,11 @@
 get_header();
 
 	// the header
-	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/header.html' ) );
+	get_template_part( 'template-parts/header' );
 
 	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/404.html' ) );
 
 	// the footer
 	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/footer.html' ) );
 
-get_footer();
+get_footer();

quadrat/child-experimental-theme.json

@@ -154,6 +154,15 @@
 				"lineHeight": "var(--wp--custom--line-height--body)"
 			}
 		},
+		"core/site-title": {
+			"typography": {
+				"fontWeight": 800,
+				"fontSize": "20px"
+			},
+			"color": {
+				"link": "var(--wp--custom--color--primary)"
+			}
+		},
 		"core/button": {
 			"color": {
 				"text": "var(--wp--custom--button--color--text)",

quadrat/experimental-theme.json

@@ -416,11 +416,11 @@
 		},
 		"core/site-title": {
 			"typography": {
-				"fontSize": "60px",
-				"fontWeight": 700
+				"fontSize": "20px",
+				"fontWeight": 800
 			},
 			"color": {
-				"link": "black"
+				"link": "var(--wp--custom--color--primary)"
 			}
 		},
 		"core/navigation": {

quadrat/inc/render-navigation-block.php

@@ -0,0 +1,25 @@
+<?php
+if ( ! function_exists( 'render_navigation_block' ) ) :
+
+	function render_navigation_block( $menu_location ) {
+		if ( ! has_nav_menu( $menu_location ) ) {
+			return;
+		}
+
+		$nav_items = wp_nav_menu(
+			array(
+				'echo'           => false,
+				'theme_location' => $menu_location,
+				'container'      => '',
+				'items_wrap'     => '%3$s',
+				'fallback_cb'    => false,
+			)
+		);
+
+		if ( ! $nav_items ) {
+			return;
+		}
+
+		return '<!-- wp:html -->' . $nav_items . '<!-- /wp:html -->';
+	}
+endif;

quadrat/index.php

@@ -15,7 +15,7 @@
 get_header();
 
 	// the header
-	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/header.html' ) );
+	get_template_part( 'template-parts/header' );
 
 	// the query
 	echo do_blocks( '<!-- wp:post-content {"layout":{"inherit":true}} /-->' );

quadrat/sass/_header.scss

@@ -0,0 +1,7 @@
+.site-header {
+	.wp-block-group {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+} 

quadrat/sass/theme.scss

@@ -1,4 +1,5 @@
 @import "../../blank-canvas-blocks/sass/base/breakpoints"; // Get the mobile-only media query and make it available to this theme's styles
 @import "blocks/media-text";
 @import "blocks/list";
+@import "header";
 @import "utility";

quadrat/search.php

@@ -15,11 +15,11 @@
 get_header();
 
 	// the header
-	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/header.html' ) );
+	get_template_part( 'template-parts/header' );
 
 	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/search.html' ) );
 
 	// the footer
 	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/footer.html' ) );
 
-get_footer();
+get_footer();

quadrat/singular.php

@@ -15,11 +15,11 @@
 get_header();
 
 	// the header
-	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/header.html' ) );
+	get_template_part( 'template-parts/header' );
 
 	echo do_blocks( '<!-- wp:post-content {"layout":{"inherit":true}} /-->' );
 
 	// the footer
 	echo do_blocks( file_get_contents( get_stylesheet_directory() . '/templates/footer.html' ) );
 
-get_footer();
+get_footer();

quadrat/template-parts/header.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Displays the header.
+ * Needed until we have a consistent mechanism to render a navigation between FSE and classic menus.
+ *
+ * @package Quadrat
+ * @since 1.0.0
+ *
+ */
+
+require get_stylesheet_directory() . '/inc/render-navigation-block.php';
+?>
+
+<header class="site-header" role="banner">
+	<?php
+	echo do_blocks(
+		'<!-- wp:group {"style":{"spacing":{"padding":{"right":"35px","left":"35px"}}}} --><div class="wp-block-group" style="padding-right:35px;padding-left:35px">
+		<!-- wp:site-title /-->' .
+		render_navigation_block( 'primary' ) .
+		'</div><!-- /wp:group -->'
+	);
+	?>
+</header>