Add styles for WordPress embed block

.changeset/moody-candles-beg.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add styles in support of the WordPress embed block

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

@@ -1,8 +1,38 @@
 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 blockGroupDemo from './demo/group.twig';
 import blockTableDemo from './demo/table.twig';
+const blockEmbedDemoArgTypes = {
+  alignment: {
+    options: {
+      None: '',
+      Left: 'alignleft',
+      Center: 'aligncenter',
+      Right: 'alignright',
+      Full: 'alignfull',
+      Wide: 'alignwide',
+    },
+    control: { type: 'select' },
+  },
+  ratio: {
+    options: {
+      '21:9': '21-9',
+      '18:9': '18-9',
+      '16:9': '16-9',
+      '4:3': '4-3',
+      '1:1': '1-1',
+      '9:16': '9-16',
+      '1:2': '1-2',
+    },
+    control: { type: 'select' },
+  },
+  caption: {
+    control: { type: 'text' },
+  },
+};
 
 <Meta title="Vendor/WordPress/Core Blocks" />
 
@@ -204,39 +234,35 @@ content and adding `is-type-embedType-embed`, `wp-block-embed-embedType` and
 Adding a caption in the editor includes a `figcaption` element before the closing
 `figure` tag.
 
-<Canvas>
-  <Story name="Embed">
-    {`<figure
-        class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-wp-themes-com"
-      >
-        <div class="wp-block-embed__wrapper">
-          <blockquote
-            class="wp-embedded-content"
-            data-secret="AbCd1234"
-            style="display: none;"
-          >
-            <a href="https://wp-themes.com/twentytwenty/?p=36"
-              >Elements</a
-            >
-          </blockquote>
-          <iframe
-            title="Elements — wp-themes.com"
-            class="wp-embedded-content"
-            sandbox="allow-scripts"
-            security="restricted"
-            src="https://wp-themes.com/twentytwenty/?p=36/embed/#?secret=AbCd1234"
-            data-secret="AbCd1234"
-            width="580"
-            height="257"
-            frameborder="0"
-            marginwidth="0"
-            marginheight="0"
-            scrolling="no"
-            data-origwidth="580"
-            data-origheight="327"
-          ></iframe>
-        </div>
-      </figure>`}
+Video embeds will attempt to fill the inline margins of the containing element
+by default. This can be overridden by selecting "center" alignment.
+
+<Canvas isColumn>
+  <Story
+    name="Embed (YouTube)"
+    parameters={{ layout: 'fullscreen' }}
+    argTypes={blockEmbedDemoArgTypes}
+    args={{
+      alignment: '',
+      ratio: '16-9',
+      caption:
+        'Jason Grigsby’s talk, “Imagining a Fluid Future for Design Tools”',
+    }}
+  >
+    {(args) => blockEmbedYouTubeDemo(args)}
+  </Story>
+  <Story
+    name="Embed (Speaker Deck)"
+    parameters={{ layout: 'fullscreen' }}
+    argTypes={blockEmbedDemoArgTypes}
+    args={{
+      alignment: '',
+      ratio: '16-9',
+      caption:
+        'Slides for Jason Grigsby’s talk, “Imagining a Fluid Future for Design Tools”',
+    }}
+  >
+    {(args) => blockEmbedSpeakerDeckDemo(args)}
   </Story>
 </Canvas>
 
@@ -398,18 +424,20 @@ closing wrapper tag.
           Full: 'alignfull',
           Wide: 'alignwide',
         },
-        defaultValue: '',
         control: { type: 'select' },
       },
       style: {
         options: {
           None: 'is-style-default',
           Outlined: 'is-style-outlined',
         },
-        defaultValue: 'is-style-default',
         control: { type: 'select' },
       },
     }}
+    args={{
+      alignment: '',
+      style: 'is-style-default',
+    }}
   >
     {(args) => blockImageDemo({ alignment: args.alignment, style: args.style })}
   </Story>

src/vendor/wordpress/demo/embed/speakerdeck.twig

