Quadrat: fix markup for header template part (#3906)

* fix markup for header template part

* Remove nav links.

* Simplify block markup and CSS for the header.

* Fix margins + padding when logo is present.

* Removed theme attribute from block templates

* added isResponsive flag to navigation on header template part

* simplified header template to eliminate 'double header' elements, add responsive default to navigation block and remove unnecessary verbosity from navigation block

* remove index.html file (that I never should have comitted)

Co-authored-by: Jeff Ong <jonger4@gmail.com>
Co-authored-by: Jason Crist <jcrist@pbking.com>

quadrat/assets/theme.css

@@ -661,48 +661,38 @@ textarea:focus {
 
 .site-header {
 	position: relative;
-}
-
-.site-header .wp-block-group {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: flex-start;
 	overflow: inherit;
-	width: 100%;
 	padding: 10px 20px 60px;
 }
 
 @media (min-width: 480px) {
-	.site-header .wp-block-group {
+	.site-header {
 		padding: var(--wp--custom--margin--vertical);
 	}
 }
 
-.site-header .wp-block-group .wp-block-site-logo {
+.site-header .wp-block-site-logo {
 	margin-right: var(--wp--custom--margin--horizontal);
 }
 
 @media (max-width: 479px) {
-	.site-header .wp-block-group .wp-block-site-logo {
+	.site-header .wp-block-site-logo {
 		flex-basis: 100%;
 		margin: 20px 0;
 		text-align: center;
 	}
 }
 
-.site-header .wp-block-group .wp-block-site-logo a > img {
+.site-header .wp-block-site-logo a > img {
 	height: 64px;
 	width: auto;
 }
 
-.site-header .wp-block-group .wp-block-site-title {
+.site-header .wp-block-site-title {
 	margin: 0;
 }
 
-.site-header .wp-block-group .wp-block-navigation {
+.site-header .wp-block-navigation {
 	margin-left: auto;
 	padding-right: 0;
 }

quadrat/block-template-parts/header.html

@@ -1,11 +1,6 @@
-<!-- wp:group {"className":"site-header","style":{"spacing":{"padding":{"right":"35px","left":"35px"}}}} -->
-	<div class="wp-block-group site-header" style="padding-right:35px;padding-left:35px">
-		<!-- wp:site-title /-->
-		<!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small"} -->
-			<!-- wp:navigation-link {"label":"Home","url":"#"} /-->
-			<!-- wp:navigation-link {"label":"Services","url":"#"} /-->
-			<!-- wp:navigation-link {"label":"Portfolio","url":"#"} /-->
-			<!-- wp:navigation-link {"label":"Contact","url":"#"} /-->
-		<!-- /wp:navigation -->
-	</div>
-<!-- /wp:group -->
+<!-- wp:group {"tagName":"header","className":"site-header"} -->
+<div class="wp-block-group site-header"><!-- wp:site-logo /--><!-- wp:site-title /-->
+
+<!-- wp:navigation {"isResponsive":true} -->
+<!-- /wp:navigation --></div>
+<!-- /wp:group -->

quadrat/block-templates/404.html

@@ -1,5 +1,5 @@
-<!-- wp:template-part {"slug":"header","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:template-part {"slug":"404","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"404"} /-->
 
-<!-- wp:template-part {"slug":"footer","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->

quadrat/block-templates/page.html

@@ -1,6 +1,6 @@
-<!-- wp:template-part {"slug":"header","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"header"} /-->
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:template-part {"slug":"footer","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->
 

quadrat/block-templates/search.html

@@ -1,5 +1,5 @@
-<!-- wp:template-part {"slug":"header","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:template-part {"slug":"search","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"search"} /-->
 
-<!-- wp:template-part {"slug":"footer","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->

quadrat/block-templates/single.html

@@ -1,5 +1,5 @@
-<!-- wp:template-part {"slug":"header","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:template-part {"slug":"single","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"single"} /-->
 
-<!-- wp:template-part {"slug":"footer","theme":"quadrat"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->

quadrat/sass/_header.scss

@@ -1,45 +1,36 @@
 .site-header {
 	position: relative;
-	.wp-block-group {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-start;
-		overflow: inherit;
-		width: 100%;
-		padding: 10px 20px 60px; // TODO: Maybe replace with a responsive custom variable?
+	overflow: inherit;
+	padding: 10px 20px 60px; // TODO: Maybe replace with a responsive custom variable?
 
-		@include break-mobile() {
-			padding: var(--wp--custom--margin--vertical);
-		}
-
-		.wp-block-site-logo {
-			margin-right: var(--wp--custom--margin--horizontal);
+	@include break-mobile() {
+		padding: var(--wp--custom--margin--vertical);
+	}
 
-			@include break-mobile-only(){
-				flex-basis: 100%;
-				margin: 20px 0;
-				text-align: center;
-			}
+	.wp-block-site-logo {
+		margin-right: var(--wp--custom--margin--horizontal);
 
-			a > img {
-				height: 64px;
-				width: auto;
-			}
-		}
-		
-		.wp-block-site-title {
-			margin: 0;
+		@include break-mobile-only(){
+			flex-basis: 100%;
+			margin: 20px 0;
+			text-align: center;
 		}
 
-		.wp-block-navigation {
-			margin-left: auto;
-			padding-right: 0;
+		a > img {
+			height: 64px;
+			width: auto;
 		}
 	}
 	
+	.wp-block-site-title {
+		margin: 0;
+	}
+
+	.wp-block-navigation {
+		margin-left: auto;
+		padding-right: 0;
+	}
+	
 	&:before {
 		content: "";
 		background-color: var(--wp--custom--color--secondary);

quadrat/template-parts/header.php

@@ -11,14 +11,11 @@
 require get_stylesheet_directory() . '/inc/render-navigation-block.php';
 ?>
 
-<header class="site-header" role="banner">
-	<?php
+<?php
 	echo do_blocks(
-		'<!-- wp:group --><div class="wp-block-group">
-		<!-- wp:site-logo /-->
-		<!-- wp:site-title /-->' .
+		'<!-- wp:group {"tagName":"header","className":"site-header"} -->
+		<header class="wp-block-group site-header"><!-- wp:site-logo /--><!-- wp:site-title /-->' .
 		render_navigation_block( 'primary' ) .
-		'</div><!-- /wp:group -->'
+		'</header><!-- /wp:group -->'
 	);
-	?>
-</header>
+?>