From fe4e25babccda5c10f76170db40118b1e7bec5a4 Mon Sep 17 00:00:00 2001 From: Tammie Lister Date: Sun, 23 Jun 2024 14:38:11 +0000 Subject: [PATCH] Twenty Twenty-One: Fixes font size difference in latest comments block. The font size was different in the last comments block depending on if it was in the editor or front. This resolves that by checking block for special font size before applying default and using inherit for nested elements. Props pitamdey, sabernhardt. Fixes #61082. Built from https://develop.svn.wordpress.org/trunk@58464 git-svn-id: http://core.svn.wordpress.org/trunk@57913 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../twentytwentyone/assets/css/ie-editor.css | 40 ++++++++++++++++++- .../themes/twentytwentyone/assets/css/ie.css | 11 +++-- .../assets/css/style-editor.css | 35 ++++++++++++++++ .../05-blocks/latest-comments/_editor.scss | 35 ++++++++++++++++ .../05-blocks/latest-comments/_style.scss | 11 +++-- .../themes/twentytwentyone/style-rtl.css | 11 +++-- wp-content/themes/twentytwentyone/style.css | 11 +++-- wp-includes/version.php | 2 +- 8 files changed, 138 insertions(+), 18 deletions(-) diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 7776f60f9f..2598c2831e 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -1000,7 +1000,45 @@ h6, padding: 20px; } -.wp-block-latest-comments, +.wp-block-latest-comments { + padding-left: 0; +} + +.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment { + font-size: 1.125rem; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + line-height: 1.7; + + /* Vertical margins logic */ + margin-top: 30px; + margin-bottom: 30px; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment:first-child { + margin-top: 0; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment-meta { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment-date { + color: inherit; + font-size: inherit; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { + font-size: inherit; + line-height: 1.7; + margin: 0; +} + .wp-block-latest-posts { padding-left: 0; } diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index 0e542687fb..a6f9bf189d 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -2495,8 +2495,11 @@ h6, padding-left: 0; } -.wp-block-latest-comments .wp-block-latest-comments__comment { +.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment { font-size: 1.125rem; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { line-height: 1.7; /* Vertical margins logic */ @@ -2517,12 +2520,12 @@ h6, } .wp-block-latest-comments .wp-block-latest-comments__comment-date { - color: #28303d; - font-size: 1.125rem; + color: inherit; + font-size: inherit; } .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { - font-size: 1.125rem; + font-size: inherit; line-height: 1.7; margin: 0; } diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 7c22719aee..341e9c7615 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -1115,6 +1115,41 @@ h6, padding-left: 0; } +.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment { + font-size: var(--global--font-size-sm); +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + line-height: var(--global--line-height-body); + + /* Vertical margins logic */ + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); +} + +.wp-block-latest-comments .wp-block-latest-comments__comment:first-child { + margin-top: 0; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment-meta { + font-family: var(--heading--font-family); +} + +.wp-block-latest-comments .wp-block-latest-comments__comment-date { + color: inherit; + font-size: inherit; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { + font-size: inherit; + line-height: var(--global--line-height-body); + margin: 0; +} + .wp-block-latest-posts { padding-left: 0; } diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss index fa7703d5e5..4285211565 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss @@ -1,3 +1,38 @@ .wp-block-latest-comments { padding-left: 0; + + &:where(:not([class*="-font-size"]):not([style*="font-size"])) .wp-block-latest-comments__comment { + font-size: var(--global--font-size-sm); + } + + .wp-block-latest-comments__comment { + line-height: var(--global--line-height-body); + + /* Vertical margins logic */ + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + .wp-block-latest-comments__comment-meta { + font-family: var(--heading--font-family); + } + + .wp-block-latest-comments__comment-date { + color: inherit; + font-size: inherit; + } + + .wp-block-latest-comments__comment-excerpt p { + font-size: inherit; + line-height: var(--global--line-height-body); + margin: 0; + } } diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss index 1ab2748656..4285211565 100644 --- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss @@ -1,8 +1,11 @@ .wp-block-latest-comments { padding-left: 0; - .wp-block-latest-comments__comment { + &:where(:not([class*="-font-size"]):not([style*="font-size"])) .wp-block-latest-comments__comment { font-size: var(--global--font-size-sm); + } + + .wp-block-latest-comments__comment { line-height: var(--global--line-height-body); /* Vertical margins logic */ @@ -23,12 +26,12 @@ } .wp-block-latest-comments__comment-date { - color: var(--global--color-primary); - font-size: var(--global--font-size-sm); + color: inherit; + font-size: inherit; } .wp-block-latest-comments__comment-excerpt p { - font-size: var(--global--font-size-sm); + font-size: inherit; line-height: var(--global--line-height-body); margin: 0; } diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css index 321f6b13e6..66d5cbad35 100644 --- a/wp-content/themes/twentytwentyone/style-rtl.css +++ b/wp-content/themes/twentytwentyone/style-rtl.css @@ -2330,8 +2330,11 @@ h6, padding-right: 0; } -.wp-block-latest-comments .wp-block-latest-comments__comment { +.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment { font-size: var(--global--font-size-sm); +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { line-height: var(--global--line-height-body); /* Vertical margins logic */ @@ -2352,12 +2355,12 @@ h6, } .wp-block-latest-comments .wp-block-latest-comments__comment-date { - color: var(--global--color-primary); - font-size: var(--global--font-size-sm); + color: inherit; + font-size: inherit; } .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { - font-size: var(--global--font-size-sm); + font-size: inherit; line-height: var(--global--line-height-body); margin: 0; } diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css index d7852e4092..11a1355a02 100644 --- a/wp-content/themes/twentytwentyone/style.css +++ b/wp-content/themes/twentytwentyone/style.css @@ -2340,8 +2340,11 @@ h6, padding-left: 0; } -.wp-block-latest-comments .wp-block-latest-comments__comment { +.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment { font-size: var(--global--font-size-sm); +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { line-height: var(--global--line-height-body); /* Vertical margins logic */ @@ -2362,12 +2365,12 @@ h6, } .wp-block-latest-comments .wp-block-latest-comments__comment-date { - color: var(--global--color-primary); - font-size: var(--global--font-size-sm); + color: inherit; + font-size: inherit; } .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { - font-size: var(--global--font-size-sm); + font-size: inherit; line-height: var(--global--line-height-body); margin: 0; } diff --git a/wp-includes/version.php b/wp-includes/version.php index e53d5c6cab..927c8c0838 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.6-beta3-58463'; +$wp_version = '6.6-beta3-58464'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.