Club: Templates: Search, Category, Tag (#6236)

* 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/patterns/post-list.php

@@ -7,34 +7,36 @@
 
 ?>
 
-<!-- wp:query {"queryId":27,"query":{"perPage":"10","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"list","columns":3},"layout":{"inherit":false}} -->
-<div class="wp-block-query"><!-- wp:post-template -->
-<!-- wp:group {"style":{"border":{"bottom":{"color":"var:preset|color|foreground","width":"1px"}},"spacing":{"blockGap":"0px","padding":{"top":"0px","right":"0px","bottom":"0px","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:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1em","bottom":"1em","right":"1em"}}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
-<div class="wp-block-group" style="padding-top:1em;padding-right:1em;padding-bottom:1em"><!-- wp:post-featured-image {"isLink":true,"width":"90px","height":"60px"} /-->
+<!-- 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 {"style":{"spacing":{"padding":{"top":"1em","bottom":"1em"}}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
-<div class="wp-block-group" style="padding-top:1em;padding-bottom:1em"><!-- wp:post-date {"format":"M j","isLink":true} /-->
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
+<div class="wp-block-group"><!-- wp:post-date {"format":"M j","isLink":true} /-->
 
-<!-- wp:read-more /--></div>
+<!-- wp:read-more {"content":"<?php echo esc_html__( 'Read It', 'club' ); ?>"} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
 <!-- /wp:post-template -->
 
+<!-- wp:paragraph {"placeholder":"<?php echo esc_html__( 'Add text or blocks that will display when the query returns no results.', 'club' ); ?>"} -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
 <!-- wp:query-pagination -->
 <!-- wp:query-pagination-previous /-->
 
 <!-- wp:query-pagination-numbers /-->
 
 <!-- wp:query-pagination-next /-->
-<!-- /wp:query-pagination -->
-
-<!-- wp:query-no-results -->
-<!-- wp:paragraph {"placeholder":"<?php echo esc_html__( 'Add text or blocks that will display when the query returns no results.', 'club' ); ?>"} -->
-<p></p>
-<!-- /wp:paragraph -->
-<!-- /wp:query-no-results --></div>
+<!-- /wp:query-pagination --></main>
 <!-- /wp:query -->

club/style.css

@@ -105,6 +105,14 @@ 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 */
+.club-post-list-pattern .wp-block-post-title {
+	min-height: 60px; /* 60px is the height of the featured image used */
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or

club/templates/archive.html

@@ -1,33 +1,7 @@
 <!-- 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 -->
-</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-title {"type":"archive"} /-->
 
-		<!-- wp:query-pagination-numbers /-->
-
-		<!-- wp:query-pagination-next /-->
-	<!-- /wp:query-pagination -->
-	</div>
-	<!-- /wp:group -->
-</main>
-<!-- /wp:query -->
+<!-- wp:pattern {"slug":"club/posts-list"} /-->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

club/theme.json

@@ -287,7 +287,8 @@
                     "text": "var(--wp--preset--color--foreground)"
                 },
                 "typography": {
-                    "fontSize": "var(--wp--preset--font-size--small)"
+                    "fontSize": "var(--wp--preset--font-size--small)",
+                    "textTransform": "uppercase"
                 }
             },
             "core/post-title": {
@@ -299,7 +300,8 @@
                 "typography": {
                     "fontSize": "var(--wp--preset--font-size--large)",
                     "lineHeight": "1.125",
-                    "textDecoration": "underline solid 3px"
+                    "textDecoration": "underline solid 3px",
+                    "fontWeight": "400"
                 }
             },
             "core/pullquote": {
@@ -336,6 +338,11 @@
                     "fontStyle": "normal"
                 }
             },
+            "core/query-title": {
+                "typography": {
+                    "textTransform": "uppercase"
+                }
+            },
             "core/search": {
                 "typography": {
                     "fontSize": "var(--wp--preset--font-size--medium)",

create-a-theme-checklist.js

@@ -15,9 +15,9 @@ if ( ! theme ) {
  *
  * Alternatively, you can replace `PUT YOUR ACCESS TOKEN HERE` with the actual access token value.
  */
-const octokit = new Octokit({
+const octokit = new Octokit( {
 	auth: process.env.THEME_GITHUB_TOKEN || `PUT YOUR ACCESS TOKEN HERE`,
-});
+} );
 
 function sleep( ms ) {
 	return new Promise( ( resolve ) => {

rainfall/patterns/media-text.php

@@ -26,4 +26,4 @@
 <!-- /wp:image --></div></div>
 <!-- /wp:cover --></div>
 <!-- /wp:column --></div>
-<!-- /wp:columns -->
+<!-- /wp:columns -->