Quadrat: add custom logo support (rebase) (#3776)

* Add support for basic site logo.

* Move site logo above site title.

* Revise logo position based on designs.

* Revise header CSS to match comps.

* Adjust custom logo size.

* Revise header padding.

* Revise header spacing with and without logo.

quadrat/assets/theme.css

@@ -129,6 +129,10 @@ ul ul {
 	text-decoration: underline;
 }
 
+.wp-block-navigation__mobile-menu-open-button {
+	color: var(--wp--custom--color--primary);
+}
+
 .wp-block-post-comments .reply a {
 	font-size: 1em;
 	line-height: 1.2;
@@ -363,11 +367,45 @@ a:active, a:focus {
 	background: var(--wp--custom--color--secondary);
 }
 
-.site-header .wp-block-group {
-	display: flex;
-	justify-content: space-between;
+.site-header > .wp-block-group {
 	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
 	overflow: inherit;
+	padding: 10px 20px 60px;
+}
+
+@media (min-width: 480px) {
+	.site-header > .wp-block-group {
+		padding: var(--wp--custom--margin--vertical);
+	}
+}
+
+.site-header > .wp-block-group .wp-block-site-logo {
+	margin-right: var(--wp--custom--margin--horizontal);
+}
+
+@media (max-width: 479px) {
+	.site-header > .wp-block-group .wp-block-site-logo {
+		flex-basis: 100%;
+		margin: 20px 0;
+		text-align: center;
+	}
+}
+
+.site-header > .wp-block-group .wp-block-site-logo a > img {
+	height: 64px;
+	width: auto;
+}
+
+.site-header > .wp-block-group .wp-block-site-title {
+	margin: 0;
+}
+
+.site-header > .wp-block-group .wp-block-navigation {
+	margin-left: auto;
+	padding-right: 0;
 }
 
 .site-header .wp-block-site-title a {

quadrat/child-experimental-theme.json

@@ -339,6 +339,13 @@
 			"fontSize": "var(--wp--preset--font-size--normal)",
 			"fontWeight": "400",
 			"lineHeight": "var(--wp--custom--line-height--body)"
+		},
+		"core/site-logo": {
+			"spacing": {
+				"padding": {
+					"left": "35px"
+				}
+			}
 		}
 	}
 }

quadrat/experimental-theme.json

@@ -539,6 +539,13 @@
 			"fontFamily": "var(--wp--preset--font-family--base)",
 			"fontSize": "var(--wp--preset--font-size--normal)",
 			"fontWeight": "400"
+		},
+		"core/site-logo": {
+			"spacing": {
+				"padding": {
+					"left": "35px"
+				}
+			}
 		}
 	}
 }

quadrat/functions.php

@@ -10,8 +10,20 @@ if ( ! function_exists( 'quadrat_support' ) ) :
 			)
 		);
 
+		// Experimental support for adding blocks inside nav menus
 		add_theme_support( 'block-nav-menus' );
 
+		// Add support for core custom logo.
+		add_theme_support(
+			'custom-logo',
+			array(
+				'height'      => 35,
+				'width'       => 150,
+				'flex-width'  => true,
+				'flex-height' => true,
+			)
+		);
+
 		// This theme uses wp_nav_menu() in two locations.
 		register_nav_menus(
 			array(

quadrat/sass/_header.scss

@@ -1,9 +1,39 @@
 .site-header {
-	.wp-block-group {
-		display: flex;
-		justify-content: space-between;
+	> .wp-block-group {
 		align-items: center;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
 		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-only(){
+				flex-basis: 100%;
+				margin: 20px 0;
+				text-align: center;
+			}
+
+			a > img {
+				height: 64px;
+				width: auto;
+			}
+		}
+		
+		.wp-block-site-title {
+			margin: 0;
+		}
+
+		.wp-block-navigation {
+			margin-left: auto;
+			padding-right: 0;
+		}
 	}
 
 	.wp-block-site-title a {

quadrat/sass/blocks/_navigation.scss

@@ -8,3 +8,7 @@
 		text-decoration: underline;
 	}
 }
+
+.wp-block-navigation__mobile-menu-open-button {
+	color: var(--wp--custom--color--primary);
+}

quadrat/template-parts/header.php

@@ -14,7 +14,8 @@ 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:group --><div class="wp-block-group">
+		<!-- wp:site-logo /-->
 		<!-- wp:site-title /-->' .
 		render_navigation_block( 'primary' ) .
 		'</div><!-- /wp:group -->'