Improved Comment Styles

[spaceninja]

Overview

This PR updates some of the core block styles to better match base
element styles between posts and comments. Specifically:

1. Applying table styles to tables in comments.
2. Removing outdenting from code blocks in comments on legacy posts.

Screenshots

Testing

1. On the preview deploy, go to the Vendor > WordPress > Core Element Comparison > Comments page.
2. Confirm that the table has the base table styles applied (border under the thead)
3. Confirm that the code block is not outdented.
4. View source, add the legacy-post class to the #root element.
5. Confirm that the code block is still not outdented. (previously, legacy-post would do this)

---

• Fixes Code blocks in comments have too much negative margin #1997
• Fixes Tables in comments are unstyled #2021

[changeset-bot]

🦋 Changeset detected

Latest commit: 93bf2e6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for cloudfour-patterns ready!

Name	Link
🔨 Latest commit	93bf2e6
🔍 Latest deploy log	https://app.netlify.com/sites/cloudfour-patterns/deploys/6307b3f98e19c00009bdbdc4
😎 Deploy Preview	https://deploy-preview-2022--cloudfour-patterns.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[gerardo-rodriguez]

Left one nit comment, LGTM otherwise! 🎉

[Paul-Hebert]

I'm trying to make sure I understand this:

1. Target pre elements
2. That are the direct child of an element that's not .c-comment__content
3. As long as that parent element is not the direct child of .c-comment

A couple of questions:

1. Is that third rule necessary? Could this line be switched to .legacy-post :not(.c-comment__content) > pre?
2. Will our legacy posts always have pre elements nested deeply enough for this to work? (a.k.a will there always be two layers of elements in between .legacy-post and the pre we want to style?

[spaceninja]

1. Good point — I can drop the :not(.c-comment) > part of the selector.

2. Yeah, should be — legacy-post is applied to the outermost o-container__content, and pre elements will either be part of a blog post or a comment, and in both cases nested deeper in the DOM from that point.

[Paul-Hebert]

Cool, I just had one other thought about a potential edge case. Would this break if the pre was nested deeper within a comment. For example, imagine the following comment:

> You wrote this code:
>
> ```js
> console.log('boop');
> ```
>
> I think you meant `beep`

In this scenario the pre would not be a direct child of .c-comment__content so wouldn't get the correct styles.

This is a total edge case but it makes me wonder if it would be safer to just un-set the relevant styles when a pre is in a comment?

.c-comment pre {
  margin-inline: 0;
  padding-inline: 0;
}

[spaceninja]

☹️ Yeah, good call. I'll update.

[Paul-Hebert]

LGTM!