Club: post list layout refinement (#6258)

* Club: starting to implement the post list of the index template

* Club: implementing post list as a pattern

* Club: implement archives page

* club: post date uppercase

* Club: changing 'read more' for 'Read it'

* Club: post title font weight

* Club: post list pattern: makink post items have the same height

* Club: reimplement pattern as columns instead of rows

* Club: fixing post list layour

* Club: small layout fix

* Club: post list titles as h3

* Club: Archive template quuery title block to h2

* Club: tweaking h2 line heigth

* Club: remove min-content for read-more button

* Update club/style.css

Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com>

Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com>

club/patterns/post-list.php

@@ -9,18 +9,32 @@
 
 <!-- wp:query {"queryId":27,"query":{"perPage":"10","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"tagName":"main","displayLayout":{"type":"list","columns":3},"className":"club-post-list-pattern","layout":{"inherit":false}} -->
 <main class="wp-block-query club-post-list-pattern"><!-- wp:post-template -->
-<!-- wp:group {"style":{"border":{"bottom":{"color":"var:preset|color|foreground","width":"1px"}},"spacing":{"blockGap":"30px","padding":{"top":"30px","right":"0px","bottom":"30px","left":"0px"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
-<div class="wp-block-group" style="border-bottom-color:var(--wp--preset--color--foreground);border-bottom-width:1px;padding-top:30px;padding-right:0px;padding-bottom:30px;padding-left:0px"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
-<div class="wp-block-group"><!-- wp:post-featured-image {"isLink":true,"width":"90px","height":"60px"} /-->
-
-<!-- wp:post-title {"isLink":true} /--></div>
-<!-- /wp:group -->
-
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
-<div class="wp-block-group"><!-- wp:post-date {"format":"M j","isLink":true} /-->
-
-<!-- wp:read-more {"content":"<?php echo esc_html__( 'Read It', 'club' ); ?>"} /--></div>
-<!-- /wp:group --></div>
+<!-- wp:group {"style":{"border":{"bottom":{"color":"var:preset|color|foreground"}},"spacing":{"padding":{"top":"1em","bottom":"1em"}}}} -->
+<div class="wp-block-group" style="border-bottom-color:var(--wp--preset--color--foreground);padding-top:1em;padding-bottom:1em"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<div class="wp-block-columns" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"","layout":{"inherit":false}} -->
+<div class="wp-block-column"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"90px"} -->
+<div class="wp-block-column" style="flex-basis:90px"><!-- wp:post-featured-image {"isLink":true,"width":"90px","height":"60px"} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:post-title {"level":3,"isLink":true} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":""} -->
+<div class="wp-block-column"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"","className":"post-date-container"} -->
+<div class="wp-block-column post-date-container"><!-- wp:post-date {"format":"M j","isLink":true} /--></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":""} -->
+<div class="wp-block-column"><!-- wp:read-more {"content":"<?php echo esc_html__( 'Read It', 'club' ); ?>"} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
 <!-- /wp:group -->
 <!-- /wp:post-template -->
 

club/style.css

@@ -105,14 +105,55 @@ GNU General Public License for more details.
 	border: 1px solid var(--wp--preset--color--foreground);
 }
 
-/* This is necesary to make the post list item the same height when the post has or lacks a featured image */
+/* 
+ * Styles for the post list pattern
+ */
+
 .club-post-list-pattern .wp-block-post-title {
+	/* This is necesary to make the post list item the same height when the post has or lacks a featured image */
 	min-height: 60px; /* 60px is the height of the featured image used */
     display: flex;
     justify-content: center;
     flex-direction: column;
 }
 
+.club-post-list-pattern .wp-block-post-date {
+	white-space: nowrap;
+}
+
+.club-post-list-pattern .wp-block-read-more {
+	text-align: center;
+	word-break: keep-all;
+	width: 100%;
+	white-space: nowrap;
+}
+
+.club-post-list-pattern .wp-block-post  .post-date-container {
+	flex-basis: min-content;
+	flex-grow: unset;
+}
+
+.club-post-list-pattern .wp-block-columns {
+	height: 100%;
+}
+
+.club-post-list-pattern .wp-block-column {
+	align-items: center;
+	display: flex;
+}
+
+.club-post-list-pattern .wp-block-post > .wp-block-group > .wp-block-columns > .wp-block-column:first-child {
+	flex-grow: 2;
+}
+
+.club-post-list-pattern .wp-block-post > .wp-block-group > .wp-block-columns > .wp-block-column:last-child > .wp-block-columns {
+	width: 100%;
+}
+
+.club-post-list-pattern .wp-block-column:empty {
+	display: none;
+}
+
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or

club/templates/archive.html

@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:query-title {"type":"archive"} /-->
+<!-- wp:query-title {"type":"archive","level":2} /-->
 
 <!-- wp:pattern {"slug":"club/posts-list"} /-->
 

club/theme.json

@@ -382,7 +382,8 @@
             },
             "core/read-more": {
                 "typography": {
-                    "textTransform": "uppercase"
+                    "textTransform": "uppercase",
+                    "lineHeight": "1em"
                 },
                 "border": {
                     "color": "var(--wp--preset--color--foreground)",
@@ -392,8 +393,8 @@
                 },
                 "spacing": {
 					"padding": {
-						"top": "calc(0.05em + 2px)",
-						"bottom": "calc(0.05em + 2px)",
+						"top": "calc(0.5em + 2px)",
+						"bottom": "calc(0.5em + 2px)",
 						"left": "calc(1.333em + 2px)",
 						"right": "calc(1.333em + 2px)"
 					}
@@ -440,7 +441,8 @@
             },
             "h2": {
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--x-large)"
+                    "fontSize": "var(--wp--preset--font-size--x-large)",
+                    "lineHeight": "0.8"
                 }
             },
             "h3": {