added tagline to header templates (#4072)

* added tagline to header templates
* Refactored blockbase (and quadrat) breakpoints to use 'small' instead of 'mobile' to follow navigation blocks's breakpoint usage
Co-authored-by: Jason Crist <jcrist@pbking.com>

blockbase/assets/ponyfill.css

@@ -480,7 +480,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	grid-template-columns: 1fr 2fr 1fr;
 }
 
-@media (max-width: 479px) {
+@media (max-width: 599px) {
 	.wp-block-query-pagination {
 		grid-template-areas: "prev next";
 		grid-template-columns: 1fr 1fr;
@@ -506,7 +506,7 @@ p.has-drop-cap:not(:focus):first-letter {
 	text-decoration: underline;
 }
 
-@media (max-width: 479px) {
+@media (max-width: 599px) {
 	.wp-block-query-pagination .wp-block-query-pagination-numbers {
 		display: none;
 	}

blockbase/sass/base/_breakpoints.scss

@@ -1,8 +1,8 @@
 @import '~@wordpress/base-styles/breakpoints';
 @import '~@wordpress/base-styles/mixins';
 
- @mixin break-mobile-only() {
-	@media (max-width: #{ ($break-mobile - 1) }) {
+@mixin break-small-only() {
+	@media (max-width: #{ ($break-small - 1) }) {
 		@content;
 	}
 }

blockbase/sass/blocks/_query-pagination.scss

@@ -5,7 +5,7 @@
 	grid-template-areas: "prev numbers next";
 	grid-template-columns: 1fr 2fr 1fr;
 
-	@include break-mobile-only(){
+	@include break-small-only(){
 		grid-template-areas: "prev next";
 		grid-template-columns: 1fr 1fr;
 	}
@@ -26,7 +26,7 @@
 		.current {
 			text-decoration: underline;
 		}
-		@include break-mobile-only(){
+		@include break-small-only(){
 			display: none;
 		}
 	}

quadrat/assets/theme.css

@@ -30,7 +30,7 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-@media (max-width: 479px) {
+@media (max-width: 599px) {
 	.headlines-pattern {
 		padding-top: 50px !important;
 		padding-bottom: 50px !important;
@@ -242,7 +242,7 @@ ul ul {
 	list-style-type: disc;
 }
 
-@media (max-width: 479px) {
+@media (max-width: 599px) {
 	.wp-block-media-text:not(.has-background) .wp-block-media-text__content {
 		padding: 0;
 	}
@@ -631,7 +631,7 @@ textarea:focus {
 	padding: 10px var(--wp--custom--post-content--padding--left) 60px;
 }
 
-@media (min-width: 480px) {
+@media (min-width: 600px) {
 	.site-header {
 		padding: var(--wp--custom--post-content--padding--left);
 	}
@@ -641,7 +641,7 @@ textarea:focus {
 	margin-right: var(--wp--custom--margin--horizontal);
 }
 
-@media (max-width: 479px) {
+@media (max-width: 599px) {
 	.site-header .wp-block-site-logo {
 		flex-basis: 100%;
 		margin: 20px 0;
@@ -663,6 +663,18 @@ textarea:focus {
 	padding-right: 0;
 }
 
+.site-header .wp-block-site-tagline {
+	margin: 0;
+}
+
+@media (max-width: 599px) {
+	.site-header .wp-block-site-tagline {
+		padding-left: 0 !important;
+		flex-basis: 100%;
+		order: 10;
+	}
+}
+
 .site-header:before {
 	content: "";
 	background-color: var(--wp--custom--color--secondary);
@@ -674,14 +686,14 @@ textarea:focus {
 	z-index: -1;
 }
 
-@media (max-width: 479px) {
+@media (max-width: 599px) {
 	.site-header:before {
 		-webkit-clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
 		        clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
 	}
 }
 
-@media (min-width: 480px) {
+@media (min-width: 600px) {
 	.site-header:before {
 		-webkit-clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
 		        clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
@@ -709,7 +721,7 @@ textarea:focus {
 	justify-content: center;
 }
 
-@media (max-width: 479px) {
+@media (max-width: 599px) {
 	.post-meta {
 		padding-top: 0 !important;
 		margin-bottom: -20px;

quadrat/block-template-parts/header.html

@@ -1,6 +1,8 @@
 <!-- wp:group {"tagName":"header","className":"site-header"} -->
-<header class="wp-block-group site-header"><!-- wp:site-title /-->
-
-<!-- wp:navigation {"isResponsive":true,"__unstableLocation":"primary"} -->
-<!-- /wp:navigation --></header>
+<header class="wp-block-group site-header">
+	<!-- 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:navigation {"isResponsive":true,"__unstableLocation":"primary"} /-->
+</header>
 <!-- /wp:group -->

quadrat/sass/block-patterns/_headlines.scss

@@ -1,5 +1,5 @@
 .headlines-pattern {
-	@include break-mobile-only(){
+	@include break-small-only(){
 		padding-top: 50px !important;
 		padding-bottom: 50px !important;
 	}

quadrat/sass/blocks/_media-text.scss

@@ -1,5 +1,5 @@
 .wp-block-media-text:not(.has-background) .wp-block-media-text__content {
-	@include break-mobile-only(){
+	@include break-small-only(){
 		padding: 0;
 	}
 }

quadrat/sass/templates/_header.scss

@@ -3,14 +3,14 @@
 	overflow: inherit;
 	padding: 10px var(--wp--custom--post-content--padding--left) 60px; // TODO: Maybe replace with a responsive custom variable?
 
-	@include break-mobile() {
+	@include break-small() {
 		padding: var(--wp--custom--post-content--padding--left);
 	}
 
 	.wp-block-site-logo {
 		margin-right: var(--wp--custom--margin--horizontal);
 
-		@include break-mobile-only(){
+		@include break-small-only(){
 			flex-basis: 100%;
 			margin: 20px 0;
 			text-align: center;
@@ -31,6 +31,15 @@
 		padding-right: 0;
 	}
 
+	.wp-block-site-tagline {
+		margin: 0;
+		@include break-small-only() {
+			padding-left: 0 !important;
+			flex-basis: 100%;
+			order: 10;
+		}
+	}
+
 	&:before {
 		content: "";
 		background-color: var(--wp--custom--color--secondary);
@@ -40,10 +49,10 @@
 		left: 0;
 		right: 0;
 		z-index: -1;
-		@include break-mobile-only() {
+		@include break-small-only() {
 			clip-path: polygon(0 0, 100vw 0, 100vw 50vw, 52vw 83vw, 0 20vw);
 		}
-		@include break-mobile() {
+		@include break-small() {
 			clip-path: polygon(0 0, 100vw 0, 100vw 37vw, 52vw 70vw, 0 5vw);
 		}
 		@include break-large() {

quadrat/sass/templates/_meta.scss

@@ -1,7 +1,7 @@
 .post-meta {
 	align-items: center;
 	justify-content: center;
-	@include break-mobile-only() {
+	@include break-small-only() {
 		padding-top: 0 !important;
 		margin-bottom: -20px;
 	}