Merge pull request #4380 from Automattic/add/skatepark-testimonial-block-pattern

Skatepark: Add Testimonial block pattern

skatepark/assets/theme.css

@@ -338,6 +338,49 @@
 	margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
 }
 
+.wp-block-quote.is-style-testimonial-quote {
+	/* Needs .wp-block-quote class to override editor styles */
+	border: 0;
+	display: flex;
+	flex-direction: row-reverse;
+	gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
+	margin: calc( var(--wp--custom--margin--vertical) * 1.78) 0;
+	padding-left: 0;
+}
+
+@media (max-width: 599px) {
+	.wp-block-quote.is-style-testimonial-quote {
+		flex-direction: column;
+		gap: calc( var(--wp--custom--margin--vertical) * 0.75);
+	}
+}
+
+.wp-block-quote.is-style-testimonial-quote cite {
+	box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
+	display: inline-block;
+	flex: 1 0 0;
+	font-size: var(--wp--preset--font-size--normal);
+	font-style: normal;
+	font-weight: 500;
+	margin-top: 1.5ex;
+	padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
+	text-align: right;
+}
+
+@media (max-width: 599px) {
+	.wp-block-quote.is-style-testimonial-quote cite {
+		text-align: left;
+	}
+}
+
+.wp-block-quote.is-style-testimonial-quote p, .wp-block-quote.is-style-testimonial-quote div.block-editor-rich-text__editable {
+	flex: 0 0 75%;
+	font-size: calc( var(--wp--preset--font-size--huge) * 1.34);
+	font-weight: bold;
+	line-height: 115%;
+	margin-bottom: 0;
+}
+
 .pre-footer h3 {
 	text-transform: uppercase;
 }

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',
+				'testimonial',
 				'two-columns-of-text',
 				'paragraph-with-quote',
 			);

skatepark/inc/block-styles.php

@@ -59,6 +59,15 @@ if ( ! function_exists( 'skatepark_register_block_styles' ) ) :
 					'style_handle' => 'side-quote',
 				)
 			);
+
+			register_block_style(
+				'core/quote',
+				array(
+					'name'         => 'testimonial-quote',
+					'label'        => __( 'Testimonial', 'skatepark' ),
+					'style_handle' => 'testimonial-quote',
+				)
+			);
 		}
 	}
 endif;

skatepark/inc/patterns/testimonial.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Testimonial.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Testimonial', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"80px","bottom":"80px"}}}} -->
+    <div class="wp-block-group alignwide" style="padding-top:80px;padding-bottom:80px"><!-- wp:quote {"className":"is-style-testimonial-quote"} -->
+    <blockquote class="wp-block-quote is-style-testimonial-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', 'skatepark' ) . '</cite></blockquote>
+    <!-- /wp:quote --></div>
+    <!-- /wp:group -->',
+);

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

@@ -0,0 +1,37 @@
+.wp-block-quote.is-style-testimonial-quote { /* Needs .wp-block-quote class to override editor styles */
+	border: 0;
+	display: flex;
+	flex-direction: row-reverse;
+	gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
+	margin: calc( var(--wp--custom--margin--vertical) * 1.78) 0;
+	padding-left: 0;
+
+	@include break-small-only() {
+		flex-direction: column;
+		gap: calc( var(--wp--custom--margin--vertical) * 0.75);
+	}
+
+	cite {
+		box-shadow: inset 0px 3px 0px 0px var(--wp--custom--color--primary);
+		display: inline-block;
+		flex: 1 0 0;
+		font-size: var(--wp--preset--font-size--normal);
+		font-style: normal;
+		font-weight: 500;
+		margin-top: 1.5ex;
+		padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
+		text-align: right;
+
+		@include break-small-only() {
+			text-align: left;
+		}
+	}
+
+	p, div.block-editor-rich-text__editable {
+		flex: 0 0 75%;
+		font-size: calc( var(--wp--preset--font-size--huge) * 1.34);
+		font-weight: bold;
+		line-height: 115%;
+		margin-bottom: 0;
+	}
+}

skatepark/sass/theme.scss

@@ -11,6 +11,7 @@
 @import "block-styles/image-caption";
 @import "block-styles/indented-paragraph";
 @import "block-styles/side-quote";
+@import "block-styles/testimonial-quote";
 @import "block-patterns/pre-footer";
 @import "block-patterns/paragraph-with-quote";
 @import "elements/headings";