created block style, changed approach to use caption instead of columns

skatepark/assets/theme.css

@@ -177,6 +177,24 @@
 	--wp--custom--button--spacing--padding--bottom: 0.5em;
 }
 
+.is-style-skatepark-aside-caption figcaption {
+	display: flex;
+	justify-content: flex-end;
+	margin: 20px auto 0;
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
+	max-width: calc( var(--wp--custom--layout--wide-size) + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right));
+}
+
+.is-style-skatepark-aside-caption figcaption strong {
+	padding-top: 20px;
+	max-width: 455px;
+	text-align: left;
+	border-top: 3px solid var(--wp--preset--color--primary);
+	font-size: var(--wp--preset--font-size--small);
+	font-weight: normal;
+}
+
 h1.is-style-skatepark-heading-border, h2.is-style-skatepark-heading-border, h3.is-style-skatepark-heading-border, h4.is-style-skatepark-heading-border, h5.is-style-skatepark-heading-border, h6.is-style-skatepark-heading-border {
 	display: inline-block;
 	border-top: 2px solid var(--wp--custom--color--primary);

skatepark/child-theme.json

@@ -151,7 +151,8 @@
 				}
 			},
 			"layout": {
-				"contentSize": "684px"
+				"contentSize": "684px",
+				"wideSize": "1194px"
 			},
 			"line-height": {
 				"body": 1.6

skatepark/functions.php

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

skatepark/inc/block-styles.php

@@ -23,6 +23,15 @@ if ( ! function_exists( '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

@@ -8,23 +8,7 @@
 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"}}} -->
-	<figure class="wp-block-image alignfull size-large" style="border-radius:0px"><img src="https://skateparkdemo.files.wordpress.com/2021/08/stocksnap_5otfjyvyse.jpg" alt=""/></figure>
-	<!-- /wp:image -->
-	
-	<!-- wp:columns {"align":"wide","className":"aside-caption"} -->
-	<div class="wp-block-columns alignwide aside-caption"><!-- wp:column -->
-	<div class="wp-block-column"></div>
-	<!-- /wp:column -->
-	
-	<!-- wp:column {"width":"455px"} -->
-	<div class="wp-block-column" style="flex-basis:455px"><!-- wp:separator {"className":"is-style-wide"} -->
-	<hr class="wp-block-separator is-style-wide"/>
-	<!-- /wp:separator -->
-	
-	<!-- wp:paragraph {"fontSize":"small"} -->
-	<p class="has-small-font-size">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.</p>
-	<!-- /wp:paragraph --></div>
-	<!-- /wp:column --></div>
-	<!-- /wp:columns -->',
+	'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=""/><figcaption><strong>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.</strong></figcaption></figure>
+	<!-- /wp:image -->',
 );

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

@@ -1,3 +0,0 @@
-.aside-caption {
-	
-}

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

@@ -0,0 +1,18 @@
+.is-style-skatepark-aside-caption {
+	figcaption {
+		display: flex;
+		justify-content: flex-end;
+		margin: 20px auto 0;
+		padding-left: var(--wp--custom--post-content--padding--left);
+		padding-right: var(--wp--custom--post-content--padding--right);
+		max-width: calc( var(--wp--custom--layout--wide-size) + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right));
+		strong {
+			padding-top: 20px;
+			max-width: 455px;
+			text-align: left;
+			border-top: 3px solid var(--wp--preset--color--primary);
+			font-size: var(--wp--preset--font-size--small);
+			font-weight: normal;
+		}
+	}
+}

skatepark/sass/theme.scss

@@ -3,8 +3,8 @@
 @import "base/text";
 @import "blocks/buttons";
 @import "blocks/search";
-@import "block-patterns/image-caption";
 @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": {