WordPress.org
Get WordPress

Make WordPress Core

Changeset 49320


Ignore:
Timestamp:
10/27/2020 01:58:37 AM (6 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.