Improved Comment Styles

.changeset/soft-maps-grin.md

@@ -0,0 +1,7 @@
+---
+"@cloudfour/patterns": patch
+---
+
+Improved comment styles:
+- Applying table styles to tables in comments.
+- Removing outdenting from code blocks in comments on legacy posts.

src/components/comment/comment.scss

@@ -71,9 +71,11 @@
 
 /// 1. The fluid heading size changes depending on the viewport, but the content
 ///    always looks just a *tad* close to the header. This offsets that.
+/// 2. Allow grid cells to shrink when contents are wider than available space.
 .c-comment__content {
   grid-area: content;
   margin-block-start: math.div(size.$rhythm-condensed, -4); // 1
+  min-inline-size: 0; // 2
 }
 
 // We added default styles to the blockquote element using the `wp-block-quote`

src/vendor/wordpress/core-element-comparison.stories.mdx

@@ -2,6 +2,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import MarkdownDemo from './demo/compare-markdown.twig';
 import HTMLDemo from './demo/compare-html.twig';
 import GutenbergDemo from './demo/compare-gutenberg.twig';
+import CommentDemo from './demo/compare-comment.twig';
 
 <Meta title="Vendor/WordPress/Core Element Comparison" />
 
@@ -32,3 +33,11 @@ This shows the same set of elements created using core WordPress blocks.
 <Canvas>
   <Story name="Gutenberg">{() => GutenbergDemo()}</Story>
 </Canvas>
+
+## Comments
+
+This shows the same set of elements created in a comment.
+
+<Canvas>
+  <Story name="Comments">{() => CommentDemo()}</Story>
+</Canvas>

src/vendor/wordpress/demo/compare-comment.twig

@@ -0,0 +1,76 @@
+<div
+  class="demo-container c-comment"
+  style="max-width: 40rem; margin: 0 auto; padding: 0 1.25rem"
+>
+  <div class="o-rhythm c-comment__content o-rhythm--condensed">
+    <h1>Heading Level 1</h1>
+    <h2>Heading Level 2</h2>
+    <h3>Heading Level 3</h3>
+    <h4>Heading Level 4</h4>
+    <h5>Heading Level 5</h5>
+    <h6>Heading Level 6</h6>
+    <p>
+      This is a paragraph. It contains some <em>italic text</em>, some
+      <strong>bold text</strong>, some
+      <em><strong>bold and italic text</strong></em
+      >, and some inline <code>code</code>, and a
+      <a href="https://example.com">link</a>.
+    </p>
+    <pre
+      class="language-css"
+    ><code class="language-css">.code-block { color: hotpink; }</code></pre>
+    <blockquote>
+      <p>Here’s a blockquote</p>
+      <cite>with a citation</cite>
+    </blockquote>
+    <ul>
+      <li>Alpha</li>
+      <li>
+        Beta
+        <ul>
+          <li>Beta A</li>
+          <li>Beta B</li>
+        </ul>
+      </li>
+      <li>Gamma</li>
+    </ul>
+    <ol>
+      <li>Alpha</li>
+      <li>
+        Beta
+        <ol>
+          <li>Beta A</li>
+          <li>Beta B</li>
+        </ol>
+      </li>
+      <li>Gamma</li>
+    </ol>
+    <table>
+      <thead>
+        <tr>
+          <th>First Header</th>
+          <th>Second Header</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Content Cell</td>
+          <td>Content Cell</td>
+        </tr>
+        <tr>
+          <td>Content Cell</td>
+          <td>Content Cell</td>
+        </tr>
+      </tbody>
+    </table>
+    <p>Here’s an image:</p>
+    <p>
+      <img
+        src="https://api.lorem.space/image/movie?w=150&amp;h=220&amp;t=1"
+        alt="Movie Poster"
+      />
+    </p>
+    <p>And to wrap it all up, here’s a horizontal rule:</p>
+    <hr />
+  </div>
+</div>

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

@@ -124,6 +124,12 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
   }
 }
 
+// Don't outdent code blocks in comments, where spacing is at a premium.
+.c-comment pre {
+  margin-inline: 0;
+  padding-inline: ms.step(1); // restoring default padding
+}
+
 /// Gutenberg block: Image
 /// Styles for images inserted via Gutenberg blocks.
 
@@ -202,7 +208,8 @@ figure.wp-block-image {
  */
 .wp-block-table,
 .wp-block-jetpack-markdown,
-.legacy-post {
+.legacy-post,
+.c-comment {
   table td,
   table th {
     @include table.t-container;