Skatepark: Add side quote block style

skatepark/assets/theme.css

@@ -318,6 +318,25 @@
 	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.11) 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: 500;
+}
+
+.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--large);
+	margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
+}
+
 .pre-footer h3 {
 	text-transform: uppercase;
 }

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/sass/block-styles/_side-quote.scss

@@ -0,0 +1,17 @@
+.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.11) 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: 500;
+	}
+
+	p, div.block-editor-rich-text__editable {
+		font-size: var(--wp--preset--font-size--large);
+		margin-bottom: calc( var(--wp--custom--margin--baseline) * 0.68);
+	}
+}

skatepark/sass/theme.scss

@@ -10,6 +10,7 @@
 @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 "elements/headings";
 @import "elements/links";