WordPress.org
Get WordPress

Make WordPress Core

Changeset 49320


Ignore:
Timestamp:
10/27/2020 01:58:37 AM (4 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Import the latest changes for 5.6 beta 2.

For a full list of changes since beta 1, see ​https://github.com/WordPress/twentytwentyone/compare/9e34dca...e580895.

Props poena, melchoyce, luminuu, aristath, justinahinon, jffng, ryelle, kishanjasani, rolfsiebers.
See #51526.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
1 added
1 deleted
15 edited

Legend:

Unmodified
Added
Removed

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

    r49247 r49320  
    3131}
    3232
    33 /* OS dark theme preference */
    34 @media (prefers-color-scheme: dark) {
    35     html.respect-color-scheme-preference body {
    36         background-color: #28303d;
    37     }
    38     @media (prefers-color-scheme: dark){
    39         html.respect-color-scheme-preference body{
    40         background-color: #28303d;
    41         }
    42     }
    43 }
    44 
    4533/* Button extends */
    4634.wp-block-button__link {
    … …  
    481469.wp-block-code code {
    482470    font-size: 1rem;
     471    white-space: pre !important;
     472    overflow-x: auto;
    483473}
    484474
    … …  
    489479    border-width: 0.1rem;
    490480    padding: 20px;
     481    color: currentColor;
    491482}
    492483
    … …  
    15521543}
    15531544
     1545pre.wp-block-preformatted {
     1546    overflow-x: auto;
     1547    white-space: pre !important;
     1548    font-size: 1rem;
     1549}
     1550
    15541551.wp-block-pullquote {
    15551552    padding: 40px 0;
    1556     margin-left: 0;
    1557     margin-right: 0;
    15581553    text-align: center;
    15591554    border-width: 3px;
    … …  
    16171612
    16181613.wp-block-pullquote.is-style-solid-color {
     1614    margin-left: auto;
     1615    margin-right: auto;
    16191616    padding: 50px;
    16201617    border-width: 3px;
    … …  
    20122009    background-color: #39414d;
    20132010    color: #d1e4dd;
     2011}
     2012
     2013.wp-block[data-align="center"] > * {
     2014    text-align: center;
     2015}
     2016
     2017.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper {
     2018    justify-content: center;
    20142019}
    20152020
    … …  
    22292234}
    22302235
     2236.wp-block-tag-cloud.aligncenter {
     2237    text-align: center;
     2238}
     2239
    22312240pre.wp-block-verse {
    22322241    padding: 0;

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

    r49247 r49320  
    1111Version: 1.0.0
    1212License: GNU General Public License v2 or later
    13 License URI: LICENSE
     13License URI: http://www.gnu.org/licenses/gpl-2.0.html
    1414Text Domain: twentytwentyone
    1515Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
    … …  
    123123}
    124124
    125 /* OS dark theme preference */
    126 @media (prefers-color-scheme: dark) {
    127     html.respect-color-scheme-preference body {
    128         background-color: #28303d;
    129     }
    130     @media (prefers-color-scheme: dark){
    131         html.respect-color-scheme-preference body{
    132         background-color: #28303d;
    133         }
    134     }
    135 }
    136 
    137125/* Button extends */
    138126.site .button {
    … …  
    18011789}
    18021790
     1791input[type="email"],
     1792input[type="url"] {
     1793    /*rtl:ignore*/
     1794    direction: ltr;
     1795}
     1796
    18031797select {
    18041798    border: 3px solid #39414d;
    … …  
    19971991}
    19981992
     1993fieldset {
     1994    display: grid;
     1995    border-color: #39414d;
     1996    padding: 25px;
     1997}
     1998
     1999fieldset legend {
     2000    font-size: 1.5rem;
     2001}
     2002
     2003fieldset input[type="submit"] {
     2004    max-width: max-content;
     2005}
     2006
     2007fieldset input:not([type="submit"]) {
     2008    margin-bottom: 20px;
     2009}
     2010
     2011fieldset input[type="radio"], fieldset input[type="checkbox"] {
     2012    margin-bottom: 0;
     2013}
     2014
     2015fieldset input[type="radio"] + label {
     2016    font-size: 1.125rem;
     2017    padding-left: 0;
     2018    margin-bottom: 20px;
     2019}
     2020
     2021fieldset input[type="checkbox"] + label {
     2022    font-size: 1.125rem;
     2023    padding-left: 0;
     2024    margin-bottom: 20px;
     2025}
     2026
    19992027img {
    20002028    display: block;
    … …  
    20772105
    20782106pre {
    2079     white-space: pre-wrap;
     2107    white-space: pre;
     2108    overflow-x: auto;
    20802109}
    20812110
    … …  
    22252254.wp-block-code code {
    22262255    font-size: 1rem;
    2227     overflow: auto;
     2256    white-space: pre;
     2257    overflow-x: auto;
     2258    display: block;
    22282259}
    22292260
    … …  
    22692300}
    22702301
     2302.wp-block-columns.is-style-twentytwentyone-columns-overlap {
     2303    justify-content: space-around;
     2304}
     2305
    22712306@media only screen and (min-width: 652px) {
    2272     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
    2273         flex-grow: 1;
    2274     }
    22752307    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    22762308        margin-left: -50px;
    … …  
    34903522        margin-left: 10px;
    34913523    }
     3524}
     3525
     3526pre.wp-block-preformatted {
     3527    overflow-x: auto;
     3528    white-space: pre;
    34923529}
    34933530
    … …  
    40234060}
    40244061
     4062.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     4063    background-color: #fff;
     4064}
     4065
     4066.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
     4067    justify-content: center;
     4068}
     4069
    40254070.wp-block-search .wp-block-search__label {
    40264071    font-size: 1.125rem;
    … …  
    40374082    margin-right: -3px;
    40384083    padding: 10px;
     4084    background-color: #fff;
    40394085}
    40404086
    … …  
    42794325.wp-calendar-nav .wp-calendar-nav-next {
    42804326    float: right;
     4327}
     4328
     4329.wp-block-tag-cloud.alignfull {
     4330    padding-left: 20px;
     4331    padding-right: 20px;
    42814332}
    42824333
    … …  
    48854936
    48864937.page-links .post-page-numbers {
     4938    display: inline-block;
    48874939    margin-left: 13px;
    48884940    margin-right: 13px;
    4889     padding: 10px 0;
     4941    min-width: 44px;
     4942    min-height: 44px;
    48904943}
    48914944
    … …  
    49605013}
    49615014
    4962 .entry-content .more-link:hover {
    4963     text-decoration: none;
    4964 }
    4965 
    49665015.entry-content > iframe[style] {
    49675016    margin: 30px 0 !important;
    … …  
    49815030    font-size: 1rem;
    49825031    display: block;
     5032}
     5033
     5034.entry-footer > span {
     5035    display: inline-block;
    49835036}
    49845037
    … …  
    52375290.blog .format-video .entry-content {
    52385291    margin-top: 60px;
     5292}
     5293
     5294.archive .entry-footer .cat-links,
     5295.archive .entry-footer .tags-links,
     5296.search .entry-footer .cat-links,
     5297.search .entry-footer .tags-links,
     5298.blog .entry-footer .cat-links,
     5299.blog .entry-footer .tags-links {
     5300    display: block;
    52395301}
    52405302
    … …  
    56955757    padding-bottom: 25px;
    56965758    background-color: #d1e4dd;
    5697     overflow-x: hidden;
    5698     overflow-y: auto;
    56995759    transition: all .15s ease-in-out;
    57005760    transform: translateY(30px);
    … …  
    57055765        height: 100vh;
    57065766        z-index: 499;
     5767        overflow-x: hidden;
     5768        overflow-y: auto;
    57075769        border: 2px solid transparent;
    57085770    }
    … …  
    57645826        display: none;
    57655827    }
    5766     .primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
     5828    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
    57675829        display: none;
    57685830    }
    … …  
    58545916}
    58555917
    5856 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
    5857     display: flex;
    5858 }
    5859 
    5860 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
    5861     display: none;
    5862 }
    5863 
    58645918.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    58655919    position: relative;
    … …  
    61236177}
    61246178
     6179.navigation .nav-links > * {
     6180    min-width: 44px;
     6181    min-height: 44px;
     6182}
     6183
    61256184.navigation .nav-links .nav-next a,
    61266185.navigation .nav-links .nav-previous a {
    … …  
    62706329}
    62716330
    6272 @media (prefers-color-scheme: dark){
    6273     .pagination .nav-links > *{
    6274     color: #f0f0f0;
    6275     }
    6276 }
    6277 
    62786331.comments-pagination .nav-links > * {
    62796332    color: #28303d;
    … …  
    62856338}
    62866339
    6287 @media (prefers-color-scheme: dark){
    6288     .comments-pagination .nav-links > *{
    6289     color: #f0f0f0;
    6290     }
    6291 }
    6292 
    62936340.pagination .nav-links > *.current {
    62946341    border-bottom: 1px solid #28303d;
    … …  
    63686415}
    63696416
    6370 @media only screen and (min-width: 822px) {
     6417@media only screen and (min-width: 652px) {
    63716418    .widget-area {
    63726419        display: grid;
     6420        grid-template-columns: repeat(2, 1fr);
     6421        column-gap: 50px;
     6422    }
     6423}
     6424
     6425@media only screen and (min-width: 1024px) {
     6426    .widget-area {
    63736427        grid-template-columns: repeat(3, 1fr);
    6374         column-gap: 50px;
    63756428    }
    63766429}
    … …  
    67386791    max-width: none;
    67396792}
     6793
     6794.is-IE.has-background-dark {
     6795    color: #fff;
     6796}
     6797
     6798.is-IE.has-background-dark *,
     6799.is-IE.has-background-dark a,
     6800.is-IE.has-background-dark .site-description,
     6801.is-IE.has-background-dark .entry-title,
     6802.is-IE.has-background-dark .entry-footer,
     6803.is-IE.has-background-dark .widget-area,
     6804.is-IE.has-background-dark .post-navigation .meta-nav,
     6805.is-IE.has-background-dark .footer-navigation-wrapper li a:link,
     6806.is-IE.has-background-dark .site-footer > .site-info,
     6807.is-IE.has-background-dark .site-footer > .site-info a,
     6808.is-IE.has-background-dark .site-footer > .site-info a:visited {
     6809    color: #fff;
     6810}
     6811
     6812.is-IE.has-background-dark .sub-menu-toggle svg,
     6813.is-IE.has-background-dark .sub-menu-toggle path,
     6814.is-IE.has-background-dark .post-navigation .meta-nav svg,
     6815.is-IE.has-background-dark .post-navigation .meta-nav path {
     6816    fill: #fff;
     6817}
     6818
     6819.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
     6820    background: #000;
     6821}
     6822
     6823@media only screen and (max-width: 481px) {
     6824    .is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container,
     6825    .is-IE.has-background-dark.primary-navigation-open .menu-button-container {
     6826        background-color: #000;
     6827    }
     6828}
     6829
     6830.is-IE.has-background-dark .skip-link:focus {
     6831    color: #21759b;
     6832}
    67406833/*# sourceMappingURL=ie.css.map */

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

    r49247 r49320  
    209209}
    210210
    211 /* OS dark theme preference */
    212 @media (prefers-color-scheme: dark) {
    213     html.respect-color-scheme-preference {
    214         --global--color-background: var(--global--color-dark-gray);
    215         --global--color-primary: var(--global--color-light-gray);
    216         --global--color-secondary: var(--global--color-light-gray);
    217         --button--color-text: var(--global--color-background);
    218         --button--color-text-hover: var(--global--color-secondary);
    219         --button--color-text-active: var(--global--color-secondary);
    220         --button--color-background: var(--global--color-secondary);
    221         --button--color-background-active: var(--global--color-background);
    222     }
    223     html.respect-color-scheme-preference body {
    224         background-color: var(--global--color-background);
    225     }
    226 }
    227 
    228211/* Button extends */
    229212.wp-block-button__link, .wp-block-file .wp-block-file__button, .wp-block-search .wp-block-search__button {
    … …  
    527510.wp-block-code code {
    528511    font-size: var(--global--font-size-xs);
     512    white-space: pre !important;
     513    overflow-x: auto;
    529514}
    530515
    … …  
    535520    border-width: 0.1rem;
    536521    padding: var(--global--spacing-unit);
     522    color: currentColor;
    537523}
    538524
    … …  
    11081094}
    11091095
     1096pre.wp-block-preformatted {
     1097    overflow-x: auto;
     1098    white-space: pre !important;
     1099    font-size: var(--global--font-size-xs);
     1100}
     1101
    11101102.wp-block-pullquote {
    11111103    padding: calc(2 * var(--global--spacing-unit)) 0;
    1112     margin-left: 0;
    1113     margin-right: 0;
    11141104    text-align: center;
    11151105    border-width: var(--pullquote--border-width);
    … …  
    11571147
    11581148.wp-block-pullquote.is-style-solid-color {
     1149    margin-left: auto;
     1150    margin-right: auto;
    11591151    padding: calc(2.5 * var(--global--spacing-unit));
    11601152    border-width: var(--pullquote--border-width);
    … …  
    14621454    background-color: var(--button--color-background);
    14631455    color: var(--button--color-text);
     1456}
     1457
     1458.wp-block[data-align="center"] > * {
     1459    text-align: center;
     1460}
     1461
     1462.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper {
     1463    justify-content: center;
    14641464}
    14651465
    … …  
    16191619}
    16201620
     1621.wp-block-tag-cloud.aligncenter {
     1622    text-align: center;
     1623}
     1624
    16211625pre.wp-block-verse {
    16221626    padding: 0;

  • trunk/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js

    r49216 r49320  
    4646            // Modify the body class depending on whether this is a dark background or not.
    4747            if ( isDark ) {
    48                 if ( ! document.body.classList.contains( 'is-background-dark' ) ) {
    49                     document.body.classList.add( 'is-background-dark' );
     48                if ( ! document.body.classList.contains( 'has-background-dark' ) ) {
     49                    document.body.classList.add( 'has-background-dark' );
    5050                }
    5151            } else {
    52                 document.body.classList.remove( 'is-background-dark' );
     52                document.body.classList.remove( 'has-background-dark' );
    5353            }
    5454

  • trunk/src/wp-content/themes/twentytwentyone/assets/js/polyfills.js

    r49216 r49320  
    11/**
    2  * File primary-navigation.js.
     2 * File polyfills.js.
    33 *
    4  * Required to open and close the mobile navigation.
     4 * Polyfills for IE11.
    55 */
    66

  • trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js

    r49250 r49320  
    4040 */
    4141function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
    42     // Close submenu that was opened from a hover action.
    43     // We'll return early in this case to avoid changing the aria-expanded attribute.
    44     if ( el.parentNode.classList.contains( 'hover' ) ) {
    45         el.parentNode.classList.remove( 'hover' );
    46         return;
    47     }
    48 
    4942    // Close other expanded items.
    5043    el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
    … …  
    131124        document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
    132125            li.addEventListener( 'mouseenter', function() {
    133                 if ( 'false' === this.querySelector( '.sub-menu-toggle' ).getAttribute( 'aria-expanded' ) ) {
    134                     this.classList.add( 'hover' );
    135                 }
     126                this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );
    136127            } );
    137128            li.addEventListener( 'mouseleave', function() {
    138                 this.classList.remove( 'hover' );
     129                this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'false' );
    139130            } );
    140131        } );

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php

    r49247 r49320  
    121121            wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
    122122        }
    123 
    124         $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true ); // @phpstan-ignore-line. Passing true instead of default value of false to get_theme_mod.
    125         if ( $should_respect_color_scheme && self::get_relative_luminance_from_hex( $background_color ) > 127 ) {
    126             // Add dark mode variable overrides.
    127             wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', '@media (prefers-color-scheme: dark) { :root .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); } }' );
    128         }
    129123    }
    130124
    … …  
    176170        $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
    177171        if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) {
    178             $classes[] = 'is-background-dark';
     172            $classes[] = 'has-background-dark';
    179173        } else {
    180             $classes[] = 'is-background-light';
     174            $classes[] = 'has-background-light';
    181175        }
    182176

  • trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php

    r49247 r49320  
    147147                )
    148148            );
    149 
    150             $wp_customize->add_setting(
    151                 'respect_user_color_preference',
    152                 array(
    153                     'capability'        => 'edit_theme_options',
    154                     'default'           => true,
    155                     'sanitize_callback' => function( $value ) {
    156                         return (bool) $value;
    157                     },
    158                 )
    159             );
    160 
    161             $wp_customize->add_control(
    162                 'respect_user_color_preference',
    163                 array(
    164                     'type'            => 'checkbox',
    165                     'section'         => 'colors',
    166                     'label'           => esc_html__( 'Respect visitor\'s device dark mode settings', 'twentytwentyone' ),
    167                     'description'     => __( 'Dark mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text.', 'twentytwentyone' ),
    168                     'active_callback' => function( $value ) {
    169                         return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
    170                     },
    171                 )
    172             );
    173149        }
    174150

  • trunk/src/wp-content/themes/twentytwentyone/comments.php

    r49247 r49320  
    3333        <h2 class="comments-title">
    3434            <?php if ( '1' === $twenty_twenty_one_comment_count ) : ?>
    35                 <?php esc_html_e( '1 Reply', 'twentytwentyone' ); ?>
     35                <?php esc_html_e( '1 Comment', 'twentytwentyone' ); ?>
    3636            <?php else : ?>
    3737                <?php
    3838                printf(
    3939                    /* translators: %s: comment count number. */
    40                     esc_html( _nx( '%s Reply', '%s Replies', $twenty_twenty_one_comment_count, 'comments title', 'twentytwentyone' ) ),
     40                    esc_html( _nx( '%s Comment', '%s Comments', $twenty_twenty_one_comment_count, 'comments title', 'twentytwentyone' ) ),
    4141                    esc_html( number_format_i18n( $twenty_twenty_one_comment_count ) )
    4242                );
    … …  
    8686        array(
    8787            'logged_in_as'       => null,
    88             'title_reply'        => esc_html__( 'Leave a reply', 'twentytwentyone' ),
     88            'title_reply'        => esc_html__( 'Leave a comment', 'twentytwentyone' ),
    8989            'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
    9090            'title_reply_after'  => '</h2>',

  • trunk/src/wp-content/themes/twentytwentyone/functions.php

    r49247 r49320  
    337337
    338338        // Add support for custom units.
     339        // This was removed in WordPress 5.6 but is still required to properly support WP 5.5.
    339340        add_theme_support( 'custom-units' );
    340341    }
    … …  
    416417    }
    417418
     419    wp_register_script(
     420        'twenty-twenty-one-ie11-polyfills',
     421        get_template_directory_uri() . '/assets/js/polyfills.js',
     422        array(),
     423        wp_get_theme()->get( 'Version' ),
     424        true
     425    );
     426
    418427    // Main navigation scripts.
    419428    if ( has_nav_menu( 'primary' ) ) {
    420         wp_register_script(
    421             'twenty-twenty-one-ie11-polyfills',
    422             get_template_directory_uri() . '/assets/js/polyfills.js',
    423             array(),
    424             wp_get_theme()->get( 'Version' ),
    425             true
    426         );
    427429        wp_enqueue_script(
    428430            'twenty-twenty-one-primary-navigation-script',
    … …  
    433435        );
    434436    }
     437
     438    // Responsive embeds script.
     439    wp_enqueue_script(
     440        'twenty-twenty-one-responsive-embeds-script',
     441        get_template_directory_uri() . '/assets/js/responsive-embeds.js',
     442        array( 'twenty-twenty-one-ie11-polyfills' ),
     443        wp_get_theme()->get( 'Version' ),
     444        true
     445    );
    435446}
    436447add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );
    … …  
    543554add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' );
    544555
    545 
    546556/**
    547557 * Enqueue scripts for the customizer.
    … …  
    560570        true
    561571    );
    562 
    563     wp_enqueue_script(
    564         'twentytwentyone-customize-controls',
    565         get_theme_file_uri( '/assets/js/customize.js' ),
    566         array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ),
    567         wp_get_theme()->get( 'Version' ),
    568         true
    569     );
    570 
    571     wp_localize_script(
    572         'twentytwentyone-customize-controls',
    573         'backgroundColorNotice',
    574         array(
    575             'message' => esc_html__( 'You currently have dark mode enabled on your device. Changing the color picker will allow you to preview light mode.', 'twentytwentyone' ),
    576         )
    577     );
    578572}
    579573add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' );
    … …  
    587581 */
    588582function twentytwentyone_the_html_classes() {
    589     $background_color            = get_theme_mod( 'background_color', 'D1E4DD' );
    590     $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true );
    591     if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
    592         echo 'class="respect-color-scheme-preference"';
    593     }
    594 }
     583    $classes = apply_filters( 'twentytwentyone_html_classes', '' );
     584    if ( ! $classes ) {
     585        return;
     586    }
     587    echo 'class="' . esc_attr( $classes ) . '"';
     588}
     589
     590/**
     591 * Add "is-IE" class to body if the user is on Internet Explorer.
     592 *
     593 * @since 1.0.0
     594 *
     595 * @return void
     596 */
     597function twentytwentyone_add_ie_class() {
     598    ?>
     599    <script>
     600    if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
     601        document.body.classList.add( 'is-IE' );
     602    }
     603    </script>
     604    <?php
     605}
     606add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );

  • trunk/src/wp-content/themes/twentytwentyone/inc/template-functions.php

    r49247 r49320  
    225225function twenty_twenty_one_continue_reading_link() {
    226226    if ( ! is_admin() ) {
    227         return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
     227        return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '#more-' . esc_attr( get_the_ID() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
    228228    }
    229229}

  • trunk/src/wp-content/themes/twentytwentyone/inc/template-tags.php

    r49247 r49320  
    106106                    printf(
    107107                        /* translators: %s: list of categories. */
    108                         '<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . '. </span>',
     108                        '<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' </span>',
    109109                        $categories_list // phpcs:ignore WordPress.Security.EscapeOutput
    110110                    );
    … …  
    116116                    printf(
    117117                        /* translators: %s: list of tags. */
    118                         '<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '.</span>',
     118                        '<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
    119119                        $tags_list // phpcs:ignore WordPress.Security.EscapeOutput
    120120                    );

  • trunk/src/wp-content/themes/twentytwentyone/searchform.php

    r49216 r49320  
    1919$twentytwentyone_unique_id = wp_unique_id( 'search-form-' );
    2020
    21 $twentytwentyone_aria_label = ! empty( $args['label'] ) ? 'aria-label="' . esc_attr( $args['label'] ) . '"' : '';
     21$twentytwentyone_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . esc_attr( $args['aria_label'] ) . '"' : '';
    2222?>
    2323<form role="search" <?php echo $twentytwentyone_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">

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

    r49247 r49320  
    1111Version: 1.0.0
    1212License: GNU General Public License v2 or later
    13 License URI: LICENSE
     13License URI: http://www.gnu.org/licenses/gpl-2.0.html
    1414Text Domain: twentytwentyone
    1515Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
    … …  
    301301}
    302302
    303 /* OS dark theme preference */
    304 @media (prefers-color-scheme: dark) {
    305     html.respect-color-scheme-preference {
    306         --global--color-background: var(--global--color-dark-gray);
    307         --global--color-primary: var(--global--color-light-gray);
    308         --global--color-secondary: var(--global--color-light-gray);
    309         --button--color-text: var(--global--color-background);
    310         --button--color-text-hover: var(--global--color-secondary);
    311         --button--color-text-active: var(--global--color-secondary);
    312         --button--color-background: var(--global--color-secondary);
    313         --button--color-background-active: var(--global--color-background);
    314     }
    315     html.respect-color-scheme-preference body {
    316         background-color: var(--global--color-background);
    317     }
    318 }
    319 
    320303/* Button extends */
    321304.site .button,
    … …  
    12321215}
    12331216
     1217input[type="email"],
     1218input[type="url"] {
     1219    direction: ltr;
     1220}
     1221
    12341222select {
    12351223    border: var(--form--border-width) solid var(--form--border-color);
    … …  
    14131401}
    14141402
     1403fieldset {
     1404    display: grid;
     1405    border-color: var(--global--color-secondary);
     1406    padding: var(--global--spacing-horizontal);
     1407}
     1408
     1409fieldset legend {
     1410    font-size: var(--global--font-size-lg);
     1411}
     1412
     1413fieldset input[type="submit"] {
     1414    max-width: max-content;
     1415}
     1416
     1417fieldset input:not([type="submit"]) {
     1418    margin-bottom: var(--global--spacing-unit);
     1419}
     1420
     1421fieldset input[type="radio"], fieldset input[type="checkbox"] {
     1422    margin-bottom: 0;
     1423}
     1424
     1425fieldset input[type="radio"] + label,
     1426fieldset input[type="checkbox"] + label {
     1427    font-size: var(--form--font-size);
     1428    padding-right: 0;
     1429    margin-bottom: var(--global--spacing-unit);
     1430}
     1431
    14151432img {
    14161433    display: block;
    … …  
    14791496
    14801497pre {
    1481     white-space: pre-wrap;
     1498    white-space: pre;
     1499    overflow-x: auto;
    14821500}
    14831501
    … …  
    15771595.wp-block-code code {
    15781596    font-size: var(--global--font-size-xs);
    1579     overflow: auto;
     1597    white-space: pre;
     1598    overflow-x: auto;
     1599    display: block;
    15801600}
    15811601
    … …  
    16211641}
    16221642
     1643.wp-block-columns.is-style-twentytwentyone-columns-overlap {
     1644    justify-content: space-around;
     1645}
     1646
    16231647@media only screen and (min-width: 652px) {
    1624     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
    1625         flex-grow: 1;
    1626     }
    16271648    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    16281649        margin-right: calc(-2 * var(--global--spacing-horizontal));
    … …  
    24392460        margin-right: calc(0.4 * var(--global--spacing-horizontal));
    24402461    }
     2462}
     2463
     2464pre.wp-block-preformatted {
     2465    overflow-x: auto;
     2466    white-space: pre;
    24412467}
    24422468
    … …  
    28052831}
    28062832
     2833.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     2834    background-color: var(--global--color-white);
     2835}
     2836
     2837.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
     2838    justify-content: center;
     2839}
     2840
    28072841.wp-block-search .wp-block-search__label {
    28082842    font-size: var(--form--font-size);
    … …  
    28192853    margin-left: calc(-1 * var(--button--border-width));
    28202854    padding: var(--form--spacing-unit);
     2855    background-color: var(--global--color-white);
    28212856}
    28222857
    … …  
    30033038}
    30043039
     3040.wp-block-tag-cloud.alignfull {
     3041    padding-right: var(--global--spacing-unit);
     3042    padding-left: var(--global--spacing-unit);
     3043}
     3044
    30053045.wp-block-verse {
    30063046    font-family: var(--entry-content--font-family);
    … …  
    34343474
    34353475.page-links .post-page-numbers {
     3476    display: inline-block;
    34363477    margin-right: calc(0.66 * var(--global--spacing-unit));
    34373478    margin-left: calc(0.66 * var(--global--spacing-unit));
    3438     padding: calc(0.33 * var(--global--spacing-vertical)) 0;
     3479    min-width: 44px;
     3480    min-height: 44px;
    34393481}
    34403482
    … …  
    34893531}
    34903532
    3491 .entry-content .more-link:hover {
    3492     text-decoration: none;
    3493 }
    3494 
    34953533.entry-content > iframe[style] {
    34963534    margin: var(--global--spacing-vertical) 0 !important;
    … …  
    35103548    font-size: var(--global--font-size-xs);
    35113549    display: block;
     3550}
     3551
     3552.entry-footer > span {
     3553    display: inline-block;
    35123554}
    35133555
    … …  
    36713713.blog .format-video .entry-content {
    36723714    margin-top: calc(2 * var(--global--spacing-vertical));
     3715}
     3716
     3717.archive .entry-footer .cat-links,
     3718.archive .entry-footer .tags-links,
     3719.search .entry-footer .cat-links,
     3720.search .entry-footer .tags-links,
     3721.blog .entry-footer .cat-links,
     3722.blog .entry-footer .tags-links {
     3723    display: block;
    36733724}
    36743725
    … …  
    40594110    padding-bottom: var(--global--spacing-horizontal);
    40604111    background-color: var(--global--color-background);
    4061     overflow-x: hidden;
    4062     overflow-y: auto;
    40634112    transition: all .15s ease-in-out;
    40644113    transform: translateY(var(--global--spacing-vertical));
    … …  
    40694118        height: 100vh;
    40704119        z-index: 499;
     4120        overflow-x: hidden;
     4121        overflow-y: auto;
    40714122        border: 2px solid transparent;
    40724123    }
    … …  
    41284179        display: none;
    41294180    }
    4130     .primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
     4181    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
    41314182        display: none;
    41324183    }
    … …  
    42184269}
    42194270
    4220 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
    4221     display: flex;
    4222 }
    4223 
    4224 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
    4225     display: none;
    4226 }
    4227 
    42284271.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    42294272    position: relative;
    … …  
    44714514}
    44724515
     4516.navigation .nav-links > * {
     4517    min-width: 44px;
     4518    min-height: 44px;
     4519}
     4520
    44734521.navigation .nav-links .nav-next a,
    44744522.navigation .nav-links .nav-previous a {
    … …  
    46664714}
    46674715
    4668 @media only screen and (min-width: 822px) {
     4716@media only screen and (min-width: 652px) {
    46694717    .widget-area {
    46704718        display: grid;
     4719        grid-template-columns: repeat(2, 1fr);
     4720        column-gap: calc(2 * var(--global--spacing-horizontal));
     4721    }
     4722}
     4723
     4724@media only screen and (min-width: 1024px) {
     4725    .widget-area {
    46714726        grid-template-columns: repeat(3, 1fr);
    4672         column-gap: calc(2 * var(--global--spacing-horizontal));
    46734727    }
    46744728}
    … …  
    49745028    max-width: none;
    49755029}
     5030
     5031.is-IE.has-background-dark {
     5032    color: #fff;
     5033}
     5034
     5035.is-IE.has-background-dark *,
     5036.is-IE.has-background-dark a,
     5037.is-IE.has-background-dark .site-description,
     5038.is-IE.has-background-dark .entry-title,
     5039.is-IE.has-background-dark .entry-footer,
     5040.is-IE.has-background-dark .widget-area,
     5041.is-IE.has-background-dark .post-navigation .meta-nav,
     5042.is-IE.has-background-dark .footer-navigation-wrapper li a:link,
     5043.is-IE.has-background-dark .site-footer > .site-info,
     5044.is-IE.has-background-dark .site-footer > .site-info a,
     5045.is-IE.has-background-dark .site-footer > .site-info a:visited {
     5046    color: #fff;
     5047}
     5048
     5049.is-IE.has-background-dark .sub-menu-toggle svg,
     5050.is-IE.has-background-dark .sub-menu-toggle path,
     5051.is-IE.has-background-dark .post-navigation .meta-nav svg,
     5052.is-IE.has-background-dark .post-navigation .meta-nav path {
     5053    fill: #fff;
     5054}
     5055
     5056.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
     5057    background: #000;
     5058}
     5059
     5060@media only screen and (max-width: 481px) {
     5061    .is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container,
     5062    .is-IE.has-background-dark.primary-navigation-open .menu-button-container {
     5063        background-color: #000;
     5064    }
     5065}
     5066
     5067.is-IE.has-background-dark .skip-link:focus {
     5068    color: #21759b;
     5069}

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

    r49247 r49320  
    1111Version: 1.0.0
    1212License: GNU General Public License v2 or later
    13 License URI: LICENSE
     13License URI: http://www.gnu.org/licenses/gpl-2.0.html
    1414Text Domain: twentytwentyone
    1515Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
    … …  
    301301}
    302302
    303 /* OS dark theme preference */
    304 @media (prefers-color-scheme: dark) {
    305     html.respect-color-scheme-preference {
    306         --global--color-background: var(--global--color-dark-gray);
    307         --global--color-primary: var(--global--color-light-gray);
    308         --global--color-secondary: var(--global--color-light-gray);
    309         --button--color-text: var(--global--color-background);
    310         --button--color-text-hover: var(--global--color-secondary);
    311         --button--color-text-active: var(--global--color-secondary);
    312         --button--color-background: var(--global--color-secondary);
    313         --button--color-background-active: var(--global--color-background);
    314     }
    315     html.respect-color-scheme-preference body {
    316         background-color: var(--global--color-background);
    317     }
    318 }
    319 
    320303/* Button extends */
    321304.site .button,
    … …  
    12361219}
    12371220
     1221input[type="email"],
     1222input[type="url"] {
     1223    /*rtl:ignore*/
     1224    direction: ltr;
     1225}
     1226
    12381227select {
    12391228    border: var(--form--border-width) solid var(--form--border-color);
    … …  
    14171406}
    14181407
     1408fieldset {
     1409    display: grid;
     1410    border-color: var(--global--color-secondary);
     1411    padding: var(--global--spacing-horizontal);
     1412}
     1413
     1414fieldset legend {
     1415    font-size: var(--global--font-size-lg);
     1416}
     1417
     1418fieldset input[type="submit"] {
     1419    max-width: max-content;
     1420}
     1421
     1422fieldset input:not([type="submit"]) {
     1423    margin-bottom: var(--global--spacing-unit);
     1424}
     1425
     1426fieldset input[type="radio"], fieldset input[type="checkbox"] {
     1427    margin-bottom: 0;
     1428}
     1429
     1430fieldset input[type="radio"] + label,
     1431fieldset input[type="checkbox"] + label {
     1432    font-size: var(--form--font-size);
     1433    padding-left: 0;
     1434    margin-bottom: var(--global--spacing-unit);
     1435}
     1436
    14191437img {
    14201438    display: block;
    … …  
    14831501
    14841502pre {
    1485     white-space: pre-wrap;
     1503    white-space: pre;
     1504    overflow-x: auto;
    14861505}
    14871506
    … …  
    15811600.wp-block-code code {
    15821601    font-size: var(--global--font-size-xs);
    1583     overflow: auto;
     1602    white-space: pre;
     1603    overflow-x: auto;
     1604    display: block;
    15841605}
    15851606
    … …  
    16251646}
    16261647
     1648.wp-block-columns.is-style-twentytwentyone-columns-overlap {
     1649    justify-content: space-around;
     1650}
     1651
    16271652@media only screen and (min-width: 652px) {
    1628     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
    1629         flex-grow: 1;
    1630     }
    16311653    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    16321654        margin-left: calc(-2 * var(--global--spacing-horizontal));
    … …  
    24432465        margin-left: calc(0.4 * var(--global--spacing-horizontal));
    24442466    }
     2467}
     2468
     2469pre.wp-block-preformatted {
     2470    overflow-x: auto;
     2471    white-space: pre;
    24452472}
    24462473
    … …  
    28092836}
    28102837
     2838.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     2839    background-color: var(--global--color-white);
     2840}
     2841
     2842.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
     2843    justify-content: center;
     2844}
     2845
    28112846.wp-block-search .wp-block-search__label {
    28122847    font-size: var(--form--font-size);
    … …  
    28232858    margin-right: calc(-1 * var(--button--border-width));
    28242859    padding: var(--form--spacing-unit);
     2860    background-color: var(--global--color-white);
    28252861}
    28262862
    … …  
    30073043}
    30083044
     3045.wp-block-tag-cloud.alignfull {
     3046    padding-left: var(--global--spacing-unit);
     3047    padding-right: var(--global--spacing-unit);
     3048}
     3049
    30093050.wp-block-verse {
    30103051    font-family: var(--entry-content--font-family);
    … …  
    34433484
    34443485.page-links .post-page-numbers {
     3486    display: inline-block;
    34453487    margin-left: calc(0.66 * var(--global--spacing-unit));
    34463488    margin-right: calc(0.66 * var(--global--spacing-unit));
    3447     padding: calc(0.33 * var(--global--spacing-vertical)) 0;
     3489    min-width: 44px;
     3490    min-height: 44px;
    34483491}
    34493492
    … …  
    34983541}
    34993542
    3500 .entry-content .more-link:hover {
    3501     text-decoration: none;
    3502 }
    3503 
    35043543.entry-content > iframe[style] {
    35053544    margin: var(--global--spacing-vertical) 0 !important;
    … …  
    35193558    font-size: var(--global--font-size-xs);
    35203559    display: block;
     3560}
     3561
     3562.entry-footer > span {
     3563    display: inline-block;
    35213564}
    35223565
    … …  
    36803723.blog .format-video .entry-content {
    36813724    margin-top: calc(2 * var(--global--spacing-vertical));
     3725}
     3726
     3727.archive .entry-footer .cat-links,
     3728.archive .entry-footer .tags-links,
     3729.search .entry-footer .cat-links,
     3730.search .entry-footer .tags-links,
     3731.blog .entry-footer .cat-links,
     3732.blog .entry-footer .tags-links {
     3733    display: block;
    36823734}
    36833735
    … …  
    40684120    padding-bottom: var(--global--spacing-horizontal);
    40694121    background-color: var(--global--color-background);
    4070     overflow-x: hidden;
    4071     overflow-y: auto;
    40724122    transition: all .15s ease-in-out;
    40734123    transform: translateY(var(--global--spacing-vertical));
    … …  
    40784128        height: 100vh;
    40794129        z-index: 499;
     4130        overflow-x: hidden;
     4131        overflow-y: auto;
    40804132        border: 2px solid transparent;
    40814133    }
    … …  
    41374189        display: none;
    41384190    }
    4139     .primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
     4191    .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
    41404192        display: none;
    41414193    }
    … …  
    42274279}
    42284280
    4229 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
    4230     display: flex;
    4231 }
    4232 
    4233 .primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
    4234     display: none;
    4235 }
    4236 
    42374281.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    42384282    position: relative;
    … …  
    44804524}
    44814525
     4526.navigation .nav-links > * {
     4527    min-width: 44px;
     4528    min-height: 44px;
     4529}
     4530
    44824531.navigation .nav-links .nav-next a,
    44834532.navigation .nav-links .nav-previous a {
    … …  
    46754724}
    46764725
    4677 @media only screen and (min-width: 822px) {
     4726@media only screen and (min-width: 652px) {
    46784727    .widget-area {
    46794728        display: grid;
     4729        grid-template-columns: repeat(2, 1fr);
     4730        column-gap: calc(2 * var(--global--spacing-horizontal));
     4731    }
     4732}
     4733
     4734@media only screen and (min-width: 1024px) {
     4735    .widget-area {
    46804736        grid-template-columns: repeat(3, 1fr);
    4681         column-gap: calc(2 * var(--global--spacing-horizontal));
    46824737    }
    46834738}
    … …  
    49845039}
    49855040
     5041.is-IE.has-background-dark {
     5042    color: #fff;
     5043}
     5044
     5045.is-IE.has-background-dark *,
     5046.is-IE.has-background-dark a,
     5047.is-IE.has-background-dark .site-description,
     5048.is-IE.has-background-dark .entry-title,
     5049.is-IE.has-background-dark .entry-footer,
     5050.is-IE.has-background-dark .widget-area,
     5051.is-IE.has-background-dark .post-navigation .meta-nav,
     5052.is-IE.has-background-dark .footer-navigation-wrapper li a:link,
     5053.is-IE.has-background-dark .site-footer > .site-info,
     5054.is-IE.has-background-dark .site-footer > .site-info a,
     5055.is-IE.has-background-dark .site-footer > .site-info a:visited {
     5056    color: #fff;
     5057}
     5058
     5059.is-IE.has-background-dark .sub-menu-toggle svg,
     5060.is-IE.has-background-dark .sub-menu-toggle path,
     5061.is-IE.has-background-dark .post-navigation .meta-nav svg,
     5062.is-IE.has-background-dark .post-navigation .meta-nav path {
     5063    fill: #fff;
     5064}
     5065
     5066.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
     5067    background: #000;
     5068}
     5069
     5070@media only screen and (max-width: 481px) {
     5071    .is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container,
     5072    .is-IE.has-background-dark.primary-navigation-open .menu-button-container {
     5073        background-color: #000;
     5074    }
     5075}
     5076
     5077.is-IE.has-background-dark .skip-link:focus {
     5078    color: #21759b;
     5079}
     5080
    49865081/*# sourceMappingURL=style.css.map */
Note: See TracChangeset for help on using the changeset viewer.