Quadrat: Fix post title spacing (#4720)

* Quadrat: remove title spacers from templates

* Quadrat: add margin to post-title

* Quadrat: increase post title bottom margin

* Quadrat: increase post title margin again

* Quadrat: add GB comment for context

* Quadrat: reduce spacing above featured image

* Quadrat: increase featured image spacing slightly

* Quadrat: add spacing below featured image

* Remove :empty title styling

* Move post title spacing to theme.json

* Tweak featured image spacing

* Remove title spacer from index template

* Remove title spacer from page template

* Reduce post title spacing

* Move post title spacing from theme.json to css

* Add spacer back to index template

* Reduce featured image spacing

* Move CSS to the templates where possible

* Even out spacing without using negative margins.

* Apply the same changes to Geologist

* Apply the same changes to Zoologist

* Apply the same changes to Payton

* Geologist & Zoologist: Move the post-title margin to the block so that the no title posts line up

* Add left/right padding back to Payton page title

Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Kjell Reigstad <kjell@kjellr.com>

geologist/assets/theme.css

@@ -338,4 +338,10 @@ textarea:focus {
 	margin-top: 0;
 }
 
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
+}
+
 /*# sourceMappingURL=theme.css.map */

geologist/block-templates/index.html

@@ -6,7 +6,7 @@
 	<!-- wp:post-template -->
 		<!-- wp:group {"layout":{"inherit":true}} -->
 		<div class="wp-block-group">
-		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"left"} /-->
+		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"left", "style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 		<!-- wp:post-featured-image {"isLink":true} /-->
 		<!-- wp:post-excerpt /-->
 		<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->

geologist/block-templates/page.html

@@ -1,16 +1,12 @@
 <!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","bottom":"30px","left":"20px"}}},"layout":{"inherit":true}} -->
-<div class="wp-block-group" style="padding-right:20px;padding-bottom:30px;padding-left:20px">
-	<!-- wp:post-title {"textAlign":"left","level":1} /-->
-	<!-- wp:post-featured-image /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+	<!-- wp:post-title {"textAlign":"left","level":1,"style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
+	<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 </div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":60} -->
-<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 	<!-- wp:post-content {"layout":{"inherit":true}} /-->

geologist/block-templates/single.html

@@ -3,10 +3,10 @@
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"layout":{"inherit":true}} -->
+	<!-- wp:group -->
 	<div class="wp-block-group">
-		<!-- wp:post-title {"textAlign":"left","level":1} /-->
-		<!-- wp:post-featured-image /-->
+		<!-- wp:post-title {"textAlign":"left","level":1,"style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
+		<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 	</div>
 	<!-- /wp:group -->
 

geologist/sass/templates/_index.scss

@@ -1,3 +1,9 @@
 .wp-block-post-featured-image {
 	margin-top: 0;
-}
+}
+
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
+} 

payton/assets/theme.css

@@ -73,22 +73,21 @@
 	margin-left: 20%;
 }
 
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
+}
+
 .post-meta {
 	align-items: center;
 	justify-content: center;
 }
 
-.wp-block-group .post-meta {
+.post-meta.wp-block-group {
 	gap: 0;
 }
 
-@media (max-width: 599px) {
-	.post-meta {
-		padding-top: 0 !important;
-		margin-bottom: -20px;
-	}
-}
-
 .post-meta > *:not(:first-child):before {
 	color: var(--wp--custom--color--foreground);
 	content: "·";
@@ -96,4 +95,11 @@
 	margin-right: var(--wp--custom--gap--baseline);
 }
 
+@media (max-width: 599px) {
+	.post-meta {
+		padding-top: 0 !important;
+		margin-bottom: -20px;
+	}
+}
+
 /*# sourceMappingURL=theme.css.map */

payton/block-templates/index.html

@@ -16,10 +16,10 @@
 		<!-- wp:group -->
 		<div class="wp-block-group">
 		<!-- wp:post-date {"isLink":true,"textAlign":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"center"} /-->
+		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"center", "style":{"spacing":{"margin":{"bottom":"var(--wp--style--block-gap)"}}}} /-->
 		<!-- wp:group {"layout":{"inherit":true}} -->
 		<div class="wp-block-group">
-		<!-- wp:post-featured-image {"isLink":true} /-->
+		<!-- wp:post-featured-image {"isLink":true, "style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 		<!-- wp:post-excerpt /-->
 		</div>
 		<!-- /wp:group -->

payton/block-templates/page.html

@@ -1,13 +1,13 @@
 <!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","left":"20px"}}},"layout":{"inherit":true}} -->
-<div class="wp-block-group" style="padding-right:20px;padding-left:20px">
+<!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","left":"20px"},"margin":{"bottom":"var(--wp--style--block-gap)"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-right:20px;padding-left:20px;margin-bottom:var(--wp--style--block-gap)">
 	<!-- wp:separator {"color":"tertiary"} -->
 	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color"/>
 	<!-- /wp:separator -->
 
-	<!-- wp:post-title {"textAlign":"center","level":1,"style":{"spacing":{"margin":{"top":"8vh","bottom":"0"}}}} /-->
-	<!-- wp:post-featured-image /-->
+  <!-- wp:post-title {"textAlign":"center","level":1,"style":{"spacing":{"margin":{"top":"8vh","bottom":"0"}}}} /-->
+	<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 </div>
 <!-- /wp:group -->
 

payton/block-templates/single.html

@@ -18,18 +18,13 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:group {"layout":{"inherit":true}} -->
-	<div class="wp-block-group">
+	<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}},"layout":{"inherit":true}} -->
+	<div class="wp-block-group" style="margin-bottom:calc(2 * var(--wp--style--block-gap))">
 		<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