@@ -0,0 +1,19 @@
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--prose o-container--pad-inline u-pad-block-1',
+  alignment: alignment,
+  ratio: ratio,
+  caption: caption
+} only %}
+  {% block content %}
+    <figure class="wp-block-embed is-type-rich is-provider-speakerdeck wp-block-embed-speakerdeck
+      wp-embed-aspect-{{ratio|default('16-9')}} wp-has-aspect-ratio
+      {% if alignment %}{{alignment}}{% endif %}">
+      <div class="wp-block-embed__wrapper">
+        <iframe loading="lazy" title="Imagining a Fluid Future for Design Tools" id="talk_frame_974667" class="speakerdeck-iframe" src="//speakerdeck.com/player/2082db2379d94e04a3869d64ca9653fd" width="500" height="281" style="aspect-ratio:500/281; border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe>
+      </div>
+      {% if caption %}
+        <figcaption class="wp-element-caption">{{caption}}</figcaption>
+      {% endif %}
+    </figure>
+  {% endblock %}
+{% endembed %}

src/vendor/wordpress/demo/embed/youtube.twig

@@ -0,0 +1,19 @@
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--prose o-container--pad-inline u-pad-block-1',
+  alignment: alignment,
+  ratio: ratio,
+  caption: caption,
+} only %}
+  {% block content %}
+    <figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube
+      wp-embed-aspect-{{ratio|default('16-9')}} wp-has-aspect-ratio
+      {% if alignment %}{{alignment}}{% endif %}">
+      <div class="wp-block-embed__wrapper">
+        <iframe loading="lazy" title="Fluid Design Tools for a Responsive Design System World" src="https://www.youtube.com/embed/N0HeulsGVnM?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" width="500" height="281" frameborder="0"></iframe>
+      </div>
+      {% if caption %}
+        <figcaption class="wp-element-caption">{{caption}}</figcaption>
+      {% endif %}
+    </figure>
+  {% endblock %}
+{% endembed %}

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

@@ -7,6 +7,7 @@
 @use '../../../mixins/button';
 @use '../../../mixins/emdash';
 @use '../../../mixins/ms';
+@use '../../../mixins/ratio-box';
 @use '../../../mixins/spacing';
 @use '../../../mixins/table';
 @use '../../../mixins/theme';
@@ -130,6 +131,62 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
   padding-inline: ms.step(1); // restoring default padding
 }
 
+/// Gutenberg block: Embed
+
+.wp-block-embed {
+  // If the embed type has an aspect ratio, apply the same ratio-box styles as
+  // our embed component.
+  &.wp-has-aspect-ratio .wp-block-embed__wrapper {
+    @include ratio-box.enhanced-styles;
+  }
+
+  /// Supporting all aspect ratios that WordPress supports at the time of
+  /// writing.
+  /// @see {https://github.com/WordPress/gutenberg/blob/208e3e2/packages/block-library/src/embed/constants.js}
+
+  &.wp-embed-aspect-21-9 .wp-block-embed__wrapper {
+    --aspect-ratio: 21/9;
+  }
+
+  &.wp-embed-aspect-18-9 .wp-block-embed__wrapper {
+    --aspect-ratio: 2;
+  }
+
+  &.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
+    --aspect-ratio: 16/9;
+  }
+
+  &.wp-embed-aspect-4-3 .wp-block-embed__wrapper {
+    --aspect-ratio: 4/3;
+  }
+
+  &.wp-embed-aspect-1-1 .wp-block-embed__wrapper {
+    --aspect-ratio: 1;
+  }
+
+  &.wp-embed-aspect-9-16 .wp-block-embed__wrapper {
+    --aspect-ratio: 9/16;
+  }
+
+  &.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
+    --aspect-ratio: 1/2;
+  }
+
+  // Apply consistent margin styles to video embeds.
+  &.is-type-video {
+    &:not(.alignwide):not(.alignfull):not(.aligncenter) {
+      @include spacing.fluid-margin-inline-negative;
+    }
+
+    // Prevent figcaption contents from hitting the viewport edge
+    &:not(.aligncenter) {
+      figcaption {
+        @include spacing.fluid-padding-inline;
+      }
+    }
+  }
+}
+
 /// Gutenberg block: Image
 /// Styles for images inserted via Gutenberg blocks.