Pixel: Add post list block pattern (#6481)

* add post list pattern

* add post title hover css

* use theme.json to remove post title underline

* Remove extraneous wrapping group.

* add back wrapper.

* Update spacing in post list and use in index template.

* Use spacing preset for padding.

* Simplify post title CSS and use theme.json pseudo states.

* Try lowering the number of posts per page.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

pixel/parts/post-meta.html

@@ -1,12 +1,9 @@
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-	<!-- wp:group {"layout":{"type":"flex"}} -->
-	<div class="wp-block-group">
-		<!-- wp:post-author {"showAvatar":false,"showBio":false,"style":{"typography":{"fontSize":"14px"}}} /-->
-		<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"14px"}}} /-->
-		<!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"14px"}}} /-->
-		<!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"14px"}}} /-->
-	</div>
-	<!-- /wp:group -->
-</div>
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex"}} -->
+<div class="wp-block-group"><!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"14px"}}} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:post-terms {"term":"post_tag","style":{"typography":{"fontSize":"14px","textTransform":"lowercase"}}} /--></div>
+<!-- /wp:group --></div>
 <!-- /wp:group -->

pixel/patterns/post-list.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Title: Posts list
+ * Slug: pixel/post-list
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:query {"query":{"perPage":"3","pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","displayLayout":{"type":"list"},"layout":{"type":"constrained"}} -->
+<main class="wp-block-query"><!-- wp:post-template -->
+<!-- wp:group {"layout":{"type":"constrained"},"style":{"border":{"width":"2px"},"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"borderColor":"primary","className":"pixel-shadow"} -->
+<div class="wp-block-group pixel-shadow has-border-color has-primary-border-color" style="border-width:2px;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:post-date {"style":{"typography":{"textTransform":"uppercase","fontSize":"12px"}}} /-->
+
+<!-- wp:post-title {"isLink":true} /-->
+
+<!-- wp:post-excerpt /-->
+
+<!-- wp:group {"layout":{"type":"flex"}} -->
+<div class="wp-block-group"><!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"14px"}}} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:post-terms {"term":"post_tag","style":{"typography":{"fontSize":"14px","textTransform":"lowercase"}}} /--></div>
+<!-- /wp:group -->
+
+</div><!-- /wp:group -->
+<!-- wp:spacer {"height":"2rem"} -->
+<div style="height:2rem" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+<!-- /wp:post-template -->
+
+<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
+<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 -->

pixel/style.css

@@ -10,15 +10,30 @@ Requires PHP: 5.7
 Version: 0.0.3
 License: GNU General Public License v2 or later
 License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE
-Template: 
+Template:
 Text Domain: pixel
 Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
 */
 
-/* 
+/*
  * Custom class to add shadow to blocks
- * Need this until box shadow support added to Gutenberg here: https://github.com/WordPress/gutenberg/pull/43184 
+ * Need this until box shadow support added to Gutenberg here: https://github.com/WordPress/gutenberg/pull/43184
  */
 .pixel-shadow {
     box-shadow: var(--wp--custom--shadow);
 }
+
+/* Post title styles */
+.wp-block-post-title a {
+	text-underline-offset: .3em;
+	text-decoration-thickness: 2px;
+}
+
+.wp-block-post-title a:hover,
+.wp-block-post-title a:focus {
+	text-decoration-style: dotted;
+}
+
+.wp-block-post-title a:active {
+	text-decoration-style: solid;
+}

pixel/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":"pixel/post-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"} /-->

pixel/theme.json

@@ -271,6 +271,18 @@
                 "typography": {
                     "fontSize": "clamp(1.375rem, 1.2916666666666667rem + 0.4166666666666667vw, 1.625rem)",
                     "fontWeight": "500"
+                },
+                "elements": {
+                    "link": {
+                        "typography": {
+                            "textDecoration": "none"
+                        },
+                        ":hover": {
+                            "typography": {
+                                "textDecoration": "underline"
+                            }
+                        }
+                    }
                 }
             },
             "core/pullquote": {