WordPress.org
Get WordPress

Make WordPress Core

Changeset 58464


Ignore:
Timestamp:
06/23/2024 02:36:37 PM (2 years 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:
7 edited

Legend:

Unmodified
Added
Removed

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

    r58410 r58464  
    10011001}
    10021002
    1003 .wp-block-latest-comments,
     1003.wp-block-latest-comments {
     1004        padding-left: 0;
     1005}
     1006
     1007.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
     1008        font-size: 1.125rem;
     1009}
     1010
     1011.wp-block-latest-comments .wp-block-latest-comments__comment {
     1012        line-height: 1.7;
     1013
     1014        /* Vertical margins logic */
     1015        margin-top: 30px;
     1016        margin-bottom: 30px;
     1017}
     1018
     1019.wp-block-latest-comments .wp-block-latest-comments__comment:first-child {
     1020        margin-top: 0;
     1021}
     1022
     1023.wp-block-latest-comments .wp-block-latest-comments__comment:last-child {
     1024        margin-bottom: 0;
     1025}
     1026
     1027.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
     1028        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     1029}
     1030
     1031.wp-block-latest-comments .wp-block-latest-comments__comment-date {
     1032        color: inherit;
     1033        font-size: inherit;
     1034}
     1035
     1036.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
     1037        font-size: inherit;
     1038        line-height: 1.7;
     1039        margin: 0;
     1040}
     1041
    10041042.wp-block-latest-posts {
    10051043        padding-left: 0;

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

    r58410 r58464  
    24962496}
    24972497
     2498.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
     2499        font-size: 1.125rem;
     2500}
     2501
    24982502.wp-block-latest-comments .wp-block-latest-comments__comment {
    2499         font-size: 1.125rem;
    25002503        line-height: 1.7;
    25012504
    … …  
    25182521
    25192522.wp-block-latest-comments .wp-block-latest-comments__comment-date {
    2520         color: #28303d;
    2521         font-size: 1.125rem;
     2523        color: inherit;
     2524        font-size: inherit;
    25222525}
    25232526
    25242527.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
    2525         font-size: 1.125rem;
     2528        font-size: inherit;
    25262529        line-height: 1.7;
    25272530        margin: 0;

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

    r58410 r58464  
    11161116}
    11171117
     1118.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
     1119        font-size: var(--global--font-size-sm);
     1120}
     1121
     1122.wp-block-latest-comments .wp-block-latest-comments__comment {
     1123        line-height: var(--global--line-height-body);
     1124
     1125        /* Vertical margins logic */
     1126        margin-top: var(--global--spacing-vertical);
     1127        margin-bottom: var(--global--spacing-vertical);
     1128}
     1129
     1130.wp-block-latest-comments .wp-block-latest-comments__comment:first-child {
     1131        margin-top: 0;
     1132}
     1133
     1134.wp-block-latest-comments .wp-block-latest-comments__comment:last-child {
     1135        margin-bottom: 0;
     1136}
     1137
     1138.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
     1139        font-family: var(--heading--font-family);
     1140}
     1141
     1142.wp-block-latest-comments .wp-block-latest-comments__comment-date {
     1143        color: inherit;
     1144        font-size: inherit;
     1145}
     1146
     1147.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
     1148        font-size: inherit;
     1149        line-height: var(--global--line-height-body);
     1150        margin: 0;
     1151}
     1152
    11181153.wp-block-latest-posts {
    11191154        padding-left: 0;

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

    r49574 r58464  
    11.wp-block-latest-comments {
    22        padding-left: 0;
     3
     4        &:where(:not([class*="-font-size"]):not([style*="font-size"])) .wp-block-latest-comments__comment {
     5                font-size: var(--global--font-size-sm);
     6        }
     7
     8        .wp-block-latest-comments__comment {
     9                line-height: var(--global--line-height-body);
     10
     11                /* Vertical margins logic */
     12                margin-top: var(--global--spacing-vertical);
     13                margin-bottom: var(--global--spacing-vertical);
     14
     15                &:first-child {
     16                        margin-top: 0;
     17                }
     18
     19                &:last-child {
     20                        margin-bottom: 0;
     21                }
     22        }
     23
     24        .wp-block-latest-comments__comment-meta {
     25                font-family: var(--heading--font-family);
     26        }
     27
     28        .wp-block-latest-comments__comment-date {
     29                color: inherit;
     30                font-size: inherit;
     31        }
     32
     33        .wp-block-latest-comments__comment-excerpt p {
     34                font-size: inherit;
     35                line-height: var(--global--line-height-body);
     36                margin: 0;
     37        }
    338}

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

    r49574 r58464  
    22        padding-left: 0;
    33
     4        &:where(:not([class*="-font-size"]):not([style*="font-size"])) .wp-block-latest-comments__comment {
     5                font-size: var(--global--font-size-sm);
     6        }
     7
    48        .wp-block-latest-comments__comment {
    5                 font-size: var(--global--font-size-sm);
    69                line-height: var(--global--line-height-body);
    710
    … …  
    2427
    2528        .wp-block-latest-comments__comment-date {
    26                 color: var(--global--color-primary);
    27                 font-size: var(--global--font-size-sm);
     29                color: inherit;
     30                font-size: inherit;
    2831        }
    2932
    3033        .wp-block-latest-comments__comment-excerpt p {
    31                 font-size: var(--global--font-size-sm);
     34                font-size: inherit;
    3235                line-height: var(--global--line-height-body);
    3336                margin: 0;

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

    r58410 r58464  
    23312331}
    23322332
     2333.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
     2334        font-size: var(--global--font-size-sm);
     2335}
     2336
    23332337.wp-block-latest-comments .wp-block-latest-comments__comment {
    2334         font-size: var(--global--font-size-sm);
    23352338        line-height: var(--global--line-height-body);
    23362339
    … …  
    23532356
    23542357.wp-block-latest-comments .wp-block-latest-comments__comment-date {
    2355         color: var(--global--color-primary);
    2356         font-size: var(--global--font-size-sm);
     2358        color: inherit;
     2359        font-size: inherit;
    23572360}
    23582361
    23592362.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
    2360         font-size: var(--global--font-size-sm);
     2363        font-size: inherit;
    23612364        line-height: var(--global--line-height-body);
    23622365        margin: 0;

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

    r58410 r58464  
    23412341}
    23422342
     2343.wp-block-latest-comments:where(:not([class*=-font-size]):not([style*=font-size])) .wp-block-latest-comments__comment {
     2344        font-size: var(--global--font-size-sm);
     2345}
     2346
    23432347.wp-block-latest-comments .wp-block-latest-comments__comment {
    2344         font-size: var(--global--font-size-sm);
    23452348        line-height: var(--global--line-height-body);
    23462349
    … …  
    23632366
    23642367.wp-block-latest-comments .wp-block-latest-comments__comment-date {
    2365         color: var(--global--color-primary);
    2366         font-size: var(--global--font-size-sm);
     2368        color: inherit;
     2369        font-size: inherit;
    23672370}
    23682371
    23692372.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
    2370         font-size: var(--global--font-size-sm);
     2373        font-size: inherit;
    23712374        line-height: var(--global--line-height-body);
    23722375        margin: 0;
Note: See TracChangeset for help on using the changeset viewer.