Browse Source

first pass at the block pattern

Maggie 4 years ago
parent
commit
77c601bf45

+ 5 - 0
skatepark/child-theme.json

@@ -231,6 +231,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)",

+ 2 - 1
skatepark/inc/block-patterns.php

@@ -19,7 +19,8 @@ if ( ! function_exists( '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 ) {

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

@@ -8,5 +8,23 @@
 return array(
 	'title'      => __( 'Full width image with aside caption', 'skatepark' ),
 	'categories' => array( 'skatepark' ),
-	'content'    => '',
+	'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 -->',
 );

+ 3 - 0
skatepark/sass/block-patterns/_image-caption.scss

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

+ 1 - 0
skatepark/sass/theme.scss

@@ -3,6 +3,7 @@
 @import "base/text";
 @import "blocks/buttons";
 @import "blocks/search";
+@import "block-patterns/image-caption";
 @import "block-patterns/pre-footer";
 @import "elements/headings";
 @import "elements/links";

+ 1 - 1
skatepark/theme.json

@@ -471,7 +471,7 @@
 				"border": {
 					"color": "currentColor",
 					"style": "solid",
-					"width": "0 0 1px 0"
+					"width": "0 0 3px 0"
 				}
 			},
 			"core/site-title": {