Skatepark: Add testimonial quote block style

skatepark/assets/theme.css

@@ -287,6 +287,48 @@
 	text-indent: 10em;
 }
 
+.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;
+	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 66.66%;
+	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-styles.php

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

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

@@ -0,0 +1,36 @@
+.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;
+		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 66.66%;
+		font-size: calc( var(--wp--preset--font-size--huge) * 1.34);
+		font-weight: bold;
+		line-height: 115%;
+		margin-bottom: 0;
+	}
+}

skatepark/sass/theme.scss

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