Quadrat: fix featured images (#4108)

* Revise page and post featured image treatment.

* Simplify post and page headers with featured images.

quadrat/assets/theme.css

@@ -617,63 +617,6 @@ textarea:focus {
 	color: var(--wp--custom--color--foreground);
 }
 
-@media (max-width: 479px) {
-	.post-header {
-		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
-	.post-header::after {
-		content: "";
-		height: 10px;
-		width: 23px;
-		-webkit-mask-image: url(arrow.svg);
-		        mask-image: url(arrow.svg);
-		-webkit-mask-repeat: no-repeat;
-		        mask-repeat: no-repeat;
-		background-color: var(--wp--custom--color--foreground);
-		transform: translateX(-50%);
-		position: absolute;
-		bottom: 1.5rem;
-		left: 50%;
-	}
-	.post-header .wp-block-spacer {
-		display: none;
-	}
-	.post-header .wp-block-post-featured-image {
-		order: -1;
-		height: 100vh;
-	}
-	.post-header .wp-block-post-featured-image img {
-		-o-object-fit: cover;
-		   object-fit: cover;
-		height: 100%;
-		width: 100%;
-	}
-	.single.admin-bar .post-header {
-		min-height: calc( 100vh - 46px);
-	}
-	.single.admin-bar .wp-block-post-featured-image {
-		height: calc( 100vh - 46px);
-	}
-	.single.admin-bar .site-header {
-		top: 46px;
-	}
-	.single.wp-custom-logo .post-header {
-		padding-top: 150px !important;
-	}
-	.single.wp-custom-logo .wp-block-post-featured-image {
-		margin-top: -150px !important;
-	}
-	.single .site-header {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-	}
-}
-
 .wp-block-query .wp-block-post-featured-image {
 	margin-top: calc( var(--wp--custom--margin--vertical) / 2);
 }

quadrat/block-template-parts/page.html

@@ -1,5 +1,19 @@
 <!-- wp:template-part {"slug":"header"} /-->
 
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"20px","bottom":"30px","left":"20px"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-top:30px;padding-right:20px;padding-bottom:30px;padding-left:20px">
+	<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
+	<!-- wp:spacer {"height":30} -->
+	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+	<!-- wp:post-featured-image {"align":"wide"} /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
 <!-- wp:template-part {"slug":"footer"} /-->

quadrat/block-template-parts/single.html

@@ -10,11 +10,16 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"20px","bottom":"60px","left":"20px"}}},"layout":{"inherit":true}} -->
-<div class="wp-block-group" style="padding-top:30px;padding-right:20px;padding-bottom:60px;padding-left:20px"><!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /--></div>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","bottom":"30px"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-top:30px;padding-bottom:30px;">
+	<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
+	<!-- wp:spacer {"height":30} -->
+	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+	<!-- wp:post-featured-image {"align":"wide"} /-->
+</div>
 <!-- /wp:group -->
 
-<!-- wp:post-featured-image {"align":"full"} /-->
 
 <!-- wp:spacer {"height":60} -->
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>

quadrat/page.php

@@ -17,8 +17,7 @@ get_header();
 	// the header
 	get_template_part( 'template-parts/header' );
 
-	// Pages do not include the page title by default, so we just render the post content
-	echo do_blocks( '<!-- wp:post-content {"layout":{"inherit":true}} /-->' );
+	echo gutenberg_block_template_part( 'page' );
 
 	// the footer
 	echo gutenberg_block_template_part( 'footer' );

quadrat/sass/templates/_post-header.scss

@@ -1,68 +0,0 @@
-$admin-bar: 46px;
-
-@include break-mobile-only() {
-	.post-header {
-		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-
-		&::after {
-			content: "";
-			height: 10px;
-			width: 23px;
-			mask-image: url(arrow.svg);
-			mask-repeat: no-repeat;
-			background-color: var(--wp--custom--color--foreground);
-			transform: translateX(-50%);
-			position: absolute;
-			bottom: 1.5rem;
-			left: 50%;
-		}
-
-		.wp-block-spacer {
-			display: none;
-		}
-
-		.wp-block-post-featured-image {
-			order: -1;
-			height: 100vh;
-			img {
-				object-fit: cover;
-				height: 100%;
-				width: 100%;
-			}
-		}
-
-	}
-
-	.single {
-		&.admin-bar {
-			.post-header {
-				min-height: calc( 100vh - #{$admin-bar} );
-			}
-			.wp-block-post-featured-image {
-				height: calc( 100vh - #{$admin-bar} );
-			}
-			.site-header{
-				top: $admin-bar;
-			}
-		}
-
-		&.wp-custom-logo {
-			.post-header {
-				padding-top: 150px !important;
-			}
-			.wp-block-post-featured-image {
-				margin-top: -150px !important;
-			}
-		}
-
-		.site-header{
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-		}
-	}
-}

quadrat/sass/theme.scss

@@ -23,5 +23,4 @@
 @import "templates/header";
 @import "templates/index";
 @import "templates/meta";
-@import "templates/post-header";
 @import "templates/query";