Give Columns Rhythm (#1848)

This PR updates the default styling for Gutenberg Column blocks to add
our standard rhythm styles to the columns, so their contents will be
properly spaced.

Fixes #1827

Author: spaceninja

.changeset/early-cups-clean.md

@@ -0,0 +1,5 @@
+---
+"@cloudfour/patterns": minor
+---
+
+Update Columns block to use our standard rhythm styles so items contained in the columns will have the proper spacing.

src/vendor/wordpress/core-blocks.stories.mdx

@@ -119,27 +119,27 @@ set to `display: flex`.
 <Canvas>
   <Story name="Columns">
     {`<div class="wp-block-columns">
-        <div class="wp-block-column" style="flex-basis:37.5%">
+        <div class="wp-block-column" style="flex-basis: 66.66%">
+          <h2>Our Designers Code, Our Developers Design</h2>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et eros
-            eu felis.
-          </p>
-          <figure class="wp-block-image">
-            <img src="/media/Windbuchencom.jpg" alt="" />
-          </figure>
-          <p>Suspendisse commodo neque lacus, a dictum orci interdum et.</p>
-        </div>
-        <div class="wp-block-column" style="flex-basis:62.5%">
-          <p>
-            Etiam et egestas lorem. Vivamus sagittis sit amet dolor quis lobortis.
-            Integer sed fermentum arcu, id vulputate lacus. Etiam fermentum sem eu
-            quam hendrerit.
+            Our sprint-based process works because we’re full of what our industry
+            considers unicorns. Our designers write code. Our developers went to art
+            school.
           </p>
           <p>
-            Nam risus massa, ullamcorper consectetur eros fermentum, porta aliquet
-            ligula. Sed vel mauris nec enim.
+            We didn’t set out to become a unicorn safe haven, but we’re happy it
+            happened. <a href="https://cloudfour.com/is">Our team</a>’s unique
+            combination of skills is what enables us to do great work for our clients.
           </p>
         </div>
+        <div class="wp-block-column" style="flex-basis: 33.33%">
+          <figure class="wp-block-image size-full">
+            <img
+              src="https://cloudfour.com/wp-content/uploads/2016/07/approach-unicorn.svg"
+              alt=""
+            />
+          </figure>
+        </div>
       </div>`}
   </Story>
 </Canvas>

src/vendor/wordpress/styles/_core-blocks.scss

@@ -95,6 +95,15 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
   }
 }
 
+/**
+ * Gutenberg Block: Columns
+ *
+ * 1. Apply our standard rhythm styles to the contents of Columns.
+ */
+.wp-block-column {
+  @include spacing.vertical-rhythm; // 1
+}
+
 /**
  * Gutenberg Block: Group
  * Styles for Gutenberg group blocks