Revise blockquote-derived styles (#2176)

Author: tylersticka

.changeset/tame-geese-provide.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': major
+---
+
+Revised `blockquote` and WordPress Quote and Pullquote block styles to address issues of consistency and improve feature support. Content that relied on previous quote styles may need to be reviewed or updated.

src/base/_defaults.scss

@@ -2,7 +2,9 @@
 @use '../compiled/tokens/scss/color';
 @use '../compiled/tokens/scss/size';
 @use '../mixins/border-radius';
+@use '../mixins/emdash';
 @use '../mixins/ms';
+@use '../mixins/spacing';
 @use '../mixins/theme';
 
 /**
@@ -235,15 +237,25 @@ blockquote {
   padding-inline-start: size.$spacing-type-block-indent;
 }
 
-/**
- * Adjacent children of blockquotes should include some default vertical rhythm.
- * We use the same design token as the `o-rhythm` pattern for consistency.
- *
- * @see https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
- */
+blockquote {
+  @include spacing.vertical-rhythm;
+  border-inline-start: size.$border-width-blockquote solid
+    var(--theme-color-border-text-group);
+  color: var(--theme-color-text-muted);
+}
 
-blockquote > * + * {
-  margin-block-start: size.$rhythm-default;
+blockquote > cite,
+blockquote > footer > cite {
+  display: block;
+  font-style: inherit;
+  padding-inline-start: size.$spacing-type-block-indent;
+  position: relative;
+
+  &::before {
+    @include emdash.content;
+    inset-inline-start: 0;
+    position: absolute;
+  }
 }
 
 /**

src/components/comment/comment.scss

@@ -2,7 +2,6 @@
 @use '../../compiled/tokens/scss/color';
 @use '../../compiled/tokens/scss/font-weight';
 @use '../../compiled/tokens/scss/size';
-@use '../../mixins/emdash';
 @use '../../mixins/headings';
 @use '../../mixins/theme';
 
@@ -78,24 +77,6 @@
   min-inline-size: 0; // 2
 }
 
-// We added default styles to the blockquote element using the `wp-block-quote`
-// class. We're applying those same styles here, so comment blockquotes look
-// the similar.
-
-.c-comment__content blockquote {
-  border-inline-start: size.$border-width-blockquote solid
-    var(--theme-color-border-kbd);
-  color: var(--theme-color-text-muted);
-}
-
-.c-comment__content blockquote cite {
-  font-style: normal;
-}
-
-.c-comment__content blockquote cite::before {
-  @include emdash.content;
-}
-
 .c-comment__footer {
   grid-area: footer;
 }

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

@@ -5,6 +5,8 @@ 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 blockQuoteDemo from './demo/quote.twig';
+import blockPullQuoteDemo from './demo/pullquote.twig';
 import blockTableDemo from './demo/table.twig';
 const blockEmbedDemoArgTypes = {
   alignment: {
@@ -531,38 +533,69 @@ class.
   </Story>
 </Canvas>
 
-## Pullquote
-
-The pullquote block wraps a `blockquote` element in a `figure` element with the class
-`wp-block-pullquote`.
+## Quote
 
-[Color controls](#color-settings) allow the setting of pre-defined or custom `background-color` and
-text `color`. A styles control adds one of two wrapper classes, `is-style-default` or
-`is-style-solid-color`. By default, any user-selected `background-color` will be
-applied only if the solid color background is toggled on.
+The quote block adds a class of `wp-block-quote` directly to a `blockquote` element. It supports background and text colors as well as text alignment, but not general alignment options. It may or may not include a citation.
 
 <Canvas>
-  <Story name="Pullquote">
-    {`<figure class="wp-block-pullquote has-background is-style-solid-color">
-        <blockquote class="has-text-color has-accent-color">
-          <p>One of the hardest things to do in technology is disrupt yourself.</p>
-          <cite>Matt Mullenweg</cite>
-        </blockquote>
-      </figure>`}
+  <Story
+    name="Quote"
+    args={{
+      show_citation: true,
+      has_background: false,
+    }}
+    argTypes={{
+      show_citation: {
+        control: { type: 'boolean' },
+      },
+      style: {
+        options: ['default', 'plain'],
+        control: { type: 'select' },
+      },
+      has_background: {
+        control: { type: 'boolean' },
+      },
+      text_align: {
+        options: ['left', 'center', 'right'],
+        control: { type: 'select' },
+      },
+    }}
+  >
+    {(args) => blockQuoteDemo(args)}
   </Story>
 </Canvas>
 
-## Quote
+## Pullquote
 
-The quote block adds class of `wp-block-quote` directly to a `blockquote` element.
-It has a control to add an optional `is-style-large` class.
+The pullquote block wraps a `blockquote` element in a `figure` element with the class
+`wp-block-pullquote`.
+
+Its visual appearance is more opinionated than the quote block, and it supports more alignment options (such as floating or breaking out of the containing element).
 
 <Canvas>
-  <Story name="Quote">
-    {`<blockquote class="wp-block-quote is-style-large">
-        <p>In quoting others, we cite ourselves.</p>
-        <cite>Julio Cortázar</cite>
-      </blockquote>`}
+  <Story
+    name="Pullquote"
+    parameters={{
+      layout: 'fullscreen',
+    }}
+    args={{
+      show_citation: true,
+    }}
+    argTypes={{
+      show_citation: {
+        control: { type: 'boolean' },
+      },
+      align: {
+        options: ['left', 'right', 'wide', 'full'],
+        control: { type: 'select' },
+      },
+      text_align: {
+        options: ['left', 'center', 'right'],
+        control: { type: 'select' },
+      },
+    }}
+  >
+    {(args) => blockPullQuoteDemo(args)}
   </Story>
 </Canvas>
 

src/vendor/wordpress/demo/pullquote.twig

@@ -0,0 +1,24 @@
+
+<div class="o-container o-container--prose o-container--pad">
+  <div class="o-container__content o-rhythm">
+    <p>
+      This content precedes the pullquote. Notice how the pullquote has more margin than usual.
+    </p>
+
+    <figure class="wp-block-pullquote
+      {% if text_align %}has-text-align-{{text_align}}{% endif %}
+      {% if align %}align{{align}}{% endif %}">
+      <blockquote>
+        <p>In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.</p>
+        {% if show_citation %}
+          <cite><a href="https://www.w3.org/TR/html-design-principles/#priority-of-constituencies">HTML Design Principles Priority of Constituencies</a></cite>
+        {% endif %}
+      </blockquote>
+    </figure>
+
+    <p>
+      This content follows the pullquote. Notice how the pullquote has more margin than usual.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+  </div>
+</div>

src/vendor/wordpress/demo/quote.twig

@@ -0,0 +1,11 @@
+<blockquote class="
+  wp-block-quote
+  {% if style %}is-style-{{style}}{% endif %}
+  {% if text_align %}has-text-align-{{text_align}}{% endif %}
+  {% if has_background %}has-gray-lighter-background-color has-background{% endif %}">
+  <p><b>CSS Grid Layout</b> excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.</p>
+  <p>Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.</p>
+  {% if show_citation %}
+    <cite><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">MDN Web Docs</a></cite>
+  {% endif %}
+</blockquote>