Remote posts grid pattern (#5533)

* added posts grid pattern

* test phpcs

* test

* forced size of image

* move post date uppercase to theme.json

* make image a link

* change category of block pattern

* tighten spacings

* we don't need to make these blocks have text transform anymore since its done in the theme.json

Co-authored-by: Ben Dwyer <ben@scruffian.com>

remote/functions.php

@@ -163,6 +163,3 @@ add_action( 'wp_head', 'remote_preload_webfonts' );
  * Block Patterns.
  */
 require get_template_directory() . '/inc/block-patterns.php';
-
-
-

remote/inc/block-patterns.php

@@ -42,9 +42,10 @@ function remote_register_block_patterns() {
 
 	$block_patterns = array(
 		'hero-text',
-		'posts-list',
-		'hidden-search-form',
 		'hidden-404-content',
+		'hidden-search-form',
+		'posts-grid',
+		'posts-list',
 	);
 
 	/**
@@ -66,3 +67,5 @@ function remote_register_block_patterns() {
 	}
 }
 add_action( 'init', 'remote_register_block_patterns', 9 );
+
+

remote/inc/patterns/posts-grid.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Posts grid.
+ *
+ * @package Remote
+ */
+
+return array(
+	'title'      => __( 'Posts grid', 'remote' ),
+	'categories' => array( 'query' ),
+	'blockTypes' => array( 'core/query' ),
+	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
+	<div class="wp-block-group alignfull"><!-- wp:query {"queryId":0,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null},"tagName":"main","displayLayout":{"type":"flex","columns":2},"align":"wide"} -->
+	<main class="wp-block-query alignwide"><!-- wp:post-template -->
+	<!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator is-style-wide"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:spacer {"height":"60px"} -->
+	<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+	
+	<!-- wp:post-featured-image {"isLink":true,"width":"100%","height":"220px","style":{"spacing":{"margin":{"top":"0px","bottom":"30px"}}}} /-->
+	
+	<!-- wp:post-date {"format":"M j","fontSize":"small"} /-->
+	
+	<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0.3em","bottom":"20px"}},"typography":{"lineHeight":"1.17"}},"fontSize":"medium"} /-->
+	<!-- /wp:post-template -->
+	
+	<!-- wp:spacer {"height":"32px"} -->
+	<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+	
+	<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
+	<!-- wp:query-pagination-previous /-->
+	
+	<!-- wp:query-pagination-next /-->
+	<!-- /wp:query-pagination --></main>
+	<!-- /wp:query --></div>
+	<!-- /wp:group -->',
+);
+
+

remote/inc/patterns/posts-list.php

@@ -11,22 +11,22 @@ return array(
     <!-- wp:separator {"className":"is-style-wide"} -->
     <hr class="wp-block-separator is-style-wide"/>
     <!-- /wp:separator -->
-    
+
     <!-- wp:columns {"style":{"spacing":{"padding":{"top":"1em"}}}} -->
     <div class="wp-block-columns" style="padding-top:1em"><!-- wp:column {"verticalAlignment":"top","width":"10%"} -->
-    <div class="wp-block-column is-vertically-aligned-top" style="flex-basis:10%"><!-- wp:post-date {"format":"M j","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /--></div>
+    <div class="wp-block-column is-vertically-aligned-top" style="flex-basis:10%"><!-- wp:post-date {"format":"M j","fontSize":"small"} /--></div>
     <!-- /wp:column -->
-    
+
     <!-- wp:column {"verticalAlignment":"center","width":""} -->
     <div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontSize":"clamp(3rem, 6vw, 4rem)"}}} /--></div>
     <!-- /wp:column --></div>
     <!-- /wp:columns -->
     <!-- /wp:post-template -->
-    
+
     <!-- wp:spacer {"height":"32px"} -->
     <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
     <!-- /wp:spacer -->
-    
+
     <!-- wp:query-pagination -->
     <!-- wp:query-pagination-previous /-->
     <!-- wp:query-pagination-next /-->

remote/templates/page.html

@@ -16,9 +16,9 @@
 
 		<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"1em","bottom":"2em"}}}} -->
 		<div class="wp-block-columns alignwide" style="padding-top:1em;padding-bottom:2em;"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
-			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"><!-- wp:post-date {"format":"M j","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /--></div>
+			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"><!-- wp:post-date {"format":"M j","fontSize":"small"} /--></div>
 			<!-- /wp:column -->
-		
+
 			<!-- wp:column {"verticalAlignment":"center","width":""} -->
 			<div class="wp-block-column is-vertically-aligned-center"><!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}},"typography":{"fontSize":"clamp(3rem, 6vw, 4rem)","lineHeight":"1.17"}}} /--></div>
 		<!-- /wp:column --></div>
@@ -30,7 +30,7 @@
 		<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":"10%","style":{"spacing":{"padding":{"top":"1.2em"}}}} -->
 			<div class="wp-block-column is-vertically-aligned-top" style="padding-top:1.2em;flex-basis:10%"></div>
 			<!-- /wp:column -->
-		
+
 			<!-- wp:column {"verticalAlignment":"center","width":"652px"} -->
 			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:652px"><!-- wp:post-content /--></div>
 			<!-- /wp:column --></div>

remote/theme.json

@@ -98,6 +98,11 @@
 					"fontWeight": "400"
 				}
 			},
+			"core/post-date": {
+				"typography": {
+					"textTransform": "uppercase"
+				}
+			},
 			"core/separator": {
 				"border": {
 					"color": "var(--wp--preset--color--primary)"