Merge pull request #4414 from Automattic/add/skatepark-paragraph-quote-pattern

Skatepark: Add paragraph with quote block pattern

skatepark/assets/theme.css

@@ -318,6 +318,26 @@
 	text-indent: 5em;
 }
 
+.wp-block-quote.is-style-side-quote {
+	/* Needs .wp-block-quote class to override editor styles */
+	border: 0;
+	box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
+	margin: calc( var(--wp--custom--margin--vertical) * 1.5) 0;
+	padding: calc( var(--wp--custom--margin--baseline) * 1.35) 0 0 0;
+}
+
+.wp-block-quote.is-style-side-quote cite {
+	font-size: var(--wp--preset--font-size--normal);
+	font-style: normal;
+	font-weight: 600;
+}
+
+.wp-block-quote.is-style-side-quote p, .wp-block-quote.is-style-side-quote div.block-editor-rich-text__editable {
+	font-size: var(--wp--preset--font-size--medium);
+	line-height: 1.4em;
+	margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
+}
+
 .pre-footer h3 {
 	text-transform: uppercase;
 }
@@ -332,6 +352,14 @@
 	--wp--custom--button--spacing--padding--bottom: 0.5em;
 }
 
+.paragraph-with-quote h4 {
+	margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89) 0;
+}
+
+.paragraph-with-quote div:nth-child(2) p {
+	margin: calc( var(--wp--custom--margin--baseline) * 1.55) 0 0 0;
+}
+
 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

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

skatepark/inc/block-styles.php

@@ -50,6 +50,15 @@ if ( ! function_exists( 'skatepark_register_block_styles' ) ) :
 					'style_handle' => 'indented-post-excerpt',
 				)
 			);
+
+			register_block_style(
+				'core/quote',
+				array(
+					'name'         => 'side-quote',
+					'label'        => __( 'Side quote', 'skatepark' ),
+					'style_handle' => 'side-quote',
+				)
+			);
 		}
 	}
 endif;

skatepark/inc/patterns/paragraph-with-quote.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Paragraph with quote.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Paragraph with quote', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:columns {"align":"wide","className":"paragraph-with-quote"} -->
+	<div class="wp-block-columns alignwide paragraph-with-quote"><!-- wp:column {"width":"25%"} -->
+	<div class="wp-block-column" style="flex-basis:25%"></div>
+	<!-- /wp:column -->
+	
+	<!-- wp:column {"width":"50%"} -->
+	<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Why come to Skatepark?', 'skatepark' ) . '</h4>
+	<!-- /wp:heading -->
+	
+	<!-- 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. Plus, you’ll work 1:1 with our team of coaches to learn how to skate.', 'skatepark' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:column -->
+	
+	<!-- wp:column {"width":"25%"} -->
+	<div class="wp-block-column" style="flex-basis:25%"><!-- wp:quote {"className":"is-style-side-quote"} -->
+	<blockquote class="wp-block-quote is-style-side-quote"><p>' . esc_html__( 'I learned how to do a kick flip and made a bunch of new friends. Can’t wait to go back!', 'skatepark' ) . '</p><cite>' . esc_html__( '– Jane Doe, 11', 'skatepark' ) . '</cite></blockquote>
+	<!-- /wp:quote --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->',
+);

skatepark/sass/block-patterns/_paragraph-with-quote.scss

@@ -0,0 +1,11 @@
+.paragraph-with-quote {
+    h4 {
+        margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89 ) 0;
+    }
+
+    div:nth-child(2) {    
+        p {
+            margin: calc( var(--wp--custom--margin--baseline) * 1.55 ) 0 0 0;
+        }
+    }
+}

skatepark/sass/block-styles/_side-quote.scss

@@ -0,0 +1,18 @@
+.wp-block-quote.is-style-side-quote { /* Needs .wp-block-quote class to override editor styles */
+	border: 0;
+	box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
+	margin: calc( var(--wp--custom--margin--vertical) * 1.5) 0;
+	padding: calc( var(--wp--custom--margin--baseline) * 1.35) 0 0 0;
+
+	cite {
+		font-size: var(--wp--preset--font-size--normal);
+		font-style: normal;
+		font-weight: 600;
+	}
+
+	p, div.block-editor-rich-text__editable {
+		font-size: var(--wp--preset--font-size--medium);
+		line-height: 1.4em;
+		margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
+	}
+}

skatepark/sass/theme.scss

@@ -10,7 +10,9 @@
 @import "block-patterns/pre-footer";
 @import "block-styles/image-caption";
 @import "block-styles/indented-paragraph";
+@import "block-styles/side-quote";
 @import "block-patterns/pre-footer";
+@import "block-patterns/paragraph-with-quote";
 @import "elements/headings";
 @import "elements/links";
 @import "templates/header";