Add wp-block-video alignment options (#1930)

Author: tylersticka

.changeset/smooth-owls-try.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Make default, center, full and wide alignment options consistent between WordPress image and video blocks

src/vendor/wordpress/demo/alignment.twig

@@ -35,6 +35,13 @@
     {% if extra_div %}
       </div>
     {% endif %}
+    <p>
+      Another ordinary paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at sapien porttitor risus blandit posuere. Sed in malesuada ligula. Nam vulputate metus sed nibh vulputate, sed varius neque tincidunt.
+    </p>
+    <figure class="wp-block-video {{alignment}}">
+      <video controls src="/media/waterfall_edit.mp4"></video>
+      <figcaption>This WordPress Video Block with a caption has <b>{{alignment|default('no')|replace({'align': ''})}} alignment</b>!</figcaption>
+    </figure>
     <p>
       One more ordinary paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at sapien porttitor risus blandit posuere. Sed in malesuada ligula. Nam vulputate metus sed nibh vulputate, sed varius neque tincidunt.
     </p>

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

@@ -174,6 +174,20 @@ figure.wp-block-image {
   }
 }
 
+/// Gutenberg block: Video
+/// Styles for videos inserted via Gutenberg blocks.
+.wp-block-video {
+  &:not(.alignwide, .alignfull, .aligncenter) {
+    @include spacing.fluid-margin-inline-negative;
+  }
+
+  &:not(.aligncenter) {
+    figcaption {
+      @include spacing.fluid-padding-inline;
+    }
+  }
+}
+
 /**
  * Gutenberg block: Table
  * Applies our pattern library styles to tables generated via Gutenberg blocks.

src/vendor/wordpress/utilities.stories.mdx

@@ -87,14 +87,14 @@ We include `has-{font-size}-font-size` classes for our `big`, `small` and headin
 
 By default, blocks with backgrounds and image blocks will attempt to fill the available inline padding of [our containers](/docs/objects-container--basic). You can opt into different alignment options for certain blocks.
 
-| WordPress Class | Behavior                                  | Blocks                                     |
-| --------------- | ----------------------------------------- | ------------------------------------------ |
-| (None)          | Fill available inline padding             | Code, Image, blocks with background colors |
-| `aligncenter`   | Stay within the container (do not fill)   | Image, blocks with background colors       |
-| `alignleft`     | Float left, constrain inline size         | Image                                      |
-| `alignright`    | Float right, constrain inline size        | Image                                      |
-| `alignfull`     | Fill viewport inline size                 | Blocks with alignment options              |
-| `alignwide`     | Fill viewport inline size up to a maximum | Blocks with alignment options              |
+| WordPress Class | Behavior                                  | Blocks                                            |
+| --------------- | ----------------------------------------- | ------------------------------------------------- |
+| (None)          | Fill available inline padding             | Code, Image, Video, blocks with background colors |
+| `aligncenter`   | Stay within the container (do not fill)   | Image, Video, blocks with background colors       |
+| `alignleft`     | Float left, constrain inline size         | Image                                             |
+| `alignright`    | Float right, constrain inline size        | Image                                             |
+| `alignfull`     | Fill viewport inline size                 | Blocks with alignment options                     |
+| `alignwide`     | Fill viewport inline size up to a maximum | Blocks with alignment options                     |
 
 <Canvas>
   <Story