Skatepark: Add initial Testimonial block pattern

skatepark/assets/theme.css

@@ -177,6 +177,42 @@
 	--wp--custom--button--spacing--padding--bottom: 0.5em;
 }
 
+.testimonial .wp-block-quote {
+	border: 0;
+	display: flex;
+	flex-direction: row-reverse;
+	gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
+	margin: 0;
+	padding-left: 0;
+}
+
+@media (max-width: 599px) {
+	.testimonial .wp-block-quote {
+		display: block;
+	}
+}
+
+.testimonial .wp-block-quote > * {
+	margin-right: 0.65em;
+}
+
+.testimonial .wp-block-quote cite {
+	box-shadow: inset 0px 3px 0px 0px #000000;
+	flex: 1 0 0;
+	font-size: var(--wp--preset--font-size--normal);
+	font-style: normal;
+	font-weight: 500;
+	padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
+	text-align: right;
+}
+
+.testimonial .wp-block-quote p {
+	flex: 0 0 66.66%;
+	font-size: calc( var(--wp--preset--font-size--huge) * 1.34);
+	font-weight: bold;
+	line-height: 115%;
+}
+
 a {
 	text-decoration-thickness: 0.07em;
 	text-underline-offset: 0.46ex;

skatepark/inc/block-patterns.php

@@ -19,6 +19,7 @@ if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
 		if ( function_exists( 'register_block_pattern' ) ) {
 			$block_patterns = array(
 				'pre-footer',
+				'testimonial'
 			);
 
 			foreach ( $block_patterns as $block_pattern ) {

skatepark/inc/patterns/testimonial.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Testimonial.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Testimonial', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"80px","bottom":"80px"}}},"className":"testimonial"} -->
+	<div class="wp-block-group alignwide testimonial" style="padding-top:80px;padding-bottom:80px">
+	<!-- wp:quote -->
+	<blockquote class="wp-block-quote"><p>Add a testimonial from someone who loves what you do.</p><cite>Jane Doe</cite></blockquote>
+	<!-- /wp:quote --></div>
+	<!-- /wp:group -->',
+);

skatepark/sass/block-patterns/_testimonial.scss

@@ -0,0 +1,35 @@
+.testimonial {
+	.wp-block-quote {
+		border: 0;
+		display: flex;
+		flex-direction: row-reverse;
+		gap: calc( var(--wp--custom--margin--horizontal) * 1.6);
+		margin: 0;
+		padding-left: 0;
+
+		@include break-small-only() {
+			display: block;
+		}
+
+		& > * {
+			margin-right: 0.65em;
+		}
+
+		cite {
+			box-shadow: inset 0px 3px 0px 0px #000000;
+			flex: 1 0 0;
+			font-size: var(--wp--preset--font-size--normal);
+			font-style: normal;
+			font-weight: 500;
+			padding-top: calc( var(--wp--custom--margin--baseline) * 1.35);
+			text-align: right;
+		}
+
+		p {
+			flex: 0 0 66.66%;
+			font-size: calc( var(--wp--preset--font-size--huge) * 1.34);
+			font-weight: bold;
+			line-height: 115%;
+		}
+	}
+}

skatepark/sass/theme.scss

@@ -4,4 +4,5 @@
 @import "blocks/buttons";
 @import "blocks/search";
 @import "block-patterns/pre-footer";
+@import "block-patterns/testimonial";
 @import "elements/links";