Merge pull request #4471 from Automattic/skatepark-logo-alignment

Skatepark: Logo alignment

skatepark/assets/theme.css

@@ -548,9 +548,9 @@ header.wp-block-template-part {
 }
 
 header.wp-block-template-part > .wp-block-group {
-	align-items: flex-end;
+	gap: 0;
 	justify-content: space-between;
-	flex-wrap: wrap-reverse;
+	align-items: flex-start;
 }
 
 header.wp-block-template-part > .wp-block-group > * {
@@ -562,6 +562,13 @@ header.wp-block-template-part > .wp-block-group > * > * {
 	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
 }
 
+@media (max-width: 599px) {
+	header.wp-block-template-part > .wp-block-group > * > * {
+		margin-top: calc( 0.125 * var(--wp--custom--margin--vertical));
+		margin-bottom: calc( 0.125 * var(--wp--custom--margin--vertical));
+	}
+}
+
 header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
 	margin-right: calc( -1 * ( 8px + 0.25em ));
 }
@@ -570,6 +577,44 @@ header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-
 	padding: 0;
 }
 
+header.wp-block-template-part .site-brand {
+	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
+	display: grid;
+	grid-column-gap: var(--wp--custom--margin--horizontal);
+	grid-template-areas: "logo title" "logo tagline";
+	grid-template-columns: auto 1fr;
+}
+
+@media (max-width: 599px) {
+	header.wp-block-template-part .site-brand {
+		grid-template-areas: "logo" "title" "tagline";
+	}
+}
+
+header.wp-block-template-part .site-brand .wp-block-site-logo {
+	grid-area: logo;
+	margin: 0;
+	max-width: 120px;
+	align-self: center;
+	justify-self: flex-end;
+}
+
+@media (max-width: 599px) {
+	header.wp-block-template-part .site-brand .wp-block-site-logo {
+		margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+	}
+}
+
+header.wp-block-template-part .site-brand .wp-block-site-title {
+	grid-area: title;
+	margin: 0 0 0.5em;
+}
+
+header.wp-block-template-part .site-brand .wp-block-site-tagline {
+	grid-area: tagline;
+	margin: 0;
+}
+
 @media (max-width: 599px) {
 	.nav-links {
 		display: flex;

skatepark/block-template-parts/header.html

@@ -1,7 +1,7 @@
 <!-- wp:group { "layout":{"type":"flex"}} -->
 <div class="wp-block-group">
-<!-- wp:group -->
-<div class="wp-block-group">
+<!-- wp:group {"className":"site-brand"} -->
+<div class="wp-block-group site-brand">
 <!-- wp:site-logo /-->
 <!-- wp:site-title /-->
 <!-- wp:site-tagline {"fontSize":"small","style":{"typography":{"fontWeight":"500"}}} /--></div>

skatepark/sass/templates/_header.scss

@@ -4,14 +4,18 @@ header.wp-block-template-part {
 	width: 100%;
 	
 	> .wp-block-group {
-		align-items: flex-end; // Needed until theme.json layout lets me specify
+		gap: 0;
 		justify-content: space-between; // Apply a cluster (flex?) layout
-		flex-wrap: wrap-reverse;
+		align-items: flex-start;
 		> * {
 			flex-grow: 1; // Needed to maintain alignment when the containers stack
 			> * { // Apply a stack layout (page 69 of the every-layout.dev PDF) 
-				margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
-				margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+				margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
+				margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+				@include break-small-only(){
+					margin-top: calc( 0.125 * var(--wp--custom--margin--vertical) );
+					margin-bottom: calc( 0.125 * var(--wp--custom--margin--vertical) );
+				}
 			}
 		}
 
@@ -22,6 +26,40 @@ header.wp-block-template-part {
 			}
 		}
 	}
+
+	.site-brand {
+		margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
+		display: grid;
+		grid-column-gap: var(--wp--custom--margin--horizontal);
+		grid-template-areas: 
+			"logo title"
+			"logo tagline";
+		grid-template-columns: auto 1fr;
+		@include break-small-only(){
+			grid-template-areas: 
+				"logo"
+				"title"
+				"tagline";
+		}
+		.wp-block-site-logo {
+			grid-area: logo;
+			margin: 0;
+			max-width: 120px;
+			align-self: center;
+			justify-self: flex-end;
+			@include break-small-only(){
+				margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+			}
+		}
+		.wp-block-site-title {
+			grid-area: title;
+			margin: 0 0 0.5em;
+		}
+		.wp-block-site-tagline {
+			grid-area: tagline;
+			margin: 0;
+		}
+	}
 }
 
 @include break-small-only(){