From a857e57fcffe80c93c69ff4be6beb177eef61fcf Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Wed, 24 Aug 2022 16:37:06 -0700 Subject: [PATCH 1/8] Improved Comment Styles 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. Fixes #1997 Fixes #2021 --- .../core-element-comparison.stories.mdx | 9 +++ .../wordpress/demo/compare-comment.twig | 76 +++++++++++++++++++ src/vendor/wordpress/styles/_core-blocks.scss | 5 +- 3 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 src/vendor/wordpress/demo/compare-comment.twig diff --git a/src/vendor/wordpress/core-element-comparison.stories.mdx b/src/vendor/wordpress/core-element-comparison.stories.mdx index ee49b5388..be79c4a1e 100644 --- a/src/vendor/wordpress/core-element-comparison.stories.mdx +++ b/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'; @@ -32,3 +33,11 @@ This shows the same set of elements created using core WordPress blocks. {() => GutenbergDemo()} + +## Comments + +This shows the same set of elements created in a comment. + + + {() => CommentDemo()} + diff --git a/src/vendor/wordpress/demo/compare-comment.twig b/src/vendor/wordpress/demo/compare-comment.twig new file mode 100644 index 000000000..b138558ff --- /dev/null +++ b/src/vendor/wordpress/demo/compare-comment.twig @@ -0,0 +1,76 @@ +
+
+

Heading Level 1

+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+

+ This is a paragraph. It contains some italic text, some + bold text, some + bold and italic text, and some inline code, and a + link. +

+ 
.code-block { color: hotpink; }
+
+

Here’s a blockquote

+ with a citation +
+
    +
  • Alpha
    • +
  • + Beta +
      +
    • Beta A
      • +
    • Beta B
      • +
    +
    • +
  • Gamma
    • +
+
    +
  1. Alpha
    2. +
  2. + Beta +
      +
    1. Beta A
      2. +
    2. Beta B
      3. +
    +
    3. +
  3. Gamma
    4. +
+ + + + + + + + + + + + + + + + + +
First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell
+

Here’s an image:

+

+ Movie Poster +

+

And to wrap it all up, here’s a horizontal rule:

