Blockbase: Add site logo (#4692)

* removed non-gap margins from heading
* Blockbase: Add site logo
* Blockbase: Reduce the default logo size
* Refactored blockbase headers to include all of Quadrat's header design
* Added tagline to mayland blocks
* resized suggested dimensions per reccomendation

Co-authored-by: Jason Crist <jcrist@pbking.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>

blockbase/assets/ponyfill.css

@@ -153,15 +153,48 @@ pre {
 	color: var(--wp--custom--color--tertiary) !important;
 }
 
-.site-header {
-	justify-content: space-between;
+.wp-site-blocks .site-header {
+	justify-content: start;
 	overflow: inherit;
+	padding-top: var(--wp--custom--gap--vertical);
 }
 
-.site-header .wp-block-site-title a {
+.wp-site-blocks .site-header .wp-block-site-title a {
 	text-decoration: none;
 }
 
+.wp-site-blocks .site-header .wp-block-navigation {
+	flex-grow: 1;
+	justify-content: end;
+}
+
+@media (max-width: 599px) {
+	.wp-site-blocks .site-header {
+		gap: 2px;
+	}
+}
+
+@media (max-width: 599px) {
+	.wp-site-blocks .site-header .wp-block-site-logo {
+		flex-basis: 100%;
+		margin-bottom: calc( 2 * var(--wp--custom--gap--vertical));
+		margin-top: var(--wp--custom--gap--vertical);
+		text-align: center;
+	}
+}
+
+.wp-site-blocks .site-header .wp-block-site-logo a > img {
+	height: 64px;
+	width: auto;
+}
+
+@media (max-width: 599px) {
+	.wp-site-blocks .site-header .wp-block-site-tagline {
+		flex-basis: 100%;
+		order: 10;
+	}
+}
+
 :root {
 	--wpadmin-bar--height: 46px;
 }

blockbase/block-template-parts/header.html

@@ -1,6 +1,8 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}},"className":"site-header","layout":{"type":"flex"}} -->
-<div class="wp-block-group site-header" style="padding-top:40px;padding-bottom:40px">
+<!-- wp:group {"className":"site-header","layout":{"type":"flex"}} -->
+<div class="wp-block-group site-header">
+	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
+	<!-- wp:site-tagline {"fontSize":"tiny"} /-->
 	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
 </div>
 <!-- /wp:group -->

blockbase/functions.php

@@ -45,6 +45,17 @@ if ( ! function_exists( 'blockbase_support' ) ) :
 			}
 		);
 
+		// Add support for core custom logo.
+		add_theme_support(
+			'custom-logo',
+			array(
+				'height'      => 192,
+				'width'       => 192,
+				'flex-width'  => true,
+				'flex-height' => true,
+			)
+		);
+
 	}
 	add_action( 'after_setup_theme', 'blockbase_support', 9 );
 endif;

blockbase/sass/base/_header.scss

@@ -1,8 +1,39 @@
-.site-header {
-	justify-content: space-between;
+.wp-site-blocks .site-header {
+	justify-content: start;
 	overflow: inherit;
+	padding-top: var(--wp--custom--gap--vertical);
 
 	.wp-block-site-title a {
 		text-decoration: none;
 	}
-}
+	.wp-block-navigation {
+		flex-grow: 1;
+		justify-content: end;
+	}
+	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
+	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY
+	@include break-small-only() {
+		gap: 2px;
+	}
+	.wp-block-site-logo {
+
+		@include break-small-only(){
+			flex-basis: 100%;
+			margin-bottom: calc( 2 * var(--wp--custom--gap--vertical));
+			margin-top: var(--wp--custom--gap--vertical);
+			text-align: center;
+		}
+
+		a > img {
+			height: 64px;
+			width: auto;
+		}
+	}
+
+	.wp-block-site-tagline {
+		@include break-small-only() {
+			flex-basis: 100%;
+			order: 10;
+		}
+	}
+}

geologist/assets/theme.css

@@ -340,65 +340,6 @@ textarea:focus {
 	outline: 1px dotted currentColor;
 }
 
