Skatepark: Control flex with CSS

skatepark/assets/theme.css

@@ -352,6 +352,18 @@
 	--wp--custom--button--spacing--padding--bottom: 0.5em;
 }
 
+.paragraph-with-quote {
+	display: flex;
+}
+
+.paragraph-with-quote > .wp-block-column {
+	flex: 1 0 25% !important;
+}
+
+.paragraph-with-quote .paragraph-column {
+	flex: 1 0 50% !important;
+}
+
 .paragraph-with-quote .paragraph-column h4 {
 	margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89) 0;
 }

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

@@ -9,12 +9,12 @@ return array(
 	'title'      => __( 'Paragraph with quote', 'skatepark' ),
 	'categories' => array( 'skatepark' ),
 	'content'    => '<!-- wp:columns {"align":"wide","className":"paragraph-with-quote"} -->
-	<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
-	<div class="wp-block-column" style="flex-basis:25%"></div>
+	<div class="wp-block-columns alignwide paragraph-with-quote"><!-- wp:column -->
+	<div class="wp-block-column"></div>
 	<!-- /wp:column -->
 	
-	<!-- wp:column {"width":"50%","className":"paragraph-column"} -->
-	<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":4} -->
+	<!-- wp:column {"className":"paragraph-column"} -->
+	<div class="wp-block-column paragraph-column"><!-- wp:heading {"level":4} -->
 	<h4>' . esc_html__( 'Another Heading', 'skatepark' ) . '</h4>
 	<!-- /wp:heading -->
 	
@@ -27,8 +27,8 @@ return array(
 	<!-- /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"} -->
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:quote {"className":"is-style-side-quote"} -->
 	<blockquote class="wp-block-quote is-style-side-quote"><p>' . esc_html__( 'A quote that is aligned right next to some normal paragraphs and headings', 'skatepark' ) . '</p><cite>' . esc_html__( '– Jane Doe', 'skatepark' ) . '</cite></blockquote>
 	<!-- /wp:quote --></div>
 	<!-- /wp:column --></div>

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

@@ -1,5 +1,13 @@
 .paragraph-with-quote {
+    display: flex;
+
+    > .wp-block-column {
+        flex: 1 0 25% !important;
+    }
+
     .paragraph-column {
+        flex: 1 0 50% !important;
+
         h4 {
             margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89 ) 0;
         }