-		<!-- wp:post-featured-image {"align":"wide"} /-->
+		<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 	</div>
 	<!-- /wp:group -->
 
-
-	<!-- wp:spacer {"height":30} -->
-	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
-
 	<!-- wp:post-content {"layout":{"inherit":true}} /-->
 
 	<!-- wp:spacer {"height":150} -->

payton/sass/templates/_index.scss

@@ -0,0 +1,5 @@
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
+} 

payton/sass/theme.scss

@@ -2,4 +2,5 @@
 @import "../../blockbase/sass/base/mixins";
 @import "blocks/separator";
 @import "blocks/post-navigation-link";
+@import "templates/index";
 @import "templates/meta";

quadrat/assets/theme.css

@@ -580,6 +580,12 @@ textarea:focus {
 	margin-top: 0;
 }
 
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
+}
+
 .post-meta {
 	align-items: center;
 	justify-content: center;

quadrat/block-templates/index.html

@@ -7,7 +7,7 @@
 		<!-- wp:group -->
 		<div class="wp-block-group">
 		<!-- wp:post-date {"isLink":true,"textAlign":"center","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"center"} /-->
+		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"center", "style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 		<!-- wp:group {"layout":{"inherit":true}} -->
 		<div class="wp-block-group">
 		<!-- wp:post-featured-image {"isLink":true} /-->

quadrat/block-templates/page.html

@@ -1,19 +1,12 @@
 <!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-	<!-- wp:spacer {"height":27} -->
-	<div style="height:27px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
+<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="margin-bottom:calc(2 * var(--wp--style--block-gap))">
 	<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
-	<!-- wp:post-featured-image {"align":"wide"} /-->
+	<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 </div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":60} -->
-<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 	<!-- wp:post-content {"layout":{"inherit":true}} /-->

quadrat/block-templates/single.html

@@ -10,18 +10,13 @@
 	</div>
 	<!-- /wp:group -->
 
-	<!-- wp:group {"layout":{"inherit":true}} -->
-	<div class="wp-block-group">
+	<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}},"layout":{"inherit":true}} -->
+	<div class="wp-block-group" style="margin-bottom:calc(2 * var(--wp--style--block-gap))">
 		<!-- wp:post-title {"textAlign":"center","level":1,"align":"wide"} /-->
-		<!-- wp:post-featured-image {"align":"wide"} /-->
+		<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 	</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:spacer {"height":150} -->

quadrat/sass/templates/_index.scss

@@ -1,3 +1,9 @@
 .wp-block-post-featured-image {
 	margin-top: 0;
+}
+
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
 }

zoologist/assets/theme.css

@@ -339,4 +339,10 @@ textarea:focus {
 	margin-top: 0;
 }
 
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
+}
+
 /*# sourceMappingURL=theme.css.map */

zoologist/block-templates/index.html

@@ -6,7 +6,7 @@
 	<!-- wp:post-template -->
 		<!-- wp:group {"layout":{"inherit":true}} -->
 		<div class="wp-block-group">
-		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"left"} /-->
+		<!-- wp:post-title {"isLink":true, "level": 3, "textAlign":"left", "style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 		<!-- wp:post-featured-image {"isLink":true} /-->
 		<!-- wp:post-excerpt /-->
 		<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->

zoologist/block-templates/page.html

@@ -1,16 +1,12 @@
 <!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:group {"style":{"spacing":{"padding":{"right":"20px","bottom":"30px","left":"20px"}}},"layout":{"inherit":true}} -->
-<div class="wp-block-group" style="padding-right:20px;padding-bottom:30px;padding-left:20px">
-	<!-- wp:post-title {"textAlign":"left","level":1} /-->
-	<!-- wp:post-featured-image /-->
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+	<!-- wp:post-title {"textAlign":"left","level":1,"style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
+	<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 </div>
 <!-- /wp:group -->
 
-<!-- wp:spacer {"height":60} -->
-<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->
-
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 	<!-- wp:post-content {"layout":{"inherit":true}} /-->

zoologist/block-templates/single.html

@@ -5,8 +5,8 @@
 
 	<!-- wp:group {"layout":{"inherit":true}} -->
 	<div class="wp-block-group">
-		<!-- wp:post-title {"textAlign":"left","level":1} /-->
-		<!-- wp:post-featured-image {"align":"wide"} /-->
+		<!-- wp:post-title {"textAlign":"left","level":1,"style":{"spacing":{"margin":{"bottom":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
+		<!-- wp:post-featured-image {"align":"wide","style":{"spacing":{"margin":{"top":"calc(2 * var(--wp--style--block-gap))"}}}} /-->
 	</div>
 	<!-- /wp:group -->
 

zoologist/sass/templates/_index.scss

@@ -1,3 +1,9 @@
 .wp-block-post-featured-image {
 	margin-top: 0;
+}
+
+/* Add some extra space if there's no post title present. */
+.wp-block-post-date + .wp-block-group > .wp-block-post-featured-image,
+.wp-block-post-date + .wp-block-group > .wp-block-post-excerpt {
+	margin-top: calc(2 * var( --wp--style--block-gap ));
 }