-.wp-site-blocks {
-	position: relative;
-}
-
-.wp-site-blocks .site-header {
-	overflow: inherit;
-	padding-top: var(--wp--custom--gap--vertical);
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header {
-		padding-top: 0;
-	}
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header {
-		gap: 2px;
-	}
-}
-
-.wp-site-blocks .site-header .wp-block-site-logo {
-	margin-right: var(--wp--custom--gap--horizontal);
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header .wp-block-site-logo {
-		flex-basis: 100%;
-		margin: 45px 0;
-		text-align: center;
-	}
-}
-
-.wp-site-blocks .site-header .wp-block-site-logo a > img {
-	height: 64px;
-	width: auto;
-}
-
-.wp-site-blocks .site-header .wp-block-site-title {
-	margin: 0;
-}
-
-.wp-site-blocks .site-header .wp-block-navigation {
-	margin-left: auto;
-	padding-right: 0;
-}
-
-.wp-site-blocks .site-header .wp-block-site-tagline {
-	margin: 0;
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header .wp-block-site-tagline {
-		padding-left: 0 !important;
-		flex-basis: 100%;
-		order: 10;
-	}
-}
-
 .wp-block-post-featured-image {
 	margin-top: 0;
 }

geologist/block-template-parts/header.html

@@ -2,7 +2,7 @@
 <header class="wp-block-group site-header" style="padding-bottom:90px">
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
-	<!-- wp:site-tagline {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"20px"},"margin":{"right":"auto"}}},"fontSize":"tiny"} /-->
+	<!-- wp:site-tagline {"fontSize":"tiny"} /-->
 	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
 </header>
 <!-- /wp:group -->

geologist/sass/templates/_header.scss

@@ -1,50 +0,0 @@
-.wp-site-blocks {
-	position: relative; // This is needed so that the polygon is stretched across the whole site.
-}
-
-.wp-site-blocks .site-header {
-	overflow: inherit;
-	padding-top: var(--wp--custom--gap--vertical);
-
-	@include break-small-only(){
-		padding-top: 0;
-	}
-
-	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
-	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY
-	@include break-small-only() {
-		gap: 2px;
-	}
-	.wp-block-site-logo {
-		margin-right: var(--wp--custom--gap--horizontal);
-
-		@include break-small-only(){
-			flex-basis: 100%;
-			margin: 45px 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-tagline {
-		margin: 0;
-		@include break-small-only() {
-			padding-left: 0 !important;
-			flex-basis: 100%;
-			order: 10;
-		}
-	}
-}

geologist/sass/theme.scss

@@ -17,7 +17,6 @@
 @import "colors";
 @import "elements/links";
 @import "elements/forms";
-@import "templates/header";
 @import "templates/index";
 @import "templates/meta";
 @import "templates/query";

mayland-blocks/block-template-parts/header.html

@@ -1,7 +1,8 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"32px","bottom":"32px"}}},"className":"site-header","layout":{"type":"flex"}} -->
-<div class="wp-block-group site-header" style="padding-top:32px;padding-bottom:32px">
+<!-- wp:group {"style":{"spacing":{"padding":{"bottom":"32px"}}},"className":"site-header","layout":{"type":"flex"}} -->
+<div class="wp-block-group site-header" style="padding-bottom:32px">
 <!-- wp:site-logo /-->
 <!-- wp:site-title /-->
+<!-- wp:site-tagline {"fontSize":"tiny"} /-->
 <!-- wp:navigation {"orientation":"horizontal","textColor":"foreground-light","itemsJustification":"right","fontSize":"small","isResponsive":true,"__unstableLocation":"primary"} -->
 <!-- /wp:navigation -->
 </div>

quadrat/assets/theme.css

@@ -476,61 +476,6 @@ textarea:focus {
 	position: relative;
 }
 
