Slightly refactor Rhythm, support Jetpack Markdown Block

.changeset/stupid-walls-sip.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add support for Jetpack Markdown Block

.changeset/tender-wasps-type.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Use custom properties for Rhythm spacing to support inheritance

src/mixins/_spacing.scss

@@ -0,0 +1,29 @@
+@use "../compiled/tokens/scss/size";
+
+/// Applies styles for a vertical rhythm layout object. Used by the `o-rhythm`
+/// pattern and for relevant Gutenberg blocks. Makes heavy use of Heydon
+/// Pickering's "lobotomized owl" selectors: By adding `margin-top` to adjacent
+/// elements, we avoid impacting the layout of the container itself (which would
+/// complicate alignment of adjacent columns).
+/// @link https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
+/// @param {Number} $space - The default space between.
+@mixin vertical-rhythm($space: size.$rhythm-default) {
+  & > * + * {
+    margin-top: $space;
+    // Allow space to be overridden using custom properties
+    margin-top: var(--rhythm);
+  }
+
+  // Where custom properties are supported, also allow headings to receive their
+  // own rhythm.
+  @supports (--custom: properties) {
+    & > * + h1,
+    & > * + h2,
+    & > * + h3,
+    & > * + h4,
+    & > * + h5,
+    & > * + h6 {
+      margin-top: var(--rhythm-headings);
+    }
+  }
+}

src/objects/rhythm/rhythm.scss

@@ -1,45 +1,31 @@
 @use "../../compiled/tokens/scss/size";
+@use "../../mixins/spacing";
 
-/**
- * This pattern makes heavy use of Heydon Pickering's "lobotomized owl"
- * selectors. By adding `margin-top` to adjacent elements, we avoid impacting
- * the layout of the container itself (which would complicate alignment of
- * adjacent columns).
- *
- * @see https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
- */
-
-.o-rhythm > * + * {
-  margin-top: size.$rhythm-default;
+:root {
+  --rhythm: #{size.$rhythm-default};
+  --rhythm-headings: var(--rhythm);
 }
 
-/**
- * General spacing modifiers
- */
+.o-rhythm {
+  @include spacing.vertical-rhythm(size.$rhythm-default);
+}
+
+// General spacing modifiers
 
-.o-rhythm--compact > * + * {
-  margin-top: size.$rhythm-compact;
+.o-rhythm--compact {
+  --rhythm: #{size.$rhythm-compact};
 }
 
-.o-rhythm--condensed > * + * {
-  margin-top: size.$rhythm-condensed;
+.o-rhythm--condensed {
+  --rhythm: #{size.$rhythm-condensed};
 }
 
-.o-rhythm--generous > * + * {
-  margin-top: size.$rhythm-generous;
+.o-rhythm--generous {
+  --rhythm: #{size.$rhythm-generous};
 }
 
-/**
- * Heading modifiers
- */
+// Heading modifiers
 
 .o-rhythm--generous-headings {
-  & > * + h1,
-  & > * + h2,
-  & > * + h3,
-  & > * + h4,
-  & > * + h5,
-  & > * + h6 {
-    margin-top: size.$rhythm-generous;
-  }
+  --rhythm-headings: #{size.$rhythm-generous};
 }

src/objects/rhythm/rhythm.stories.mdx

@@ -51,3 +51,38 @@ behave as expected.
     {articleDemo}
   </Story>
 </Canvas>
+
+## Inheriting Rhythm
+
+The vertical spacing applied by the Rhythm object only applies to direct children. In some cases, you may want elements below to inherit rhythm. This can be accomplished in two main ways.
+
+### Via HTML
+
+If you have access to the markup, you can add the `o-rhythm` class to the child element:
+
+```html
+<div class="o-rhythm o-rhythm--condensed">
+  <!-- ... -->
+  <div class="o-rhythm">
+    <!-- will also be condensed -->
+  </div>
+  <!-- ... -->
+</div>
+```
+
+### Via Sass
+
+Our project includes a `spacing.vertical-rhythm` mixin that will apply the basic object rules to any selector:
+
+```scss
+@use 'path/to/mixins/spacing';
+
+.unchangeable-vendor-selector {
+  @include spacing.vertical-rhythm();
+}
+```
+
+## Custom Properties
+
+- `--rhythm`: Amount of vertical space between adjacent elements. Defaults to our `$rhythm-default` [size token](/docs/design-tokens-size--page#rhythm).
+- `--rhythm-headings`: Extra space to precede headings that follow another element. Defaults to the value of `--rhythm`.

src/vendor/wordpress/_wordpress.scss

@@ -1,2 +1,3 @@
 @use 'styles/core-blocks';
+@use 'styles/jetpack-blocks';
 @use 'styles/utilities';

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

@@ -0,0 +1,29 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Vendor/WordPress/Jetpack Blocks" />
+
+# Jetpack Blocks
+
+WordPress developer Automattic provides a [Jetpack](https://jetpack.com/) plugin that includes additional blocks. We support a selection of these.
+
+## Markdown Block
+
+The markdown block applies vertical rhythm between its children. If contained within a [Rhythm object](/docs/objects-rhythm--default-story), the markdown block will inherit the same spacing. For example, if the Rhythm object uses the `o-rhythm--generous` modifier, the markdown block will inherit the generous spacing.
+
+See also: [Markdown Block documentation](https://jetpack.com/support/markdown/)
+
+<Canvas>
+  <Story name="Markdown">
+    {`<div class="wp-block-jetpack-markdown">
+      <p>
+        <b>Lorem</b> <i>ipsum</i> dolor sit amet, consectetur adipiscing elit. Quisque eu ex
+        enim. Nunc efficitur scelerisque dolor et sollicitudin.
+      </p>
+      <p>
+        Donec finibus lorem elit, eu consectetur quam pellentesque sed.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada
+        fames ac turpis egestas.
+      </p>
+    </div>`}
+  </Story>
+</Canvas>

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

@@ -0,0 +1,5 @@
+@use '../../../mixins/spacing';
+
+.wp-block-jetpack-markdown {
+  @include spacing.vertical-rhythm();
+}