Merge pull request #4397 from Automattic/skatepark-2-columns-pattern

Skatepark: two columns of text block pattern

skatepark/assets/theme.css

@@ -257,20 +257,6 @@
 	left: calc( -1 * var(--wp--custom--button--border--width));
 }
 
-.pre-footer h3 {
-	text-transform: uppercase;
-}
-
-.pre-footer .wp-block-social-links.is-style-logos-only {
-	margin-left: calc( -1 * ( 8px + 0.25em ));
-}
-
-.pre-footer .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
-	--wp--custom--button--typography--font-size: 14px;
-	--wp--custom--button--spacing--padding--top: 0.5em;
-	--wp--custom--button--spacing--padding--bottom: 0.5em;
-}
-
 .is-style-skatepark-aside-caption {
 	align-items: center;
 	display: flex;
@@ -297,6 +283,24 @@
 	margin-right: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ), var(--wp--custom--post-content--padding--left) ));
 }
 
+.is-style-indented-paragraph {
+	text-indent: 10em;
+}
+
+.pre-footer h3 {
+	text-transform: uppercase;
+}
+
+.pre-footer .wp-block-social-links.is-style-logos-only {
+	margin-left: calc( -1 * ( 8px + 0.25em ));
+}
+
+.pre-footer .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+	--wp--custom--button--typography--font-size: 14px;
+	--wp--custom--button--spacing--padding--top: 0.5em;
+	--wp--custom--button--spacing--padding--bottom: 0.5em;
+}
+
 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/inc/block-patterns.php

@@ -21,6 +21,7 @@ if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
 				'pre-footer',
 				'text-list-with-button',
 				'full-width-image-with-aside-caption',
+				'two-columns-of-text',
 			);
 
 			foreach ( $block_patterns as $block_pattern ) {

skatepark/inc/block-styles.php

@@ -32,6 +32,15 @@ if ( ! function_exists( 'skatepark_register_block_styles' ) ) :
 					'style_handle' => 'skatepark-aside-caption',
 					)
 				);
+	
+			register_block_style(
+				'core/paragraph',
+				array(
+					'name'         => 'indented-paragraph',
+					'label'        => __( 'Indented paragraph', 'skatepark' ),
+					'style_handle' => 'indented-paragraph',
+				)
+			);
 		}
 	}
 endif;

skatepark/inc/patterns/two-columns-of-text.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Two columns of text.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Two columns of text', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"","style":{"spacing":{"padding":{"right":"5em"}}}} -->
+	<div class="wp-block-column" style="padding-right:5em"><!-- wp:paragraph {"fontSize":"medium"} -->
+	<p class="has-medium-font-size">' . esc_html__( 'Rodney Mullen. Paul Rodriguez. Bucky Lasek. Bob Burnquist. Tony Hawk. Ryan Sheckler. Eric Koston. Bam Margera. Chris Cole. Andrew Reynolds. The are all skateboarding icons. Some of them even have video games you may have played.', 'skatepark' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:column -->
+	
+	<!-- wp:column {"width":"550px"} -->
+	<div class="wp-block-column" style="flex-basis:550px"><!-- wp:paragraph {"className":"is-style-indented-paragraph"} -->
+	<p class="is-style-indented-paragraph">' . esc_html__( 'Skateboarding can teach people discipline, patience, and resiliency. It’s a great sport for kids with a lot of energy! We’ll help build up some structure and support in your life, all while you meet new people and have a ton of fun learning how to skateboard.', 'skatepark' ) . '</p>
+	<!-- /wp:paragraph -->
+	
+	<!-- wp:paragraph -->
+	<p>' . esc_html__( 'Skateboarding is a social sport! Come hang out and meet some new friends to cheer you on while you skate. We have a strict no-bullying policy and maintain a supportive environment for all camp attendees.', 'skatepark' ) . '</p>
+	<!-- /wp:paragraph -->
+	
+	<!-- wp:paragraph -->
+	<p>' . esc_html__( 'Work 1:1 with our team of coaches to learn how to skate. They’ll be your mentors and guides while you’re at camp. Plus, many of our older campers will mentor the younger skaters.', 'skatepark' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->',
+);

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

@@ -0,0 +1,3 @@
+.is-style-indented-paragraph {
+	text-indent: 10em;
+}

skatepark/sass/theme.scss

@@ -4,8 +4,9 @@
 @import "blocks/buttons";
 @import "blocks/post-comments";
 @import "blocks/search";
-@import "block-patterns/pre-footer";
 @import "block-styles/image-caption";
+@import "block-styles/indented-paragraph";
+@import "block-patterns/pre-footer";
 @import "elements/headings";
 @import "elements/links";
 @import "templates/header";

skatepark/theme.json

@@ -359,6 +359,9 @@
 					"margin": "var(--wp--custom--margin--vertical) auto"
 				}
 			},
+			"fontsToLoadFromGoogle": [
+				"family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900"
+			],
 			"line-height": {
 				"body": 1.6
 			}