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>