Merge pull request #4444 from Automattic/skatepark-query-block-pattern

Skatepark: query loop block pattern

skatepark/assets/theme.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * Breakpoints & Media Queries
  */
@@ -42,6 +43,11 @@
 	color: var(--wp--preset--color--background);
 }
 
+p {
+	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
+	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+}
+
 .wp-block-post-author__content {
 	display: flex;
 	flex-direction: column;
@@ -335,7 +341,7 @@
 	text-indent: 10em;
 }
 
-.is-style-indented-post-excerpt p {
+.is-style-indented-post-excerpt p:first-of-type:not(.wp-block-post-excerpt__more-text) {
 	text-indent: 5em;
 }
 
@@ -441,12 +447,12 @@ a {
 	text-underline-offset: 0.46ex;
 }
 
-.wp-block-post-content p a {
+.wp-block-post-content p a:not(.wp-block-post-excerpt__more-link) {
 	-webkit-text-decoration-line: underline;
 	        text-decoration-line: underline;
 }
 
-.wp-block-post-content p a:hover {
+.wp-block-post-content p a:not(.wp-block-post-excerpt__more-link):hover {
 	text-decoration: none;
 	background-color: var(--wp--custom--color--primary);
 	color: var(--wp--custom--color--background);
@@ -598,4 +604,15 @@ header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-
 	text-underline-offset: 0.46ex;
 }
 
+.wp-block-post-excerpt__more-link {
+	font-weight: 500;
+}
+
+.wp-block-post-excerpt__more-link:after {
+	content: "→";
+	display: inline-block;
+	padding-left: 0.7ch;
+	text-decoration: none;
+}
+
 /*# sourceMappingURL=theme.css.map */

skatepark/block-templates/index.html

@@ -5,12 +5,12 @@
 	<!-- wp:query-title {"type":"archive","align":"wide"} /-->
 	<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide"} -->
 	<div class="wp-block-query alignwide"><!-- wp:post-template -->
-	<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
-	<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:separator {"className":"is-style-wide"} -->
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
+	<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-left:30px"><!-- wp:separator {"className":"is-style-wide"} -->
 	<hr class="wp-block-separator is-style-wide"/>
 	<!-- /wp:separator -->
 	
-	<!-- wp:post-featured-image {"style":{"color":{"duotone":["#000","#B9FB9C"]}}} /-->
+	<!-- wp:post-featured-image {"isLink":true,"style":{"color":{"duotone":["#000","#B9FB9C"]}}} /-->
 	
 	<!-- wp:post-title {"isLink":true,"fontSize":"normal"} /-->
 	

skatepark/child-theme.json

@@ -200,7 +200,7 @@
 			"margin": {
 				"baseline": "15px",
 				"horizontal": "30px",
-				"vertical": "45px"
+				"vertical": "40px"
 			},
 			"separator": {
 				"margin": "calc( 0.5 * var(--wp--custom--margin--vertical) ) auto"

skatepark/inc/block-patterns.php

@@ -18,6 +18,7 @@ if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
 
 		if ( function_exists( 'register_block_pattern' ) ) {
 			$block_patterns = array(
+				'blog-posts',
 				'mixed-media-in-container',
 				'pre-footer',
 				'text-list-with-button',

skatepark/inc/patterns/blog-posts.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Blog posts.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Blog posts', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"wide"} -->
+	<div class="wp-block-query alignwide"><!-- wp:post-template -->
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
+	<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-left:30px"><!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator is-style-wide"/>
+	<!-- /wp:separator -->
+	
+	<!-- wp:post-featured-image {"isLink":true,"style":{"color":{"duotone":["#000","#B9FB9C"]}}} /-->
+	
+	<!-- wp:post-title {"isLink":true,"fontSize":"normal"} /-->
+	
+	<!-- wp:post-excerpt {"moreText":"' . esc_html__( 'Continue reading', 'skatepark' ) . '","className":"is-style-indented-post-excerpt"} /-->
+	
+	<!-- wp:post-date {"style":{"typography":{"fontWeight":"500"}},"fontSize":"tiny"} /--></div>
+	<!-- /wp:group -->
+	<!-- /wp:post-template -->
+	
+	<!-- wp:query-pagination -->
+	<div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /-->
+	
+	<!-- wp:query-pagination-numbers /-->
+	
+	<!-- wp:query-pagination-next /--></div>
+	<!-- /wp:query-pagination --></div>
+	<!-- /wp:query -->',
+);

skatepark/sass/base/_text.scss

@@ -1,4 +1,9 @@
 // Text selection text color
 ::selection {
 	color: var(--wp--preset--color--background);
+}
+
+p {
+	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
+	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
 }

skatepark/sass/block-styles/_indented-paragraph.scss

@@ -1,6 +1,6 @@
 .is-style-indented-paragraph {
 	text-indent: 10em;
 }
-.is-style-indented-post-excerpt p {
+.is-style-indented-post-excerpt p:first-of-type:not(.wp-block-post-excerpt__more-text) {
 	text-indent: 5em;
 }

skatepark/sass/elements/_links.scss

@@ -2,7 +2,7 @@ a {
 	@include text-decoration;
 }
 
-.wp-block-post-content p a {
+.wp-block-post-content p a:not(.wp-block-post-excerpt__more-link) {
 	text-decoration-line: underline;
 	&:hover {
 		text-decoration: none;

skatepark/sass/templates/_index.scss

@@ -15,4 +15,14 @@
 		text-decoration: underline;
 		@include text-decoration;
 	}
+}
+
+.wp-block-post-excerpt__more-link {
+	font-weight: 500;
+	&:after {
+		content: "→";
+		display: inline-block;
+		padding-left: 0.7ch;
+		text-decoration: none;
+	}
 }

skatepark/theme.json

@@ -284,7 +284,7 @@
 			"margin": {
 				"baseline": "15px",
 				"horizontal": "30px",
-				"vertical": "45px"
+				"vertical": "40px"
 			},
 			"paragraph": {
 				"dropcap": {