Add CSS for Outlined style for WP Image block (#2039)

This PR adds the styles for the new "Outlined" block style we added to
the Image block in the WordPress theme. Ideally, we would just add the
`u-border-small` class directly, but WordPress adds the class to the
outermost element — in this case, the `figure` — and we only want the
border to apply to the nested `img` element.

Fixes #862

Author: spaceninja

.changeset/five-parrots-begin.md

@@ -0,0 +1,5 @@
+---
+"@cloudfour/patterns": minor
+---
+
+Add outlined block style for WP Image block.

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

@@ -2,14 +2,6 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import blockImageDemo from './demo/image.twig';
 import blockCodeDemo from './demo/code.twig';
 import blockGroupDemo from './demo/group.twig';
-const alignmentClasses = {
-  None: '',
-  Left: 'alignleft',
-  Center: 'aligncenter',
-  Right: 'alignright',
-  Full: 'alignfull',
-  Wide: 'alignwide',
-};
 
 <Meta title="Vendor/WordPress/Core Blocks" />
 
@@ -397,12 +389,28 @@ closing wrapper tag.
     name="Image"
     argTypes={{
       alignment: {
-        options: alignmentClasses,
+        options: {
+          None: '',
+          Left: 'alignleft',
+          Center: 'aligncenter',
+          Right: 'alignright',
+          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) => blockImageDemo({ class: args.alignment })}
+    {(args) => blockImageDemo({ alignment: args.alignment, style: args.style })}
   </Story>
 </Canvas>
 

src/vendor/wordpress/demo/image.twig

@@ -3,12 +3,13 @@
   style="max-width: 40rem; margin: 0 auto; padding: 0 1.25rem"
 >
   <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</p>
-  {%
-    if class == 'alignleft' or class == 'aligncenter' or class == 'alignright'
-  %}
-    <div class="wp-block-image">
+  {% if alignment in ['alignleft', 'aligncenter', 'alignright'] %}
+    <div class="wp-block-image {{style}}">
   {% endif %}
-    <figure class="{% if class == 'alignfull' or class == 'alignwide' or class == '' %}wp-block-image {% endif %}size-large is-style-default {{class}}">
+    <figure class="
+      {% if alignment in ['alignfull', 'alignwide', ''] %}wp-block-image {{style}}{% endif %}
+      size-large {{alignment}}
+      ">
       <img
         src="/media/MtBlanc1.jpg"
         alt="Mont Blanc"
@@ -21,9 +22,7 @@
       />
       <figcaption>Mont Blanc appears—still, snowy, and serene.</figcaption>
     </figure>
-  {%
-    if class == 'alignleft' or class == 'aligncenter' or class == 'alignright'
-  %}
+  {% if alignment in ['alignleft', 'aligncenter', 'alignright'] %}
     </div>
   {% endif %}
   <p>Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

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

@@ -157,6 +157,17 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
     margin-block-start: 0; // 1
     max-inline-size: calc(50% - 0.5em); // 2
   }
+
+  /// Apply border only to image
+  ///
+  /// 1. We're using 1px borders here rather than size.$edge-small because it
+  ///    was causing subpixel rendering errors leaving a slight gap between the
+  ///    image and the border.
+  &.is-style-outlined img {
+    border-color: var(--theme-color-border-text-group);
+    border-style: solid;
+    border-width: 1px; // 1
+  }
 }
 
 /// Because WordPress changes the structure of the Image block markup depending