Changeset 58464

Timestamp:

06/23/2024 02:36:37 PM (3 months ago)

Author:

karmatosed

Message:

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.

Location:

trunk/src/wp-content/themes/twentytwentyone

Files:

• assets/css/ie-editor.css (modified) (1 diff)
• assets/css/ie.css (modified) (2 diffs)
• assets/css/style-editor.css (modified) (1 diff)
• assets/sass/05-blocks/latest-comments/_editor.scss (modified) (1 diff)
• assets/sass/05-blocks/latest-comments/_style.scss (modified) (2 diffs)
• style-rtl.css (modified) (2 diffs)
• style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

@@ -1001 +1001 @@
 }
 
-.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;

trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

@@ -2496 +2496 @@
 }
 
+
+
+
+
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-    font-size: 1.125rem;
     line-height: 1.7;
 
@@ -2518 +2521 @@
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-    color: #28303d;
-    font-size: 1.125rem;
+    color: ;
+    font-size: ;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-    font-size: 1.125rem;
+    font-size: ;
     line-height: 1.7;
     margin: 0;

trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

@@ -1116 +1116 @@
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 .wp-block-latest-posts {
     padding-left: 0;

trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss

@@ -1 +1 @@
 .wp-block-latest-comments {
     padding-left: 0;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 }

trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss

@@ -2 +2 @@
     padding-left: 0;
 
+
+
+
+
     .wp-block-latest-comments__comment {
-        font-size: var(--global--font-size-sm);
         line-height: var(--global--line-height-body);
 
@@ -24 +27 @@
 
     .wp-block-latest-comments__comment-date {
-        color: var(--global--color-primary);
-        font-size: var(--global--font-size-sm);
+        color: ;
+        font-size: ;
     }
 
     .wp-block-latest-comments__comment-excerpt p {
-        font-size: var(--global--font-size-sm);
+        font-size: ;
         line-height: var(--global--line-height-body);
         margin: 0;

trunk/src/wp-content/themes/twentytwentyone/style-rtl.css

@@ -2331 +2331 @@
 }
 
+
+
+
+
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-    font-size: var(--global--font-size-sm);
     line-height: var(--global--line-height-body);
 
@@ -2353 +2356 @@
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-    color: var(--global--color-primary);
-    font-size: var(--global--font-size-sm);
+    color: ;
+    font-size: ;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-    font-size: var(--global--font-size-sm);
+    font-size: ;
     line-height: var(--global--line-height-body);
     margin: 0;

trunk/src/wp-content/themes/twentytwentyone/style.css

@@ -2341 +2341 @@
 }
 
+
+
+
+
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-    font-size: var(--global--font-size-sm);
     line-height: var(--global--line-height-body);
 
@@ -2363 +2366 @@
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
-    color: var(--global--color-primary);
-    font-size: var(--global--font-size-sm);
+    color: ;
+    font-size: ;
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
-    font-size: var(--global--font-size-sm);
+    font-size: ;
     line-height: var(--global--line-height-body);
     margin: 0;