WordPress.org
Get WordPress

Make WordPress Core

Changeset 58464


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