Skatepark: Use native column block styles

skatepark/assets/theme.css

@@ -352,28 +352,16 @@
 	--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 {
+.paragraph-with-quote h4 {
 	margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89) 0;
 }
 
-.paragraph-with-quote .paragraph-column > p:first-of-type {
-	text-indent: 9.15em;
+.paragraph-with-quote p {
+	margin: calc( var(--wp--custom--margin--baseline) * 1.55) 0 0 0;
 }
 
-.paragraph-with-quote .paragraph-column p {
-	margin: calc( var(--wp--custom--margin--baseline) * 1.55) 0 0 0;
+.paragraph-with-quote div:nth-child(2) > p:first-of-type {
+	text-indent: 9.15em;
 }
 
 h1.is-style-skatepark-heading-border, h2.is-style-skatepark-heading-border, h3.is-style-skatepark-heading-border, h4.is-style-skatepark-heading-border, h5.is-style-skatepark-heading-border, h6.is-style-skatepark-heading-border {

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 alignwide paragraph-with-quote"><!-- wp:column -->
-	<div class="wp-block-column"></div>
+	<div class="wp-block-columns alignwide paragraph-with-quote"><!-- wp:column {"width":"25%"} -->
+	<div class="wp-block-column" style="flex-basis:25%"></div>
 	<!-- /wp:column -->
 	
-	<!-- wp:column {"className":"paragraph-column"} -->
-	<div class="wp-block-column paragraph-column"><!-- wp:heading {"level":4} -->
+	<!-- wp:column {"width":"50%"} -->
+	<div class="wp-block-column" style="flex-basis:50%"><!-- 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 -->
-	<div class="wp-block-column"><!-- wp:quote {"className":"is-style-side-quote"} -->
+	<!-- wp:column {"width":"25%"} -->
+	<div class="wp-block-column" style="flex-basis:25%"><!-- 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,23 +1,15 @@
 .paragraph-with-quote {
-    display: flex;
-
-    > .wp-block-column {
-        flex: 1 0 25% !important;
+    h4 {
+        margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89 ) 0;
     }
 
-    .paragraph-column {
-        flex: 1 0 50% !important;
-
-        h4 {
-            margin: 0 0 calc( var(--wp--custom--margin--vertical) * 0.89 ) 0;
-        }
+    p {
+        margin: calc( var(--wp--custom--margin--baseline) * 1.55 ) 0 0 0;
+    }
 
+    div:nth-child(2) {    
         > p:first-of-type {
             text-indent: 9.15em;
         }
-
-        p {
-            margin: calc( var(--wp--custom--margin--baseline) * 1.55 ) 0 0 0;
-        }
     }
 }