Add styles for WordPress Media-Text block (#2151)

Author: tylersticka

.changeset/nine-jokes-guess.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add styles for the "Media-Text" WordPress block

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

@@ -1,9 +1,10 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import blockImageDemo from './demo/image.twig';
 import blockCodeDemo from './demo/code.twig';
 import blockEmbedSpeakerDeckDemo from './demo/embed/speakerdeck.twig';
 import blockEmbedYouTubeDemo from './demo/embed/youtube.twig';
+import blockImageDemo from './demo/image.twig';
 import blockGroupDemo from './demo/group.twig';
+import blockMediaTextDemo from './demo/media-text.twig';
 import blockTableDemo from './demo/table.twig';
 const blockEmbedDemoArgTypes = {
   alignment: {
@@ -33,6 +34,42 @@ const blockEmbedDemoArgTypes = {
     control: { type: 'text' },
   },
 };
+const blockMediaTextDemoArgTypes = {
+  alignment: {
+    options: {
+      None: '',
+      Left: 'alignleft',
+      Center: 'aligncenter',
+      Right: 'alignright',
+      Full: 'alignfull',
+      Wide: 'alignwide',
+    },
+    control: { type: 'select' },
+  },
+  vertical_alignment: {
+    options: {
+      Top: 'top',
+      Center: 'center',
+      Bottom: 'bottom',
+    },
+    control: { type: 'select' },
+  },
+  has_media_on_the_right: {
+    control: { type: 'boolean' },
+  },
+  is_stacked_on_mobile: {
+    control: { type: 'boolean' },
+  },
+  has_background: {
+    control: { type: 'boolean' },
+  },
+  is_image_fill: {
+    control: { type: 'boolean' },
+  },
+  media_width: {
+    control: { type: 'range', min: 15, max: 85, step: 1 },
+  },
+};
 
 <Meta title="Vendor/WordPress/Core Blocks" />
 
@@ -461,16 +498,16 @@ padding) class.
 Another control toggles the class `is-stacked-on-mobile`.
 
 <Canvas>
-  <Story name="Media-Text">
-    {`<div class="wp-block-media-text alignwide is-stacked-on-mobile has-media-on-the-right is-vertically-aligned-center has-background has-subtle-background-background-color">
-        <figure class="wp-block-media-text__media">
-          <img src="/media/Biologia_Centrali-Americana_-_Cantorchilus_semibadius_1902.jpg" alt="" />
-        </figure>
-        <div class="wp-block-media-text__content">
-          <p>The wren<br>Earns his living<br>Noiselessly.</p>
-          <p>— Kobayashi Issa (一茶)</p>
-        </div>
-      </div>`}
+  <Story
+    name="Media-Text"
+    parameters={{ layout: 'fullscreen' }}
+    argTypes={blockMediaTextDemoArgTypes}
+    args={{
+      is_stacked_on_mobile: true,
+      media_width: 33,
+    }}
+  >
+    {(args) => blockMediaTextDemo(args)}
   </Story>
 </Canvas>
 

src/vendor/wordpress/demo/media-text.twig

@@ -0,0 +1,45 @@
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--prose o-container--pad-inline u-pad-block-1',
+  content_class: 'o-rhythm',
+  alignment: alignment,
+  has_background: has_background,
+  vertical_alignment: vertical_alignment,
+  media_width: media_width,
+  is_image_fill: is_image_fill,
+  is_stacked_on_mobile: is_stacked_on_mobile,
+  has_media_on_the_right: has_media_on_the_right
+} only %}
+  {% block content %}
+
+    <p>Let’s start with some text before the block even starts.</p>
+
+    <div class="wp-block-media-text
+      {% if alignment %}{{alignment}}{% endif %}
+      {% if has_media_on_the_right %}has-media-on-the-right{% endif %}
+      {% if is_stacked_on_mobile %}is-stacked-on-mobile{% endif %}
+      {% if is_image_fill %}is-image-fill{% endif %}
+      {% if vertical_alignment %}is-vertically-aligned-{{ vertical_alignment }}{% endif %}
+      {% if has_background %}has-gray-lighter-background-color has-background{% endif %}"
+      {% if media_width and media_width != 50 %}style="
+        grid-template-columns:
+          {%- if has_media_on_the_right -%}
+            auto {{media_width}}%
+          {%- else -%}
+            {{media_width}}% auto
+          {%- endif -%}
+        "
+      {%- endif %}>
+      <figure class="wp-block-media-text__media"
+        {% if is_image_fill %}style="background-image:url(/media/avatar-buster-b.jpg);background-position:50% 50%"{% endif %}>
+        <img decoding="async" src="/media/avatar-buster-b.jpg" alt="" class="size-full">
+      </figure>
+      <div class="wp-block-media-text__content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <p>Suspendisse a est et ex consectetur pulvinar at in tortor. Maecenas id mauris magna.</p>
+      </div>
+    </div>
+
+    <p>Here is some text that follows this block.</p>
+
+  {% endblock %}
+{% endembed %}

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

@@ -259,6 +259,27 @@ figure.wp-block-image {
   }
 }
 
+/// Gutenberg block: Media-Text
+.wp-block-media-text {
+  // I'm honestly not sure why the core WordPress block doesn't use `gap` at the
+  // time of this writing, but it solves a lot of spacing issues.
+  gap: size.$spacing-gap-inline-medium;
+
+  // When an image is set to fill the container, setting a `border-radius` makes
+  // the cropping feel more visually intentional (similar to card covers).
+  &.is-image-fill .wp-block-media-text__media {
+    border-radius: size.$border-radius-medium;
+  }
+
+  .wp-block-media-text__content {
+    // Maintain vertical rhythm between child elements.
+    @include spacing.vertical-rhythm;
+
+    // We remove the padding since `gap` is already applied to the parent.
+    padding: 0;
+  }
+}
+
 /// Gutenberg block: Video
 /// Styles for videos inserted via Gutenberg blocks.
 .wp-block-video {

src/vendor/wordpress/styles/_utilities.scss

@@ -48,7 +48,8 @@
 /// 2. …but if the alignment is not center, we use fluid inline padding instead
 ///    so that the inner content will align with its siblings.
 p,
-.wp-block-group {
+.wp-block-group,
+.wp-block-media-text {
   &.has-background {
     padding: size.$rhythm-default; // 1