Merge pull request #4396 from Automattic/skatepark-full-width-image-p…

…attern

Skatepark: full width image pattern

skatepark/child-theme.json

@@ -151,7 +151,8 @@
 				}
 			},
 			"layout": {
-				"contentSize": "684px"
+				"contentSize": "684px",
+				"wideSize": "1194px"
 			},
 			"line-height": {
 				"body": 1.6
@@ -231,6 +232,11 @@
 					"fontFamily": "var(--wp--preset--font-family--red-hat-display)"
 				}
 			},
+			"core/separator": {
+				"border": {
+					"width": "0 0 3px 0"
+				}
+			},
 			"core/site-title": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--medium)",

skatepark/functions.php

@@ -51,3 +51,8 @@ function skatepark_scripts() {
  * Block Patterns.
  */
 require get_stylesheet_directory() . '/inc/block-patterns.php';
+
+/**
+ * Block Styles.
+ */
+require get_stylesheet_directory() . '/inc/block-styles.php';

skatepark/inc/block-patterns.php

@@ -19,7 +19,8 @@ function skatepark_register_block_patterns() {
 		if ( function_exists( 'register_block_pattern' ) ) {
 			$block_patterns = array(
 				'pre-footer',
-				'text-list-with-button'
+				'text-list-with-button',
+				'full-width-image-with-aside-caption',
 			);
 
 			foreach ( $block_patterns as $block_pattern ) {

skatepark/inc/block-styles.php

@@ -23,6 +23,15 @@ function skatepark_register_block_styles() {
 					'style_handle' => 'skatepark-heading-border',
 				)
 			);
+
+			register_block_style(
+				'core/image',
+				array(
+					'name'         => 'skatepark-aside-caption',
+					'label'        => __( 'Aside caption', 'skatepark' ),
+					'style_handle' => 'skatepark-aside-caption',
+				)
+			);
 		}
 	}
 endif;

skatepark/inc/patterns/full-width-image-with-aside-caption.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * Full width image with aside caption.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Full width image with aside caption', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:image {"align":"full","sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000","#BFF5A5"]},"border":{"radius":"0px"}},"className":"is-style-skatepark-aside-caption"} -->
+	<figure class="wp-block-image alignfull size-large is-style-skatepark-aside-caption" style="border-radius:0px"><img src="https://skateparkdemo.files.wordpress.com/2021/08/stocksnap_5otfjyvyse.jpg" alt="' . esc_attr__( "A skateboarder does a grab trick in a bowl-shaped skate park. In the background is a watching crowd, palm trees, and the ocean.", 'skatepark' ) . '"/><figcaption>' . esc_html__( "Learn the basics of skating along with a group of your peers. More advanced at skating? Our skateboarding coaches will work with you 1:1 to advance your technique.", 'skatepark' ) . '</figcaption></figure>
+	<!-- /wp:image -->',
+);

skatepark/sass/block-styles/_image-caption.scss

@@ -0,0 +1,25 @@
+.is-style-skatepark-aside-caption {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+
+	img {
+		justify-self: center;
+	}
+
+	figcaption {
+		align-self: flex-end;
+		border-top: 3px solid var(--wp--preset--color--primary);
+		font-size: var(--wp--preset--font-size--small);
+		margin-bottom: 0;
+		margin-top: 20px;
+		padding-top: 20px;
+		max-width: 455px;
+		text-align: left;
+	}
+
+	&.alignfull figcaption {
+		margin-left: var(--wp--custom--post-content--padding--left);
+		margin-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ), var(--wp--custom--post-content--padding--left) ) );
+	}
+}

skatepark/sass/theme.scss

@@ -4,6 +4,7 @@
 @import "blocks/buttons";
 @import "blocks/search";
 @import "block-patterns/pre-footer";
+@import "block-styles/image-caption";
 @import "elements/headings";
 @import "elements/links";
 @import "templates/header";

skatepark/theme.json

@@ -238,7 +238,8 @@
 				}
 			},
 			"layout": {
-				"contentSize": "684px"
+				"contentSize": "684px",
+				"wideSize": "1194px"
 			},
 			"list": {
 				"spacing": {
@@ -471,7 +472,7 @@
 				"border": {
 					"color": "currentColor",
 					"style": "solid",
-					"width": "0 0 1px 0"
+					"width": "0 0 3px 0"
 				}
 			},
 			"core/site-title": {