+
+
+
diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index c999cf460..4a75d7f7a 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -115,7 +115,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-code, .wp-block-jetpack-markdown pre, -.legacy-post pre { +.legacy-post :not(.c-comment .c-comment__content) > pre { @include spacing.fluid-margin-inline-negative; // 1 @include spacing.fluid-padding-inline; // 1 @@ -202,7 +202,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; From 8fa5b57dd14ba3b6ba0ecc7fc2010200877df531 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Wed, 24 Aug 2022 16:47:10 -0700 Subject: [PATCH 2/8] lint fix --- src/vendor/wordpress/styles/_core-blocks.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 4a75d7f7a..cc7694981 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -115,7 +115,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-code, .wp-block-jetpack-markdown pre, -.legacy-post :not(.c-comment .c-comment__content) > pre { +.legacy-post :not(.c-comment) > :not(.c-comment__content) > pre { @include spacing.fluid-margin-inline-negative; // 1 @include spacing.fluid-padding-inline; // 1 From 5e02017e4c095987043b8db9d572e43aa1a28c75 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Wed, 24 Aug 2022 16:49:45 -0700 Subject: [PATCH 3/8] Create soft-maps-grin.md --- .changeset/soft-maps-grin.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/soft-maps-grin.md diff --git a/.changeset/soft-maps-grin.md b/.changeset/soft-maps-grin.md new file mode 100644 index 000000000..215ef302b --- /dev/null +++ b/.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. From a060c5c9c0883688e5bdea6b44326dd96e42f826 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 25 Aug 2022 10:06:44 -0700 Subject: [PATCH 4/8] fix indenting --- .../wordpress/demo/compare-comment.twig | 140 +++++++++--------- 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/src/vendor/wordpress/demo/compare-comment.twig b/src/vendor/wordpress/demo/compare-comment.twig index b138558ff..de4ba4e65 100644 --- a/src/vendor/wordpress/demo/compare-comment.twig +++ b/src/vendor/wordpress/demo/compare-comment.twig @@ -3,74 +3,74 @@ style="max-width: 40rem; margin: 0 auto; padding: 0 1.25rem" >
-

Heading Level 1

-

Heading Level 2

-

Heading Level 3

-

Heading Level 4

-
Heading Level 5
-
Heading Level 6
-

- This is a paragraph. It contains some italic text, some - bold text, some - bold and italic text, and some inline code, and a - link. -

- 
.code-block { color: hotpink; }
-
-

Here’s a blockquote

- with a citation -
-
    -
  • Alpha
    • -
  • - Beta -
      -
    • Beta A
      • -
    • Beta B
      • -
    -
    • -
  • Gamma
    • -
-
    -
  1. Alpha
    2. -
  2. - Beta -
      -
    1. Beta A
      2. -
    2. Beta B
      3. -
    -
    3. -
  3. Gamma
    4. -
- - - - - - - - - - - - - - - - - -
First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell
-

Here’s an image:

-

- Movie Poster -

-

And to wrap it all up, here’s a horizontal rule:

-
-
+

Heading Level 1

+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+

+ This is a paragraph. It contains some italic text, some + bold text, some + bold and italic text, and some inline code, and a + link. +

+ 
.code-block { color: hotpink; }
+
+

Here’s a blockquote

+ with a citation +
+
    +
  • Alpha
    • +
  • + Beta +
      +
    • Beta A
      • +
    • Beta B
      • +
    +
    • +
  • Gamma
    • +
+
    +
  1. Alpha
    2. +
  2. + Beta +
      +
    1. Beta A
      2. +
    2. Beta B
      3. +
    +
    3. +
  3. Gamma
    4. +
+ + + + + + + + + + + + + + + + + +
First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell
+

Here’s an image:

+

+ Movie Poster +

+

And to wrap it all up, here’s a horizontal rule:

+
+ From 0f89d332bfdeef50c895d9a9577d9ac3b854f819 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 25 Aug 2022 10:23:09 -0700 Subject: [PATCH 5/8] better scoped selector --- src/vendor/wordpress/styles/_core-blocks.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index cc7694981..6f7aab0d3 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -115,7 +115,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-code, .wp-block-jetpack-markdown pre, -.legacy-post :not(.c-comment) > :not(.c-comment__content) > pre { +.legacy-post :not(.c-comment__content) > pre { @include spacing.fluid-margin-inline-negative; // 1 @include spacing.fluid-padding-inline; // 1 From 2a57cc9bac7f6fc8d64b311c089bb9143d1fd4f5 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 25 Aug 2022 10:28:14 -0700 Subject: [PATCH 6/8] override for comments --- src/vendor/wordpress/styles/_core-blocks.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/vendor/wordpress/styles/_core-blocks.scss b/src/vendor/wordpress/styles/_core-blocks.scss index 6f7aab0d3..cff0142c0 100644 --- a/src/vendor/wordpress/styles/_core-blocks.scss +++ b/src/vendor/wordpress/styles/_core-blocks.scss @@ -115,7 +115,7 @@ $wp-button-gap: size.$spacing-gap-button-group-default; */ .wp-block-code, .wp-block-jetpack-markdown pre, -.legacy-post :not(.c-comment__content) > pre { +.legacy-post pre { @include spacing.fluid-margin-inline-negative; // 1 @include spacing.fluid-padding-inline; // 1 @@ -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. From 91850e96b267318199dc180f2b10debb43841685 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 25 Aug 2022 10:36:43 -0700 Subject: [PATCH 7/8] fix overflow on small screens --- src/components/comment/comment.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index aeb6e6263..c02d57914 100644 --- a/src/components/comment/comment.scss +++ b/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-width: 0; // 2 } // We added default styles to the blockquote element using the `wp-block-quote` From 93bf2e68e7e02b2f8e4903db533519391ef3f1d2 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 25 Aug 2022 10:40:03 -0700 Subject: [PATCH 8/8] lint fix --- src/components/comment/comment.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/comment/comment.scss b/src/components/comment/comment.scss index c02d57914..3d373fd20 100644 --- a/src/components/comment/comment.scss +++ b/src/components/comment/comment.scss @@ -75,7 +75,7 @@ .c-comment__content { grid-area: content; margin-block-start: math.div(size.$rhythm-condensed, -4); // 1 - min-width: 0; // 2 + min-inline-size: 0; // 2 } // We added default styles to the blockquote element using the `wp-block-quote`