Merge pull request #4190 from Automattic/fix/remove-bottom-spacing

Quadrat: Remove bottom space

blockbase/assets/ponyfill.css

@@ -96,7 +96,31 @@ img {
 }
 
 h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background {
-	padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--vertical);
+	padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
+}
+
+:root {
+	--wpadmin-bar--height: 46px;
+}
+
+.wp-site-blocks {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.site-footer-container {
+	margin-top: auto;
+}
+
+@media (min-width: 600px) {
+	body.admin-bar {
+		--wpadmin-bar--height: 32px;
+	}
+}
+
+body.admin-bar .wp-site-blocks {
+	min-height: calc( 100vh - var(--wpadmin-bar--height));
 }
 
 ::selection {
@@ -366,7 +390,7 @@ p.has-drop-cap:not(:focus):first-letter {
 }
 
 p.has-background {
-	padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--vertical);
+	padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
 }
 
 .wp-block-post-author__name {

blockbase/block-templates/404.html

@@ -15,4 +15,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

blockbase/block-templates/header-footer-only.html

@@ -7,4 +7,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

blockbase/block-templates/index.html

@@ -28,4 +28,4 @@
 </main>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

blockbase/block-templates/search.html

@@ -21,4 +21,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

blockbase/block-templates/singular.html

@@ -18,4 +18,4 @@
 <div class="wp-block-group"><!-- wp:post-comments /--></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

blockbase/sass/base/_layout.scss

@@ -0,0 +1,23 @@
+:root {
+	--wpadmin-bar--height: 46px;
+}
+
+.wp-site-blocks {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.site-footer-container {
+	margin-top: auto;
+}
+
+body.admin-bar {
+	@include break-small() {
+		--wpadmin-bar--height: 32px;
+	}
+
+	.wp-site-blocks {
+		min-height: calc( 100vh - var(--wpadmin-bar--height) );
+	}
+}

blockbase/sass/base/_style.scss

@@ -8,5 +8,6 @@
 
 @import "alignment";
 @import "header";
+@import "layout";
 @import "text";
 @import "utility";

mayland-blocks/assets/theme.css

@@ -27,6 +27,10 @@ body {
 	}
 }
 
+.site-footer {
+	margin-top: auto;
+}
+
 /* Adjust heading letter spacing. */
 h1, h2, h3 {
 	letter-spacing: -0.015em;

mayland-blocks/sass/theme.scss

@@ -28,6 +28,10 @@ body {
 	}
 }
 
+.site-footer {
+	margin-top: auto;
+}
+
 /* Adjust heading letter spacing. */
 
 h1, h2, h3 {

quadrat/assets/theme.css

@@ -630,8 +630,11 @@ textarea:focus {
 	z-index: -1;
 }
 
-.site-header {
+.wp-site-blocks {
 	position: relative;
+}
+
+.site-header {
 	overflow: inherit;
 	padding: 10px var(--wp--custom--post-content--padding--left) 60px;
 }
@@ -684,7 +687,7 @@ textarea:focus {
 	content: "";
 	background-color: var(--wp--custom--color--secondary);
 	position: absolute;
-	height: 100vw;
+	bottom: 0;
 	top: 0;
 	left: 0;
 	right: 0;

quadrat/block-templates/404.html

@@ -15,4 +15,4 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

quadrat/block-templates/front-page.html

@@ -6,4 +6,4 @@
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

quadrat/block-templates/index.html

@@ -19,4 +19,4 @@
 </main>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

quadrat/block-templates/page.html

@@ -16,4 +16,4 @@
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

quadrat/block-templates/search.html

@@ -19,4 +19,4 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

quadrat/block-templates/single.html

@@ -57,4 +57,4 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->

quadrat/sass/templates/_header.scss

@@ -1,5 +1,8 @@
+.wp-site-blocks {
+	position: relative; // This is needed so that the polygon is stretched across the whole site.
+}
+
 .site-header {
-	position: relative;
 	overflow: inherit;
 	padding: 10px var(--wp--custom--post-content--padding--left) 60px; // TODO: Maybe replace with a responsive custom variable?
 
@@ -44,7 +47,7 @@
 		content: "";
 		background-color: var(--wp--custom--color--secondary);
 		position: absolute;
-		height: 100vw;
+		bottom: 0;
 		top: 0;
 		left: 0;
 		right: 0;

seedlet-blocks/block-templates/index.html

@@ -18,4 +18,4 @@
 </div>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

seedlet-blocks/block-templates/singular.html

@@ -37,4 +37,4 @@
 <!-- /wp:columns --></div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true}} /-->
+<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->