From d3f2f2c577ac72ac56905afb4962a8f28e9fdf44 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 27 Apr 2021 16:57:54 -0400
Subject: [PATCH] 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                         |  4 ++--
 quadrat/assets/theme.css                |  6 ++++++
 quadrat/child-experimental-theme.json   |  9 +++++++++
 quadrat/experimental-theme.json         |  6 +++---
 quadrat/inc/render-navigation-block.php | 25 +++++++++++++++++++++++
 quadrat/index.php                       |  2 +-
 quadrat/sass/_header.scss               |  7 +++++++
 quadrat/sass/theme.scss                 |  1 +
 quadrat/search.php                      |  4 ++--
 quadrat/singular.php                    |  4 ++--
 quadrat/template-parts/header.php       | 23 +++++++++++++++++++++
 quadrat/templates/header.html           | 27 -------------------------
 quadrat/templates/navigation.html       |  0
 13 files changed, 81 insertions(+), 37 deletions(-)
 create mode 100644 quadrat/inc/render-navigation-block.php
 create mode 100644 quadrat/sass/_header.scss
 create mode 100644 quadrat/template-parts/header.php
 delete mode 100644 quadrat/templates/header.html
 delete mode 100644 quadrat/templates/navigation.html

diff --git a/quadrat/404.php b/quadrat/404.php
index 9a9326c75c..cc5b64e309 100644
--- a/quadrat/404.php
+++ b/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();
\ No newline at end of file
+get_footer();
diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css
index 450da60485..04f916b3f8 100644
--- a/quadrat/assets/theme.css
+++ b/quadrat/assets/theme.css
@@ -39,6 +39,12 @@ ul ul {
 	list-style-type: disc;
 }
 
+.site-header .wp-block-group {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .image-no-margin {
 	margin: 0;
 }
diff --git a/quadrat/child-experimental-theme.json b/quadrat/child-experimental-theme.json
index d690a7b16d..da8d51c934 100644
--- a/quadrat/child-experimental-theme.json
+++ b/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)",
diff --git a/quadrat/experimental-theme.json b/quadrat/experimental-theme.json
index 3bc211d183..e40aa65e7a 100644
--- a/quadrat/experimental-theme.json
+++ b/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": {
diff --git a/quadrat/inc/render-navigation-block.php b/quadrat/inc/render-navigation-block.php
new file mode 100644
index 0000000000..f083d37a73
--- /dev/null
+++ b/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;
diff --git a/quadrat/index.php b/quadrat/index.php
index bf19f33b7f..cdf001832b 100644
--- a/quadrat/index.php
+++ b/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}} /-->' );
diff --git a/quadrat/sass/_header.scss b/quadrat/sass/_header.scss
new file mode 100644
index 0000000000..f226f68fe2
--- /dev/null
+++ b/quadrat/sass/_header.scss
@@ -0,0 +1,7 @@
+.site-header {
+	.wp-block-group {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+} 
\ No newline at end of file
diff --git a/quadrat/sass/theme.scss b/quadrat/sass/theme.scss
index d9a94b6596..4f0409887a 100644
--- a/quadrat/sass/theme.scss
+++ b/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";
diff --git a/quadrat/search.php b/quadrat/search.php
index 219b4db044..9e0435d21c 100644
--- a/quadrat/search.php
+++ b/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();
\ No newline at end of file
+get_footer();
diff --git a/quadrat/singular.php b/quadrat/singular.php
index dd0b65a5d6..be82a114cc 100644
--- a/quadrat/singular.php
+++ b/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();
\ No newline at end of file
+get_footer();
diff --git a/quadrat/template-parts/header.php b/quadrat/template-parts/header.php
new file mode 100644
index 0000000000..8ebcebfb34
--- /dev/null
+++ b/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>
diff --git a/quadrat/templates/header.html b/quadrat/templates/header.html
deleted file mode 100644
index 5ed4f80cd0..0000000000
--- a/quadrat/templates/header.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- wp:spacer {"height":14} -->
-<div style="height:14px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
-<!-- wp:columns {"verticalAlignment":null, "align":"full"} -->
-<div class="wp-block-columns alignfull"><!-- wp:column {"verticalAlignment":"center"} -->
-<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title /--></div>
-<!-- /wp:column -->
-
-<!-- wp:column {"verticalAlignment":"center"} -->
-<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
-<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"About","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"Blog","url":"#"} /-->
-
-<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
-
-<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","className":"is-style-logos-only"} -->
-<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"instagram.com/wordpress","service":"instagram"} /-->
-
-<!-- wp:social-link {"url":"twitter.com/wordpress","service":"twitter"} /--></ul>
-<!-- /wp:social-links -->
-<!-- /wp:navigation --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->
\ No newline at end of file
diff --git a/quadrat/templates/navigation.html b/quadrat/templates/navigation.html
deleted file mode 100644
index e69de29bb2..0000000000