-.wp-site-blocks .site-header {
-	overflow: inherit;
-	padding-top: var(--wp--custom--gap--vertical);
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header {
-		padding-top: 0;
-	}
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header {
-		gap: 2px;
-	}
-}
-
-.wp-site-blocks .site-header .wp-block-site-logo {
-	margin-right: var(--wp--custom--gap--horizontal);
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header .wp-block-site-logo {
-		flex-basis: 100%;
-		margin: 45px 0;
-		text-align: center;
-	}
-}
-
-.wp-site-blocks .site-header .wp-block-site-logo a > img {
-	height: 64px;
-	width: auto;
-}
-
-.wp-site-blocks .site-header .wp-block-site-title {
-	margin: 0;
-}
-
-.wp-site-blocks .site-header .wp-block-navigation {
-	margin-left: auto;
-	padding-right: 0;
-}
-
-.wp-site-blocks .site-header .wp-block-site-tagline {
-	margin: 0;
-}
-
-@media (max-width: 599px) {
-	.wp-site-blocks .site-header .wp-block-site-tagline {
-		padding-left: 0 !important;
-		flex-basis: 100%;
-		order: 10;
-	}
-}
-
 .wp-site-blocks .site-header:before {
 	content: "";
 	background-color: var(--wp--custom--color--tertiary);

quadrat/block-template-parts/header.html

@@ -2,7 +2,7 @@
 <header class="wp-block-group site-header" style="padding-bottom:170px">
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
-	<!-- wp:site-tagline {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"20px"},"margin":{"right":"auto"}}},"fontSize":"tiny"} /-->
+	<!-- wp:site-tagline {"fontSize":"tiny"} /-->
 	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
 </header>
 <!-- /wp:group -->

quadrat/functions.php

@@ -11,17 +11,6 @@ if ( ! function_exists( 'quadrat_support' ) ) :
 			)
 		);
 
-		// Add support for core custom logo.
-		add_theme_support(
-			'custom-logo',
-			array(
-				'height'      => 35,
-				'width'       => 150,
-				'flex-width'  => true,
-				'flex-height' => true,
-			)
-		);
-
 		// Add support for starter content
 		include get_stylesheet_directory() . '/inc/starter-content.php';
 		add_theme_support(

quadrat/sass/templates/_header.scss

@@ -1,54 +1,6 @@
 .wp-site-blocks {
 	position: relative; // This is needed so that the polygon is stretched across the whole site.
-}
-
-.wp-site-blocks .site-header {
-	overflow: inherit;
-	padding-top: var(--wp--custom--gap--vertical);
-
-	@include break-small-only(){
-		padding-top: 0;
-	}
-
-	// The blockGap is used HORIZONTALLY when the viewport is LARGE (in which case the value defined in theme.json is appropriate)
-	// It needs to be a different value then when the viewport is SMALL and the gap is used VERTICALLY
-	@include break-small-only() {
-		gap: 2px;
-	}
-	.wp-block-site-logo {
-		margin-right: var(--wp--custom--gap--horizontal);
-
-		@include break-small-only(){
-			flex-basis: 100%;
-			margin: 45px 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-tagline {
-		margin: 0;
-		@include break-small-only() {
-			padding-left: 0 !important;
-			flex-basis: 100%;
-			order: 10;
-		}
-	}
-
-	&:before {
+	 .site-header:before {
 		content: "";
 		background-color: var(--wp--custom--color--tertiary);
 		position: absolute;
@@ -67,4 +19,4 @@
 			clip-path: polygon(13vw 0, 100vw 0, 100vw 16vw, 50vw 51vw);
 		}
 	}
-}
+}

skatepark/functions.php

@@ -10,17 +10,6 @@ if ( ! function_exists( 'skatepark_support' ) ) :
 			)
 		);
 
-		// Add support for core custom logo.
-		add_theme_support(
-			'custom-logo',
-			array(
-				'height'      => 35,
-				'width'       => 150,
-				'flex-width'  => true,
-				'flex-height' => true,
-			)
-		);
-
 		//Primary navigation is used on the header and the footer pattern
 		register_nav_menus(
 			array(

videomaker/block-template-parts/header.html

@@ -1,5 +1,6 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"bottom":"40px","top":"40px"}}},"className":"site-header","layout":{"type":"flex"}} -->
 <div class="wp-block-group site-header" style="padding-top:40px;padding-bottom:40px">
+	<!-- wp:site-logo /-->
 	<!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase"}}} /-->
 	<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"textTransform":"uppercase"}}} /-->
 </div>