Adding styling and layout for query lists pages index, archive, search (#6599)

decibel/patterns/post-list.php

@@ -0,0 +1,61 @@
+<?php
+/**
+ * Title: Posts list
+ * Slug: decibel/posts-list
+ * Inserter: no
+ */
+?>
+
+<!-- wp:query {"tagName":"main"} -->
+<main class="wp-block-query">
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"var:style|root|padding-right","bottom":"0","left":"var:style|root|padding-left"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--style--root--padding-right);padding-bottom:0;padding-left:var(--wp--style--root--padding-left)">
+
+<!-- wp:post-template -->
+
+<!-- wp:columns -->
+<div class="wp-block-columns">
+
+	<!-- wp:column {"width":"215px"} -->
+	<div class="wp-block-column" style="flex-basis:215px">
+		<!-- wp:post-date {"isLink":true} /-->
+		<!-- wp:post-terms {"term":"category"} /-->
+		<!-- wp:post-terms {"term": "post_tag"} /-->
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column">
+		<!-- wp:post-title {"isLink":true,"fontSize":"x-large"} /-->
+		<!-- wp:post-author {"showAvatar":false,"showBio":false} /-->
+		<!-- wp:post-excerpt /-->
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"215px"} -->
+	<div class="wp-block-column" style="flex-basis:215px">
+		<!-- wp:post-featured-image {"isLink":true} /-->
+	</div>
+	<!-- /wp:column -->
+
+</div>
+<!-- /wp:columns -->
+
+<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}}} -->
+<hr class="wp-block-separator has-alpha-channel-opacity" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"/>
+<!-- /wp:separator -->
+
+<!-- /wp:post-template -->
+
+<!-- wp:query-pagination {"align":"wide", "paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
+	<!-- wp:query-pagination-previous /-->
+	<!-- wp:query-pagination-numbers /-->
+	<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination -->
+
+</div>
+<!-- /wp:group -->
+
+</main>
+<!-- /wp:query -->

decibel/templates/archive.html

@@ -1,33 +1,13 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
-<main class="wp-block-query">
-<!-- wp:query-title {"type":"archive","style":{"spacing":{"margin":{"bottom":"100px"}}}} /-->
-<!-- wp:post-template -->
-<!-- wp:group -->
-<div class="wp-block-group">
-	<!-- wp:post-title {"isLink":true} /-->
-	<!-- wp:post-featured-image {"isLink":true} /-->
-	<!-- wp:post-excerpt /-->
-	<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
-	<!-- wp:spacer {"height":40} -->
-	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"var:style|root|padding-right","bottom":"var:preset|spacing|60","left":"var:style|root|padding-left"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group" style="padding-top:0;padding-right:var(--wp--style--root--padding-right);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--style--root--padding-left)">
+
+<!-- wp:query-title {"type":"archive"} /-->
+
 </div>
 <!-- /wp:group -->
-<!-- /wp:post-template -->
-<!-- wp:group {"layout":{"inherit":true}} -->
-	<div class="wp-block-group">
-	<!-- wp:query-pagination -->
-		<!-- wp:query-pagination-previous /-->
-
-		<!-- wp:query-pagination-numbers /-->
 
-		<!-- wp:query-pagination-next /-->
-	<!-- /wp:query-pagination -->
-	</div>
-	<!-- /wp:group -->
-</main>
-<!-- /wp:query -->
+<!-- wp:pattern {"slug":"decibel/posts-list"} /-->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

decibel/templates/index.html

@@ -1,33 +1,5 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:query {"tagName":"main","layout":{"inherit":true}} -->
-<main class="wp-block-query">
-	<!-- wp:post-template -->
-	<!-- wp:group -->
-	<div class="wp-block-group">
-		<!-- wp:post-title {"isLink":true} /-->
-		<!-- wp:post-featured-image {"isLink":true} /-->
-		<!-- wp:post-excerpt /-->
-		<!-- wp:template-part {"slug":"post-meta"} /-->
-		<!-- wp:spacer {"height":40} -->
-		<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-	</div>
-	<!-- /wp:group -->
-	<!-- /wp:post-template -->
-	<!-- wp:group {"layout":{"inherit":true}} -->
-		<div class="wp-block-group">
-		<!-- wp:query-pagination -->
-			<!-- wp:query-pagination-previous /-->
+<!-- wp:pattern {"slug":"decibel/posts-list"} /-->
 	
-			<!-- wp:query-pagination-numbers /-->
-	
-			<!-- wp:query-pagination-next /-->
-		<!-- /wp:query-pagination -->
-		</div>
-		<!-- /wp:group -->
-	</main>
-	<!-- /wp:query -->
-	
-	<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
-	
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

decibel/templates/search.html

@@ -10,38 +10,6 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:query {"layout":{"inherit":true}} -->
-<main class="wp-block-query">
-	<!-- wp:post-template -->
-	<!-- wp:group -->
-	<div class="wp-block-group">
-		<!-- wp:post-title {"isLink":true} /-->
-
-		<!-- wp:post-featured-image {"isLink":true} /-->
-
-		<!-- wp:post-excerpt /-->
-
-		<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
-
-		<!-- wp:spacer {"height":40} -->
-		<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-	</div>
-	<!-- /wp:group -->
-	<!-- /wp:post-template -->
-
-	<!-- wp:group {"layout":{"inherit":true}} -->
-	<div class="wp-block-group">
-		<!-- wp:query-pagination -->
-		<!-- wp:query-pagination-previous /-->
-
-		<!-- wp:query-pagination-numbers /-->
-
-		<!-- wp:query-pagination-next /-->
-		<!-- /wp:query-pagination -->
-	</div>
-	<!-- /wp:group -->
-</main>
-<!-- /wp:query -->
+<!-- wp:pattern {"slug":"decibel/posts-list"} /-->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

decibel/theme.json

@@ -233,6 +233,11 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/post-author": {
+				"typography": {
+					"textTransform": "uppercase"
+				}
+			},
 			"core/post-content": {
 				"elements": {
 					"link": {
@@ -243,11 +248,13 @@
 				}
 			},
 			"core/post-date": {
-				"color": {
-					"text": "var(--wp--preset--color--foreground)"
-				},
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--small)"
+					"textTransform": "uppercase"
+				}
+			},
+			"core/post-terms": {
+				"typography": {
+					"textTransform": "uppercase"
 				}
 			},
 			"core/post-title": {
@@ -275,6 +282,14 @@
 					"fontStyle": "italic"
 				}
 			},
+			"core/query-pagination": {
+				"typography": {
+					"fontFamily": "rubik",
+					"fontSize": "var(--wp--preset--font-size--large)",
+					"fontWeight": "500",
+					"textTransform": "uppercase"
+				}
+			},
 			"core/quote": {
 				"border": {
 					"color": "var(--wp--preset--color--primary)",