WordPress.org
Get WordPress

Make WordPress Core

Changeset 46712 for branches/5.3


Ignore:
Timestamp:
11/11/2019 09:03:55 PM (5 years ago)
Author:
SergeyBiryukov
Message:

Bundled Themes: Update Twenty Twenty.

This brings Twenty Twenty in sync with GitHub. For a full list of changes since 5.3 RC4, see ​https://github.com/WordPress/twentytwenty/compare/c267289...ab5fa23.

Reviewed by SergeyBiryukov.
Props williampatton, poena, andersnoren, desrosj, schlessera, leprincenoir, alextran, aristath, b-07, allancole, karmatosed, pierlo, joen, ianbelanger.
See #48110, #48386, #48450, #48505.
Merges [46701], [46702], [46711] to the 5.3 branch.
Fixes #48557.

Location:
branches/5.3
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • branches/5.3

  • branches/5.3/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

    r46614 r46712  
    7979}
    8080
    81 .wp-block[data-align="wide"] .wp-block,
    82 .wp-block[data-align="full"] .wp-block {
    83     max-width: none;
    84 }
    85 
    8681.wp-block[data-align="wide"] .wp-block[data-align="wide"],
    8782.wp-block[data-align="full"] .wp-block[data-align="wide"] {
    … …  
    107102
    108103.wp-block[data-align="wide"] {
    109     margin-bottom: 30px;
    110     margin-top: 30px;
    111104    max-width: 1200px;
    112105}
    113106
    114107.wp-block[data-align="full"] {
    115     margin-bottom: 50px;
    116     margin-top: 50px;
    117108    max-width: none;
    118109}
    … …  
    178169.has-accent-background-color {
    179170    background-color: #cd2653;
     171}
     172
     173.has-secondary-color {
     174    color: #6d6d6d;
     175}
     176
     177.has-secondary-background-color {
     178    background-color: #6d6d6d;
     179}
     180
     181.has-subtle-background-color {
     182    color: #dcd7ca;
     183}
     184
     185.has-subtle-background-background-color {
     186    background-color: #dcd7ca;
     187}
     188
     189.has-background-color {
     190    color: #6d6d6d;
     191}
     192
     193.has-background-background-color {
     194    background-color: #6d6d6d;
    180195}
    181196
    … …  
    320335}
    321336
     337.editor-styles-wrapper p.has-normal-font-size,
    322338.editor-styles-wrapper p.has-regular-font-size {
    323339    font-size: 1em;
    … …  
    678694.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container {
    679695    margin: 0 auto;
    680     max-width: 1200px;
    681696    width: calc(100% - 40px);
    682697}
    683698
    684 [data-align="left"] .wp-block-cover,
    685 [data-align="left"] .wp-block-cover-image,
    686 [data-align="right"] .wp-block-cover,
    687 [data-align="right"] .wp-block-cover-image {
    688     max-width: 260px;
     699.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"],
     700.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] {
     701    height: auto;
     702    max-height: none;
     703}
     704
     705.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover {
     706    text-align: right;
     707}
     708
     709.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover {
     710    text-align: left;
     711}
     712
     713.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit,
     714.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
     715    float: none;
     716    margin-right: 0;
     717    margin-left: 0;
     718    max-width: 100%;
    689719}
    690720
    … …  
    10521082    }
    10531083
     1084    /* BLOCK: COVER */
     1085
     1086    .wp-block[data-type="core/cover"][data-align="left"] [data-block],
     1087    .wp-block[data-type="core/cover"][data-align="right"] [data-block] {
     1088        margin-top: 0;
     1089    }
     1090
     1091    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit {
     1092        float: left;
     1093        margin-right: 20px;
     1094        max-width: 260px;
     1095    }
     1096
     1097    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
     1098        float: right;
     1099        margin-left: 20px;
     1100        max-width: 260px;
     1101    }
     1102
     1103    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-pullquote::before {
     1104        margin-left: 0;
     1105    }
     1106
     1107    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-pullquote::before {
     1108        margin-right: 0;
     1109    }
     1110
    10541111    /* BLOCK: PULL QUOTE */
    10551112
    … …  
    11311188    }
    11321189
    1133     .wp-block[data-align="wide"],
    1134     .wp-block[data-align="full"] {
    1135         margin-bottom: 60px;
    1136         margin-top: 60px;
    1137     }
    1138 
    11391190    /* TYPOGRAPHY */
    11401191
    … …  
    12081259    /* BLOCK: GROUP */
    12091260
    1210     .editor-styles-wrapper .wp-block-group.has-background {
     1261    .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background,
     1262    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background,
     1263    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background {
    12111264        padding: 40px;
     1265    }
     1266
     1267    .editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-group.has-background,
     1268    .editor-styles-wrapper .wp-block[data-align="full"] .wp-block-group.has-background {
     1269        padding: 80px;
    12121270    }
    12131271
    … …  
    12831341
    12841342
    1285     /* STRUCTURE */
    1286 
    1287     .wp-block[data-align="wide"],
    1288     .wp-block[data-align="full"] {
    1289         margin-bottom: 80px;
    1290         margin-top: 80px;
    1291     }
    1292 
    12931343    /* BLOCK: COLUMNS */
    12941344
    12951345    .wp-block-column {
    12961346        font-size: 18px;
    1297     }
    1298 
    1299     /* BLOCK: GROUP */
    1300 
    1301     .wp-block[data-align="wide"] .wp-block-group.has-background,
    1302     .wp-block[data-align="full"] .wp-block-group.has-background {
    1303         padding: 80px 40px;
    13041347    }
    13051348
    … …  
    13321375    .editor-styles-wrapper .wp-block h6 {
    13331376        font-size: 18px;
    1334     }
    1335 
    1336     /* STRUCTURE */
    1337 
    1338     .wp-block[data-align="wide"],
    1339     .wp-block[data-align="full"] {
    1340         margin-bottom: 80px;
    1341         margin-top: 80px;
    13421377    }
    13431378

  • branches/5.3/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css

    r46614 r46712  
    7979}
    8080
    81 .wp-block[data-align="wide"] .wp-block,
    82 .wp-block[data-align="full"] .wp-block {
    83     max-width: none;
    84 }
    85 
    8681.wp-block[data-align="wide"] .wp-block[data-align="wide"],
    8782.wp-block[data-align="full"] .wp-block[data-align="wide"] {
    … …  
    107102
    108103.wp-block[data-align="wide"] {
    109     margin-bottom: 30px;
    110     margin-top: 30px;
    111104    max-width: 1200px;
    112105}
    113106
    114107.wp-block[data-align="full"] {
    115     margin-bottom: 50px;
    116     margin-top: 50px;
    117108    max-width: none;
    118109}
    … …  
    178169.has-accent-background-color {
    179170    background-color: #cd2653;
     171}
     172
     173.has-secondary-color {
     174    color: #6d6d6d;
     175}
     176
     177.has-secondary-background-color {
     178    background-color: #6d6d6d;
     179}
     180
     181.has-subtle-background-color {
     182    color: #dcd7ca;
     183}
     184
     185.has-subtle-background-background-color {
     186    background-color: #dcd7ca;
     187}
     188
     189.has-background-color {
     190    color: #6d6d6d;
     191}
     192
     193.has-background-background-color {
     194    background-color: #6d6d6d;
    180195}
    181196
    … …  
    320335}
    321336
     337.editor-styles-wrapper p.has-normal-font-size,
    322338.editor-styles-wrapper p.has-regular-font-size {
    323339    font-size: 1em;
    … …  
    678694.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container {
    679695    margin: 0 auto;
    680     max-width: 1200px;
    681696    width: calc(100% - 40px);
    682697}
    683698
    684 [data-align="left"] .wp-block-cover,
    685 [data-align="left"] .wp-block-cover-image,
    686 [data-align="right"] .wp-block-cover,
    687 [data-align="right"] .wp-block-cover-image {
    688     max-width: 260px;
     699.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"],
     700.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] {
     701    height: auto;
     702    max-height: none;
     703}
     704
     705.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover {
     706    text-align: left;
     707}
     708
     709.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover {
     710    text-align: right;
     711}
     712
     713.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit,
     714.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
     715    float: none;
     716    margin-left: 0;
     717    margin-right: 0;
     718    max-width: 100%;
    689719}
    690720
    … …  
    10521082    }
    10531083
     1084    /* BLOCK: COVER */
     1085
     1086    .wp-block[data-type="core/cover"][data-align="left"] [data-block],
     1087    .wp-block[data-type="core/cover"][data-align="right"] [data-block] {
     1088        margin-top: 0;
     1089    }
     1090
     1091    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit {
     1092        float: right;
     1093        margin-left: 20px;
     1094        max-width: 260px;
     1095    }
     1096
     1097    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
     1098        float: left;
     1099        margin-right: 20px;
     1100        max-width: 260px;
     1101    }
     1102
     1103    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-pullquote::before {
     1104        margin-right: 0;
     1105    }
     1106
     1107    .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-pullquote::before {
     1108        margin-left: 0;
     1109    }
     1110
    10541111    /* BLOCK: PULL QUOTE */
    10551112
    … …  
    11311188    }
    11321189
    1133     .wp-block[data-align="wide"],
    1134     .wp-block[data-align="full"] {
    1135         margin-bottom: 60px;
    1136         margin-top: 60px;
    1137     }
    1138 
    11391190    /* TYPOGRAPHY */
    11401191
    … …  
    12081259    /* BLOCK: GROUP */
    12091260
    1210     .editor-styles-wrapper .wp-block-group.has-background {
     1261    .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background,
     1262    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background,
     1263    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background {
    12111264        padding: 40px;
     1265    }
     1266
     1267    .editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-group.has-background,
     1268    .editor-styles-wrapper .wp-block[data-align="full"] .wp-block-group.has-background {
     1269        padding: 80px;
    12121270    }
    12131271
    … …  
    12831341
    12841342
    1285     /* STRUCTURE */
    1286 
    1287     .wp-block[data-align="wide"],
    1288     .wp-block[data-align="full"] {
    1289         margin-bottom: 80px;
    1290         margin-top: 80px;
    1291     }
    1292 
    12931343    /* BLOCK: COLUMNS */
    12941344
    12951345    .wp-block-column {
    12961346        font-size: 18px;
    1297     }
    1298 
    1299     /* BLOCK: GROUP */
    1300 
    1301     .wp-block[data-align="wide"] .wp-block-group.has-background,
    1302     .wp-block[data-align="full"] .wp-block-group.has-background {
    1303         padding: 80px 40px;
    13041347    }
    13051348
    … …  
    13321375    .editor-styles-wrapper .wp-block h6 {
    13331376        font-size: 18px;
    1334     }
    1335 
    1336     /* STRUCTURE */
    1337 
    1338     .wp-block[data-align="wide"],
    1339     .wp-block[data-align="full"] {
    1340         margin-bottom: 80px;
    1341         margin-top: 80px;
    13421377    }
    13431378

  • branches/5.3/src/wp-content/themes/twentytwenty/assets/js/customize-controls.js

    r46446 r46712  
    1 /* global twentyTwentyBgColors, twentyTwentyColor, Color, jQuery, wp, _ */
     1/* global twentyTwentyBgColors, twentyTwentyColor, jQuery, wp, _ */
    22/**
    33 * Customizer enhancements for a better user experience.
    … …  
    7575
    7676            // Get secondary color.
    77             value[ context ].secondary = Color( {
    78                 h: colors.bgColorObj.h(),
    79                 s: colors.bgColorObj.s() / 2,
    80                 l: ( colors.textColorObj.l() * 0.57 ) + ( colors.bgColorObj.l() * 0.43 )
    81             } ).toCSS();
     77            value[ context ].secondary = colors.bgColorObj
     78                .clone()
     79                .getReadableContrastingColor( colors.bgColorObj )
     80                .s( colors.bgColorObj.s() / 2 )
     81                .toCSS();
    8282        }
    8383

  • branches/5.3/src/wp-content/themes/twentytwenty/assets/js/index.js

    r46669 r46712  
    3131    NodeList.prototype.forEach = function( callback, thisArg ) {
    3232        var i;
     33        var len = this.length;
    3334
    3435        thisArg = thisArg || window;
    3536
    36         for ( i = 0; i < this.length; i++ ) {
     37        for ( i = 0; i < len; i++ ) {
    3738            callback.call( thisArg, this[ i ], i, this );
    3839        }
    … …  
    6970}
    7071
     72// Add a class to the body for when touch is enabled for browsers that don't support media queries
     73// for interaction media features. Adapted from <https://codepen.io/Ferie/pen/vQOMmO>
     74( function() {
     75    var matchMedia = function() {
     76        // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
     77        var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
     78        var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
     79        return window.matchMedia && window.matchMedia( query ).matches;
     80    };
     81
     82    if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
     83        document.body.classList.add( 'touch-enabled' );
     84    }
     85}() );
     86
    7187/*  -----------------------------------------------------------------------------------------------
    7288    Cover Modals
    … …  
    524540            }
    525541        }
    526 
    527         /**
    528          * Toggles `focus` class to allow submenu access on tablets.
    529          */
    530         ( function( menuObj ) {
    531             var touchStartFn, j,
    532                 parentLink = menuObj.querySelectorAll( '.primary-menu .menu-item-has-children > a' );
    533 
    534             if ( 'ontouchstart' in window ) {
    535                 touchStartFn = function( e ) {
    536                     var menuItem = this.parentNode;
    537 
    538                     if ( ! menuItem.classList.contains( 'focus' ) ) {
    539                         e.preventDefault();
    540                         for ( j = 0; j < menuItem.parentNode.children.length; ++j ) {
    541                             if ( menuItem === menuItem.parentNode.children[j] ) {
    542                                 continue;
    543                             }
    544                             menuItem.parentNode.children[i].classList.remove( 'focus' );
    545                         }
    546                         menuItem.classList.add( 'focus' );
    547                     } else {
    548                         menuItem.classList.remove( 'focus' );
    549                     }
    550                 };
    551 
    552                 for ( j = 0; j < parentLink.length; ++j ) {
    553                     parentLink[j].addEventListener( 'touchstart', touchStartFn, false );
    554                 }
    555             }
    556         }( menu ) );
    557542    }
    558543}; // twentytwenty.primaryMenu

  • branches/5.3/src/wp-content/themes/twentytwenty/footer.php

    r46614 r46712  
    2727                            ?>
    2828                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo bloginfo( 'name' ); ?></a>
    29                         </p>
     29                        </p><!-- .footer-copyright -->
    3030
    3131                        <p class="powered-by-wordpress">

  • branches/5.3/src/wp-content/themes/twentytwenty/functions.php

    r46669 r46712  
    2020 * WP Body Open
    2121 * Register Sidebars
    22  * Enqueue block editor assets
    23  * Enqueue classic editor styles
    24  * Block editor settings
     22 * Enqueue Block Editor Assets
     23 * Enqueue Classic Editor Styles
     24 * Block Editor Settings
    2525 */
    2626
    … …  
    120120    add_theme_support( 'align-wide' );
    121121
    122     // Adds starter content to highlight the theme on fresh sites.
    123     add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
     122    /*
     123     * Adds starter content to highlight the theme on fresh sites.
     124     * This is done conditionally to avoid loading the starter content on every
     125     * page load, as it is a one-off operation only needed once in the customizer.
     126     */
     127    if ( is_customize_preview() ) {
     128        require get_template_directory() . '/inc/starter-content.php';
     129        add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
     130    }
    124131
    125132    // Add theme support for selective refresh for widgets.
    … …  
    167174// Custom CSS.
    168175require get_template_directory() . '/inc/custom-css.php';
    169 
    170 // Custom starter content to highlight the theme on fresh sites.
    171 require get_template_directory() . '/inc/starter-content.php';
    172176
    173177/**
    … …  
    532536                'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
    533537                'size'      => 21,
    534                 'slug'      => 'regular',
     538                'slug'      => 'normal',
    535539            ),
    536540            array(
    … …  
    693697        'content'       => array(
    694698            'accent'     => array(
    695                 'color'        => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', ':root .has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ),
    696                 'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
    697                 'background'  => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', ':root .has-accent-background-color', '.comment-reply-link' ),
    698                 'fill'         => array( '.fill-children-accent', '.fill-children-accent *' ),
     699                'color'            => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', ':root .has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ),
     700                'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
     701                'background-color' => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', ':root .has-accent-background-color', '.comment-reply-link' ),
     702                'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
    699703            ),
    700704            'background' => array(
    701                 'color'      => array( ':root .has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.wp-block-button', '.comment-reply-link' ),
    702                 'background' => array( ':root .has-background-background-color' ),
     705                'color'            => array( ':root .has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.wp-block-button', '.comment-reply-link', '.has-background.has-primary-background-color:not(.has-text-color)', '.has-background.has-primary-background-color *:not(.has-text-color)', '.has-background.has-accent-background-color:not(.has-text-color)', '.has-background.has-accent-background-color *:not(.has-text-color)' ),
     706                'background-color' => array( ':root .has-background-background-color' ),
    703707            ),
    704708            'text'       => array(
    705                 'color'      => array( 'body', '.entry-title a', ':root .has-primary-color' ),
    706                 'background' => array( ':root .has-primary-background-color' ),
     709                'color'            => array( 'body', '.entry-title a', ':root .has-primary-color' ),
     710                'background-color' => array( ':root .has-primary-background-color' ),
    707711            ),
    708712            'secondary'  => array(
    709                 'color'      => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', ':root .has-secondary-color' ),
    710                 'background' => array( ':root .has-secondary-background-color' ),
     713                'color'            => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', ':root .has-secondary-color' ),
     714                'background-color' => array( ':root .has-secondary-background-color' ),
    711715            ),
    712716            'borders'    => array(
    713717                'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
    714                 'background'          => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', ':root .has-subtle-background-background-color' ),
     718                'background-color'    => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', ':root .has-subtle-background-background-color' ),
    715719                'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
    716720                'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
    … …  
    720724        'header-footer' => array(
    721725            'accent'     => array(
    722                 'color'      => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular:not(.overlay-header) .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ),
    723                 'background' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ),
     726                'color'            => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular:not(.overlay-header) .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ),
     727                'background-color' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ),
    724728            ),
    725729            'background' => array(
    726                 'color'      => array( '.social-icons a', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ),
    727                 'background' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ),
     730                'color'            => array( '.social-icons a', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ),
     731                'background-color' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ),
    728732            ),
    729733            'text'       => array(
    730734                'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
    731                 'background'          => array( 'body:not(.overlay-header) .primary-menu ul' ),
     735                'background-color'    => array( 'body:not(.overlay-header) .primary-menu ul' ),
    732736                'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
    733737                'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
    … …  
    737741            ),
    738742            'borders'    => array(
    739                 'border-color' => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ),
    740                 'background'  => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
     743                'border-color'     => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ),
     744                'background-color' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
    741745            ),
    742746        ),

  • branches/5.3/src/wp-content/themes/twentytwenty/inc/custom-css.php

    r46614 r46712  
    130130            // Background color.
    131131            if ( $background && $background !== $background_default ) {
    132                 twentytwenty_generate_css( '.editor-styles-wrapper', 'background', '#' . $background );
     132                twentytwenty_generate_css( '.editor-styles-wrapper', 'background-color', '#' . $background );
     133                twentytwenty_generate_css( '.has-background.has-primary-background-color:not(.has-text-color),.has-background.has-primary-background-color *:not(.has-text-color),.has-background.has-accent-background-color:not(.has-text-color),.has-background.has-accent-background-color *:not(.has-text-color)', 'color', '#' . $background );
    133134            }
    134135
    … …  
    165166            // Background color.
    166167            if ( $background && $background !== $background_default ) {
    167                 twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'background', '#' . $background );
     168                twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'background-color', '#' . $background );
    168169            }
    169170

  • branches/5.3/src/wp-content/themes/twentytwenty/inc/starter-content.php

    r46571 r46712  
    176176                'name'  => __( 'Primary', 'twentytwenty' ),
    177177                'items' => array(
     178                    'link_home', // Note that the core "home" page is actually a link in case a static front page is not used.
     179                    'page_about',
     180                    'page_blog',
    178181                    'page_contact',
    179182                ),
    180183            ),
    181             // Assign a menu to the "expanded" (modal) menu location.
     184            // This replicates primary just to demonstrate the expanded menu.
    182185            'expanded' => array(
    183186                'name'  => __( 'Primary', 'twentytwenty' ),
    … …  
    186189                    'page_about',
    187190                    'page_blog',
     191                    'page_contact',
    188192                ),
    189193            ),

  • branches/5.3/src/wp-content/themes/twentytwenty/print.css

    r46614 r46712  
    6767  h3,
    6868  h4,
     69  .has-normal-font-size,
    6970  .has-regular-font-size,
    7071  .has-large-font-size,

  • branches/5.3/src/wp-content/themes/twentytwenty/style-rtl.css

    r46699 r46712  
    181181    width: 1px;
    182182    word-wrap: normal !important;
     183    word-break: normal;
    183184}
    184185
    … …  
    827828}
    828829
     830input[type="text"]:focus,
     831input[type="email"]:focus,
     832input[type="url"]:focus,
     833input[type="password"]:focus,
     834input[type="number"]:focus,
     835input[type="tel"]:focus,
     836input[type="range"]:focus,
     837input[type="date"]:focus,
     838input[type="month"]:focus,
     839input[type="week"]:focus,
     840input[type="time"]:focus,
     841input[type="datetime"]:focus,
     842input[type="datetime-local"]:focus,
     843input[type="color"]:focus,
     844textarea:focus {
     845    border-color: currentColor;
     846}
     847
     848input[type="search"]:focus {
     849    outline: thin dotted;
     850    outline-offset: -4px;
     851}
     852
    829853/* Tables ------------------------------------ */
    830854
    … …  
    16801704}
    16811705
     1706/*
     1707 * Enable nav submenu expansion with tapping on arrows on large-viewport
     1708 * touch interfaces (e.g. tablets or laptops with touch screens).
     1709 * These rules are supported by all browsers (>IE11) and when JS is disabled.
     1710 */
     1711@media (any-pointer: coarse) {
     1712
     1713    .primary-menu > li.menu-item-has-children > a {
     1714        padding-left: 0;
     1715        margin-left: 2rem;
     1716    }
     1717
     1718    .primary-menu ul li.menu-item-has-children > a {
     1719        margin-left: 4.5rem;
     1720        padding-left: 0;
     1721        width: unset;
     1722    }
     1723
     1724}
     1725
     1726/* Repeat previous rules for IE11 (when JS enabled for polyfill). */
     1727body.touch-enabled .primary-menu > li.menu-item-has-children > a {
     1728    padding-left: 0;
     1729    margin-left: 2rem;
     1730}
     1731
     1732body.touch-enabled .primary-menu ul li.menu-item-has-children > a {
     1733    margin-left: 4.5rem;
     1734    padding-left: 0;
     1735    width: unset;
     1736}
     1737
    16821738/* -------------------------------------------------------------------------- */
    16831739
    … …  
    23172373.post-meta-wrapper {
    23182374    margin-top: 2rem;
     2375    margin-left: auto;
     2376    margin-right: auto;
     2377    max-width: 58rem;
     2378    width: calc(100% - 4rem);
    23192379}
    23202380
    … …  
    24772537.author-bio {
    24782538    margin-top: 4rem;
     2539    margin-left: auto;
     2540    margin-right: auto;
     2541    max-width: 58rem;
     2542    width: calc(100% - 4rem);
    24792543}
    24802544
    … …  
    26862750}
    26872751
     2752.entry-content .has-normal-font-size,
    26882753.entry-content .has-regular-font-size {
    26892754    font-size: 1em;
    … …  
    27162781}
    27172782
    2718 .wp-block-archives,
    2719 .wp-block-categories,
     2783.wp-block-archives:not(.alignwide):not(.alignfull),
     2784.wp-block-categories:not(.alignwide):not(.alignfull),
    27202785.wp-block-code,
    2721 .wp-block-columns,
    2722 .wp-block-cover,
    2723 .wp-block-embed,
    2724 .wp-block-gallery,
    2725 .wp-block-group,
    2726 .wp-block-latest-comments,
    2727 .wp-block-latest-posts,
    2728 .wp-block-media-text,
     2786.wp-block-columns:not(.alignwide):not(.alignfull),
     2787.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2788.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2789.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2790.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     2791.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2792.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     2793.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     2794.wp-block-media-text:not(.alignwide):not(.alignfull),
    27292795.wp-block-preformatted,
    2730 .wp-block-pullquote,
     2796.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
    27312797.wp-block-quote,
    27322798.wp-block-quote.is-large,
    27332799.wp-block-quote.is-style-large,
    27342800.wp-block-verse,
    2735 .wp-block-video {
     2801.wp-block-video:not(.alignwide):not(.alignfull) {
    27362802    margin-bottom: 3rem;
    27372803    margin-top: 3rem;
    … …  
    28652931/* Block: Columns ---------------------------- */
    28662932
     2933.wp-block-columns.alignfull,
     2934.alignfull:not(.has-background) .wp-block-columns {
     2935    padding-right: 2rem;
     2936    padding-left: 2rem;
     2937}
     2938
    28672939.wp-block-column {
    28682940    margin-bottom: 3.2rem;
    … …  
    29443016/* Block: Gallery ---------------------------- */
    29453017
    2946 ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) {
    2947     margin-right: 0;
    2948 }
    2949 
    29503018.wp-block-gallery ul {
    29513019    list-style: none;
    … …  
    29903058.entry-content .wp-block-group p {
    29913059    max-width: 100%;
     3060}
     3061
     3062.alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
     3063    padding-right: 2rem;
     3064    padding-left: 2rem;
    29923065}
    29933066
    … …  
    31403213    max-width: calc(100vw - 4rem);
    31413214    position: relative;
    3142     right: calc(50% - 50vw + 2rem);
    3143     width: calc(100vw - 4rem);
     3215    width: 100%;
    31443216}
    31453217
    … …  
    31763248}
    31773249
    3178 .wp-block-table.is-style-stripes {
     3250figure.wp-block-table.is-style-stripes {
    31793251    border-bottom: none;
     3252}
     3253
     3254.wp-block-table.is-style-stripes table {
     3255    border-collapse: inherit;
    31803256}
    31813257
    … …  
    32033279    border: none;
    32043280    padding: 0;
     3281    margin-right: auto;
     3282    margin-left: auto;
    32053283}
    32063284
    … …  
    32253303/* Block: Widget Latest Comments ------------- */
    32263304
    3227 .entry-content .wp-block-latest-comments,
    32283305.entry-content .wp-block-latest-comments li {
    3229     margin-right: 0;
     3306    margin: 2rem 0;
    32303307}
    32313308
    … …  
    32923369.entry-content {
    32933370    line-height: 1.5;
    3294     max-width: 58rem;
     3371}
     3372
     3373.entry-content > * {
     3374    margin-right: auto;
     3375    margin-left: auto;
     3376    margin-bottom: 1.25em;
    32953377}
    32963378
    … …  
    33193401.entry-content h5,
    33203402.entry-content h6 {
    3321     margin: 3.5rem 0 2rem;
     3403    margin: 3.5rem auto 2rem;
    33223404}
    33233405
    … …  
    33303412
    33313413.entry-content hr {
    3332     margin: 4rem 0;
     3414    margin: 4rem auto;
    33333415}
    33343416
    … …  
    33623444/* Alignment Classes ------------------------- */
    33633445
     3446.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
     3447    max-width: 58rem;
     3448    width: calc(100% - 4rem);
     3449}
     3450
     3451[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
     3452    max-width: 58rem;
     3453    width: 100%;
     3454}
     3455
    33643456.alignnone,
    33653457.aligncenter,
    33663458.alignleft,
    3367 .alignright {
    3368     margin: 3rem 0;
     3459.alignright,
     3460.alignwide {
     3461    margin-top: 4rem;
     3462    margin-left: auto;
     3463    margin-bottom: 4rem;
     3464    margin-right: auto;
     3465}
     3466
     3467[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) {
     3468    margin-right: auto;
     3469    margin-left: auto;
     3470}
     3471
     3472/* Full */
     3473
     3474.alignfull {
     3475    margin-top: 5rem;
     3476    margin-left: auto;
     3477    margin-bottom: 5rem;
     3478    margin-right: auto;
     3479    max-width: 100vw;
     3480    position: relative;
     3481    width: 100%;
     3482}
     3483
     3484[class*="__inner-container"] > .alignfull {
    33693485    max-width: 100%;
    33703486}
     3487
     3488/* Wide */
     3489
     3490.alignwide {
     3491    max-width: 120rem;
     3492    position: relative;
     3493    width: calc(100% - 4rem);
     3494}
     3495
     3496[class*="__inner-container"] > .alignwide {
     3497    width: 100%;
     3498}
     3499
     3500/* Center */
    33713501
    33723502.aligncenter,
    … …  
    33763506}
    33773507
     3508/* Left and right */
     3509
    33783510.alignleft,
    33793511.alignright {
    … …  
    33833515.alignleft {
    33843516    float: left;
    3385     margin: 0.3rem 0 2rem 2rem;
     3517    margin: 0.3rem 2rem 2rem 2rem;
    33863518}
    33873519
    33883520.alignright {
    33893521    float: right;
    3390     margin: 0.3rem 2rem 2rem 0;
    3391 }
    3392 
    3393 .alignwide {
    3394     margin: 4rem auto;
    3395     max-width: 120rem;
    3396 }
    3397 
    3398 .entry-content > .alignwide {
    3399     max-width: calc(100vw - 4rem);
    3400     position: relative;
    3401     right: calc(50% - 50vw + 2rem);
    3402     width: calc(100vw - 4rem);
    3403 }
    3404 
    3405 .alignfull {
    3406     margin: 5rem 0;
    3407 }
    3408 
    3409 .entry-content > .alignfull {
    3410     max-width: 100vw;
    3411     position: relative;
    3412     right: calc(50% - 50vw);
    3413     width: 100vw;
    3414 }
    3415 
     3522    margin: 0.3rem 2rem 2rem 2rem;
     3523}
    34163524
    34173525/* Entry Media ------------------------------- */
    … …  
    34213529    margin-right: auto;
    34223530    margin-left: auto;
    3423     max-width: 120rem;
     3531    max-width: 58rem;
    34243532    width: calc(100% - 4rem);
    34253533}
    … …  
    43504458}
    43514459
    4352 @media ( max-width: 599px ) {
    4353 
    4354     /* Blocks -------------------------------- */
    4355 
    4356     /* BLOCK: COLUMNS */
    4357 
    4358     .alignfull:not(.has-background) .wp-block-column > p:not(.has-background-color),
    4359     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    4360         max-width: calc(100% - 4rem);
    4361         margin: auto;
    4362     }
    4363 }
    4364 
    4365 @media ( min-width: 600px ) and ( max-width: 781px ) {
    4366 
    4367     /* Blocks -------------------------------- */
    4368 
    4369     /* BLOCK: COLUMNS */
    4370 
    4371     .alignfull:not(.has-background) .wp-block-column:nth-child(odd) > p:not(.has-background-color),
    4372     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    4373         padding-right: 2rem;
    4374     }
    4375 
    4376     .alignfull:not(.has-background) .wp-block-column:nth-child(even) > p:not(.has-background-color),
    4377     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    4378         padding-left: 2rem;
    4379     }
    4380 }
    4381 
    43824460@media ( min-width: 660px ) {
    43834461
    … …  
    44004478    .entry-content > .alignleft,
    44014479    .entry-content > p .alignleft,
    4402     .entry-content > .wp-block-image .alignleft {
     4480    .entry-content > .wp-block-image .alignleft,
     4481    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     4482    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     4483    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     4484    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     4485    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     4486    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
    44034487        margin-left: calc(( 100vw - 58rem - 8rem ) / -2);
     4488    }
     4489
     4490    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft,
     4491    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft,
     4492    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft {
     4493        margin-left: 0;
    44044494    }
    44054495
    44064496    .entry-content > .alignright,
    44074497    .entry-content > p .alignright,
    4408     .entry-content > .wp-block-image .alignright {
     4498    .entry-content > .wp-block-image .alignright,
     4499    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     4500    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     4501    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     4502    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     4503    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     4504    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
    44094505        margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
     4506    }
     4507
     4508    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright,
     4509    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright,
     4510    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright {
     4511        margin-right: 0;
    44104512    }
    44114513
    … …  
    44264528
    44274529    hr {
    4428         margin: 8rem 0;
     4530        margin: 8rem auto;
    44294531    }
    44304532
    … …  
    44754577    h3,
    44764578    .heading-size-3 {
    4477         margin: 6rem 0 3rem;
     4579        margin: 6rem auto 3rem;
    44784580    }
    44794581
    … …  
    44844586    h6,
    44854587    .heading-size-6 {
    4486         margin: 4.5rem 0 2.5rem;
     4588        margin: 4.5rem auto 2.5rem;
    44874589    }
    44884590
    … …  
    48514953    /* BLOCK: BASE MARGINS */
    48524954
    4853     .wp-block-archives,
    4854     .wp-block-categories,
     4955    .wp-block-archives:not(.alignwide):not(.alignfull),
     4956    .wp-block-categories:not(.alignwide):not(.alignfull),
    48554957    .wp-block-code,
    4856     .wp-block-columns,
    4857     .wp-block-cover,
    4858     .wp-block-embed,
    4859     .wp-block-gallery,
    4860     .wp-block-group,
    4861     .wp-block-latest-comments,
    4862     .wp-block-latest-posts,
    4863     .wp-block-media-text,
     4958    .wp-block-columns:not(.alignwide):not(.alignfull),
     4959    .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4960    .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4961    .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4962    .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     4963    .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4964    .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     4965    .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     4966    .wp-block-media-text:not(.alignwide):not(.alignfull),
    48644967    .wp-block-preformatted,
    4865     .wp-block-pullquote,
     4968    .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
    48664969    .wp-block-quote,
    48674970    .wp-block-quote.is-large,
    48684971    .wp-block-quote.is-style-large,
    48694972    .wp-block-verse,
    4870     .wp-block-video {
    4871         margin-bottom: 5rem;
    4872         margin-top: 5rem;
     4973    .wp-block-video:not(.alignwide):not(.alignfull) {
     4974        margin-bottom: 4rem;
     4975        margin-top: 4rem;
    48734976    }
    48744977
    … …  
    49845087
    49855088    hr.wp-block-separator {
    4986         margin: 6rem 0;
     5089        margin: 6rem auto;
    49875090    }
    49885091
    49895092    .wp-block-separator.is-style-wide {
    49905093        max-width: calc(100vw - 8rem);
    4991         right: calc(50% - 50vw + 4rem);
    4992         width: calc(100vw - 8rem);
    49935094    }
    49945095
    … …  
    50075108    .entry-content h2,
    50085109    .entry-content h3 {
    5009         margin: 6rem 0 3rem;
     5110        margin: 6rem auto 3rem;
    50105111    }
    50115112
    … …  
    50135114    .entry-content h5,
    50145115    .entry-content h6 {
    5015         margin: 4.5rem 0 2.5rem;
    5016     }
    5017 
    5018     /* ALIGNMENT CLASSES */
     5116        margin: 4.5rem auto 2.5rem;
     5117    }
    50195118
    50205119    .alignnone,
    … …  
    50325131    }
    50335132
    5034     .alignwide,
    5035     .alignfull {
     5133    .entry-content > .alignwide,
     5134    .entry-content > .alignfull {
    50365135        margin-bottom: 6rem;
    50375136        margin-top: 6rem;
    … …  
    50405139    .entry-content > .alignwide {
    50415140        max-width: calc(100vw - 8rem);
    5042         right: calc(50% - 50vw + 4rem);
    50435141        width: calc(100vw - 8rem);
    50445142    }
    … …  
    52805378    }
    52815379
    5282     .alignfull .wp-block-column:first-child > p,
    5283     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    5284         padding-right: 2rem;
    5285     }
    5286 
    5287     .alignfull:not(.has-background) .wp-block-column:last-child > p,
    5288     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    5289         padding-left: 2rem;
     5380    .wp-block-columns.alignwide + .wp-block-columns.alignwide,
     5381    .wp-block-columns.alignfull + .wp-block-columns.alignfull {
     5382        margin-top: -2.8rem;
    52905383    }
    52915384}
    … …  
    55135606    .wp-block-columns.alignwide + .wp-block-columns.alignwide,
    55145607    .wp-block-columns.alignfull + .wp-block-columns.alignfull {
    5515         margin-top: -5.2rem;
     5608        margin-top: -4.8rem;
    55165609    }
    55175610
    … …  
    55265619    /* BLOCK: GROUP */
    55275620
    5528     .wp-block-group.alignwide.has-background,
    5529     .wp-block-group.alignfull.has-background {
     5621    .entry-content > .wp-block-group.alignwide.has-background,
     5622    .entry-content > .wp-block-group.alignfull.has-background {
    55305623        padding: 8rem 4rem;
    55315624    }
    … …  
    55345627
    55355628    hr.wp-block-separator {
    5536         margin: 8rem 0;
     5629        margin: 8rem auto;
    55375630    }
    55385631
    … …  
    55415634    /* ALIGNMENT CLASSES */
    55425635
    5543     .alignwide,
    5544     .alignfull {
     5636    .entry-content > .alignleft,
     5637    .entry-content > p .alignleft,
     5638    .entry-content > .wp-block-image .alignleft {
     5639        position: absolute;
     5640        left: calc((100vw - 58rem) / 2 + 58rem);
     5641        max-width: calc((100% - 58rem) / 2 - 4rem);
     5642    }
     5643
     5644    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft,
     5645    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft,
     5646    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft {
     5647        position: relative;
     5648        left: inherit;
     5649        max-width: inherit;
     5650    }
     5651
     5652    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     5653    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     5654    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     5655    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     5656    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     5657    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
     5658        position: absolute;
     5659        left: calc((100% - 58rem) / 2 + 58rem);
     5660        max-width: calc((100% - 58rem) / 2 - 4rem);
     5661    }
     5662
     5663    .entry-content > .alignright,
     5664    .entry-content > p .alignright,
     5665    .entry-content > .wp-block-image .alignright,
     5666    [class*="__inner-container"] > .alignright {
     5667        position: absolute;
     5668        right: calc((100vw - 58rem) / 2 + 58rem);
     5669        max-width: calc((100% - 58rem) / 2 - 4rem);
     5670    }
     5671
     5672    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright,
     5673    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright,
     5674    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright {
     5675        position: relative;
     5676        right: inherit;
     5677        max-width: inherit;
     5678    }
     5679
     5680    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     5681    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     5682    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     5683    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     5684    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     5685    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
     5686        position: absolute;
     5687        right: calc((100% - 58rem) / 2 + 58rem);
     5688        max-width: calc((100% - 58rem) / 2 - 4rem);
     5689    }
     5690
     5691    .entry-content > .alignwide,
     5692    .entry-content > .alignfull {
    55455693        margin-bottom: 8rem;
    55465694        margin-top: 8rem;
    … …  
    56915839    /* BLOCK: GROUP */
    56925840
    5693     .wp-block-group.alignwide.has-background,
    5694     .wp-block-group.alignfull.has-background {
     5841    .entry-content > .wp-block-group.alignwide.has-background,
     5842    .entry-content > .wp-block-group.alignfull.has-background {
    56955843        padding: 8rem 6rem;
    56965844    }
    … …  
    57125860    /* ALIGNMENT CLASSES */
    57135861
    5714     .alignfull {
     5862    .entry-content > .alignfull {
    57155863        margin-bottom: 10rem;
    57165864        margin-top: 10rem;
    … …  
    58065954    .wp-block-separator.is-style-wide {
    58075955        max-width: 120rem;
    5808         right: calc(50% - 60rem);
    58095956        width: 120rem;
    58105957    }
    … …  
    58285975    .entry-content > .alignwide {
    58295976        max-width: 120rem;
    5830         right: calc(50% - 60rem);
    58315977        width: 120rem;
     5978    }
     5979
     5980    [class*="__inner-container"] > .alignwide {
     5981        max-width: 120rem;
     5982        width: 100%;
    58325983    }
    58335984

  • branches/5.3/src/wp-content/themes/twentytwenty/style.css

    r46699 r46712  
    181181    width: 1px;
    182182    word-wrap: normal !important;
     183    word-break: normal;
    183184}
    184185
    … …  
    833834}
    834835
     836input[type="text"]:focus,
     837input[type="email"]:focus,
     838input[type="url"]:focus,
     839input[type="password"]:focus,
     840input[type="number"]:focus,
     841input[type="tel"]:focus,
     842input[type="range"]:focus,
     843input[type="date"]:focus,
     844input[type="month"]:focus,
     845input[type="week"]:focus,
     846input[type="time"]:focus,
     847input[type="datetime"]:focus,
     848input[type="datetime-local"]:focus,
     849input[type="color"]:focus,
     850textarea:focus {
     851    border-color: currentColor;
     852}
     853
     854input[type="search"]:focus {
     855    outline: thin dotted;
     856    outline-offset: -4px;
     857}
     858
    835859/* Tables ------------------------------------ */
    836860
    … …  
    16881712}
    16891713
     1714/*
     1715 * Enable nav submenu expansion with tapping on arrows on large-viewport
     1716 * touch interfaces (e.g. tablets or laptops with touch screens).
     1717 * These rules are supported by all browsers (>IE11) and when JS is disabled.
     1718 */
     1719@media (any-pointer: coarse) {
     1720
     1721    .primary-menu > li.menu-item-has-children > a {
     1722        padding-right: 0;
     1723        margin-right: 2rem;
     1724    }
     1725
     1726    .primary-menu ul li.menu-item-has-children > a {
     1727        margin-right: 4.5rem;
     1728        padding-right: 0;
     1729        width: unset;
     1730    }
     1731
     1732}
     1733
     1734/* Repeat previous rules for IE11 (when JS enabled for polyfill). */
     1735body.touch-enabled .primary-menu > li.menu-item-has-children > a {
     1736    padding-right: 0;
     1737    margin-right: 2rem;
     1738}
     1739
     1740body.touch-enabled .primary-menu ul li.menu-item-has-children > a {
     1741    margin-right: 4.5rem;
     1742    padding-right: 0;
     1743    width: unset;
     1744}
     1745
    16901746/* -------------------------------------------------------------------------- */
    16911747
    … …  
    23292385.post-meta-wrapper {
    23302386    margin-top: 2rem;
     2387    margin-right: auto;
     2388    margin-left: auto;
     2389    max-width: 58rem;
     2390    width: calc(100% - 4rem);
    23312391}
    23322392
    … …  
    24892549.author-bio {
    24902550    margin-top: 4rem;
     2551    margin-right: auto;
     2552    margin-left: auto;
     2553    max-width: 58rem;
     2554    width: calc(100% - 4rem);
    24912555}
    24922556
    … …  
    27002764}
    27012765
     2766.entry-content .has-normal-font-size,
    27022767.entry-content .has-regular-font-size {
    27032768    font-size: 1em;
    … …  
    27302795}
    27312796
    2732 .wp-block-archives,
    2733 .wp-block-categories,
     2797.wp-block-archives:not(.alignwide):not(.alignfull),
     2798.wp-block-categories:not(.alignwide):not(.alignfull),
    27342799.wp-block-code,
    2735 .wp-block-columns,
    2736 .wp-block-cover,
    2737 .wp-block-embed,
    2738 .wp-block-gallery,
    2739 .wp-block-group,
    2740 .wp-block-latest-comments,
    2741 .wp-block-latest-posts,
    2742 .wp-block-media-text,
     2800.wp-block-columns:not(.alignwide):not(.alignfull),
     2801.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2802.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2803.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2804.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     2805.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2806.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     2807.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     2808.wp-block-media-text:not(.alignwide):not(.alignfull),
    27432809.wp-block-preformatted,
    2744 .wp-block-pullquote,
     2810.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
    27452811.wp-block-quote,
    27462812.wp-block-quote.is-large,
    27472813.wp-block-quote.is-style-large,
    27482814.wp-block-verse,
    2749 .wp-block-video {
     2815.wp-block-video:not(.alignwide):not(.alignfull) {
    27502816    margin-bottom: 3rem;
    27512817    margin-top: 3rem;
    … …  
    28792945/* Block: Columns ---------------------------- */
    28802946
     2947.wp-block-columns.alignfull,
     2948.alignfull:not(.has-background) .wp-block-columns {
     2949    padding-left: 2rem;
     2950    padding-right: 2rem;
     2951}
     2952
    28812953.wp-block-column {
    28822954    margin-bottom: 3.2rem;
    … …  
    29583030/* Block: Gallery ---------------------------- */
    29593031
    2960 ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) {
    2961     margin-left: 0;
    2962 }
    2963 
    29643032.wp-block-gallery ul {
    29653033    list-style: none;
    … …  
    30043072.entry-content .wp-block-group p {
    30053073    max-width: 100%;
     3074}
     3075
     3076.alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
     3077    padding-left: 2rem;
     3078    padding-right: 2rem;
    30063079}
    30073080
    … …  
    31543227    max-width: calc(100vw - 4rem);
    31553228    position: relative;
    3156     left: calc(50% - 50vw + 2rem);
    3157     width: calc(100vw - 4rem);
     3229    width: 100%;
    31583230}
    31593231
    … …  
    31903262}
    31913263
    3192 .wp-block-table.is-style-stripes {
     3264figure.wp-block-table.is-style-stripes {
    31933265    border-bottom: none;
     3266}
     3267
     3268.wp-block-table.is-style-stripes table {
     3269    border-collapse: inherit;
    31943270}
    31953271
    … …  
    32213297    border: none;
    32223298    padding: 0;
     3299    margin-left: auto;
     3300    margin-right: auto;
    32233301}
    32243302
    … …  
    32433321/* Block: Widget Latest Comments ------------- */
    32443322
    3245 .entry-content .wp-block-latest-comments,
    32463323.entry-content .wp-block-latest-comments li {
    3247     margin-left: 0;
     3324    margin: 2rem 0;
    32483325}
    32493326
    … …  
    33103387.entry-content {
    33113388    line-height: 1.5;
    3312     max-width: 58rem;
     3389}
     3390
     3391.entry-content > * {
     3392    margin-left: auto;
     3393    margin-right: auto;
     3394    margin-bottom: 1.25em;
    33133395}
    33143396
    … …  
    33373419.entry-content h5,
    33383420.entry-content h6 {
    3339     margin: 3.5rem 0 2rem;
     3421    margin: 3.5rem auto 2rem;
    33403422}
    33413423
    … …  
    33483430
    33493431.entry-content hr {
    3350     margin: 4rem 0;
     3432    margin: 4rem auto;
    33513433}
    33523434
    … …  
    33803462/* Alignment Classes ------------------------- */
    33813463
     3464.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
     3465    max-width: 58rem;
     3466    width: calc(100% - 4rem);
     3467}
     3468
     3469[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
     3470    max-width: 58rem;
     3471    width: 100%;
     3472}
     3473
    33823474.alignnone,
    33833475.aligncenter,
    33843476.alignleft,
    3385 .alignright {
    3386     margin: 3rem 0;
     3477.alignright,
     3478.alignwide {
     3479    margin-top: 4rem;
     3480    margin-right: auto;
     3481    margin-bottom: 4rem;
     3482    margin-left: auto;
     3483}
     3484
     3485[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) {
     3486    margin-left: auto;
     3487    margin-right: auto;
     3488}
     3489
     3490/* Full */
     3491
     3492.alignfull {
     3493    margin-top: 5rem;
     3494    margin-right: auto;
     3495    margin-bottom: 5rem;
     3496    margin-left: auto;
     3497    max-width: 100vw;
     3498    position: relative;
     3499    width: 100%;
     3500}
     3501
     3502[class*="__inner-container"] > .alignfull {
    33873503    max-width: 100%;
    33883504}
     3505
     3506/* Wide */
     3507
     3508.alignwide {
     3509    max-width: 120rem;
     3510    position: relative;
     3511    width: calc(100% - 4rem);
     3512}
     3513
     3514[class*="__inner-container"] > .alignwide {
     3515    width: 100%;
     3516}
     3517
     3518/* Center */
    33893519
    33903520.aligncenter,
    … …  
    33943524}
    33953525
     3526/* Left and right */
     3527
    33963528.alignleft,
    33973529.alignright {
    … …  
    34033535    /*rtl:ignore*/
    34043536    float: left;
    3405     margin: 0.3rem 2rem 2rem 0;
     3537    margin: 0.3rem 2rem 2rem 2rem;
    34063538}
    34073539
    … …  
    34103542    /*rtl:ignore*/
    34113543    float: right;
    3412     margin: 0.3rem 0 2rem 2rem;
    3413 }
    3414 
    3415 .alignwide {
    3416     margin: 4rem auto;
    3417     max-width: 120rem;
    3418 }
    3419 
    3420 .entry-content > .alignwide {
    3421     max-width: calc(100vw - 4rem);
    3422     position: relative;
    3423     left: calc(50% - 50vw + 2rem);
    3424     width: calc(100vw - 4rem);
    3425 }
    3426 
    3427 .alignfull {
    3428     margin: 5rem 0;
    3429 }
    3430 
    3431 .entry-content > .alignfull {
    3432     max-width: 100vw;
    3433     position: relative;
    3434     left: calc(50% - 50vw);
    3435     width: 100vw;
    3436 }
    3437 
     3544    margin: 0.3rem 2rem 2rem 2rem;
     3545}
    34383546
    34393547/* Entry Media ------------------------------- */
    … …  
    34433551    margin-left: auto;
    34443552    margin-right: auto;
    3445     max-width: 120rem;
     3553    max-width: 58rem;
    34463554    width: calc(100% - 4rem);
    34473555}
    … …  
    43724480}
    43734481
    4374 @media ( max-width: 599px ) {
    4375 
    4376     /* Blocks -------------------------------- */
    4377 
    4378     /* BLOCK: COLUMNS */
    4379 
    4380     .alignfull:not(.has-background) .wp-block-column > p:not(.has-background-color),
    4381     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    4382         max-width: calc(100% - 4rem);
    4383         margin: auto;
    4384     }
    4385 }
    4386 
    4387 @media ( min-width: 600px ) and ( max-width: 781px ) {
    4388 
    4389     /* Blocks -------------------------------- */
    4390 
    4391     /* BLOCK: COLUMNS */
    4392 
    4393     .alignfull:not(.has-background) .wp-block-column:nth-child(odd) > p:not(.has-background-color),
    4394     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    4395         padding-left: 2rem;
    4396     }
    4397 
    4398     .alignfull:not(.has-background) .wp-block-column:nth-child(even) > p:not(.has-background-color),
    4399     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    4400         padding-right: 2rem;
    4401     }
    4402 }
    4403 
    44044482@media ( min-width: 660px ) {
    44054483
    … …  
    44264504    .entry-content > .alignleft,
    44274505    .entry-content > p .alignleft,
    4428     .entry-content > .wp-block-image .alignleft {
     4506    .entry-content > .wp-block-image .alignleft,
     4507    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     4508    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     4509    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     4510    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     4511    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     4512    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
    44294513
    44304514        /*rtl:ignore*/
    … …  
    44324516    }
    44334517
     4518    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft,
     4519    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft,
     4520    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft {
     4521
     4522        /*rtl:ignore*/
     4523        margin-left: 0;
     4524    }
     4525
    44344526    .entry-content > .alignright,
    44354527    .entry-content > p .alignright,
    4436     .entry-content > .wp-block-image .alignright {
     4528    .entry-content > .wp-block-image .alignright,
     4529    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     4530    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     4531    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     4532    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     4533    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     4534    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
    44374535
    44384536        /*rtl:ignore*/
    44394537        margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
     4538    }
     4539
     4540    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright,
     4541    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright,
     4542    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright {
     4543
     4544        /*rtl:ignore*/
     4545        margin-right: 0;
    44404546    }
    44414547
    … …  
    44564562
    44574563    hr {
    4458         margin: 8rem 0;
     4564        margin: 8rem auto;
    44594565    }
    44604566
    … …  
    45054611    h3,
    45064612    .heading-size-3 {
    4507         margin: 6rem 0 3rem;
     4613        margin: 6rem auto 3rem;
    45084614    }
    45094615
    … …  
    45144620    h6,
    45154621    .heading-size-6 {
    4516         margin: 4.5rem 0 2.5rem;
     4622        margin: 4.5rem auto 2.5rem;
    45174623    }
    45184624
    … …  
    48814987    /* BLOCK: BASE MARGINS */
    48824988
    4883     .wp-block-archives,
    4884     .wp-block-categories,
     4989    .wp-block-archives:not(.alignwide):not(.alignfull),
     4990    .wp-block-categories:not(.alignwide):not(.alignfull),
    48854991    .wp-block-code,
    4886     .wp-block-columns,
    4887     .wp-block-cover,
    4888     .wp-block-embed,
    4889     .wp-block-gallery,
    4890     .wp-block-group,
    4891     .wp-block-latest-comments,
    4892     .wp-block-latest-posts,
    4893     .wp-block-media-text,
     4992    .wp-block-columns:not(.alignwide):not(.alignfull),
     4993    .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4994    .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4995    .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4996    .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     4997    .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4998    .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     4999    .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     5000    .wp-block-media-text:not(.alignwide):not(.alignfull),
    48945001    .wp-block-preformatted,
    4895     .wp-block-pullquote,
     5002    .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
    48965003    .wp-block-quote,
    48975004    .wp-block-quote.is-large,
    48985005    .wp-block-quote.is-style-large,
    48995006    .wp-block-verse,
    4900     .wp-block-video {
    4901         margin-bottom: 5rem;
    4902         margin-top: 5rem;
     5007    .wp-block-video:not(.alignwide):not(.alignfull) {
     5008        margin-bottom: 4rem;
     5009        margin-top: 4rem;
    49035010    }
    49045011
    … …  
    50145121
    50155122    hr.wp-block-separator {
    5016         margin: 6rem 0;
     5123        margin: 6rem auto;
    50175124    }
    50185125
    50195126    .wp-block-separator.is-style-wide {
    50205127        max-width: calc(100vw - 8rem);
    5021         left: calc(50% - 50vw + 4rem);
    5022         width: calc(100vw - 8rem);
    50235128    }
    50245129
    … …  
    50375142    .entry-content h2,
    50385143    .entry-content h3 {
    5039         margin: 6rem 0 3rem;
     5144        margin: 6rem auto 3rem;
    50405145    }
    50415146
    … …  
    50435148    .entry-content h5,
    50445149    .entry-content h6 {
    5045         margin: 4.5rem 0 2.5rem;
    5046     }
    5047 
    5048     /* ALIGNMENT CLASSES */
     5150        margin: 4.5rem auto 2.5rem;
     5151    }
    50495152
    50505153    .alignnone,
    … …  
    50665169    }
    50675170
    5068     .alignwide,
    5069     .alignfull {
     5171    .entry-content > .alignwide,
     5172    .entry-content > .alignfull {
    50705173        margin-bottom: 6rem;
    50715174        margin-top: 6rem;
    … …  
    50745177    .entry-content > .alignwide {
    50755178        max-width: calc(100vw - 8rem);
    5076         left: calc(50% - 50vw + 4rem);
    50775179        width: calc(100vw - 8rem);
    50785180    }
    … …  
    53145416    }
    53155417
    5316     .alignfull .wp-block-column:first-child > p,
    5317     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    5318         padding-left: 2rem;
    5319     }
    5320 
    5321     .alignfull:not(.has-background) .wp-block-column:last-child > p,
    5322     .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
    5323         padding-right: 2rem;
     5418    .wp-block-columns.alignwide + .wp-block-columns.alignwide,
     5419    .wp-block-columns.alignfull + .wp-block-columns.alignfull {
     5420        margin-top: -2.8rem;
    53245421    }
    53255422}
    … …  
    55475644    .wp-block-columns.alignwide + .wp-block-columns.alignwide,
    55485645    .wp-block-columns.alignfull + .wp-block-columns.alignfull {
    5549         margin-top: -5.2rem;
     5646        margin-top: -4.8rem;
    55505647    }
    55515648
    … …  
    55605657    /* BLOCK: GROUP */
    55615658
    5562     .wp-block-group.alignwide.has-background,
    5563     .wp-block-group.alignfull.has-background {
     5659    .entry-content > .wp-block-group.alignwide.has-background,
     5660    .entry-content > .wp-block-group.alignfull.has-background {
    55645661        padding: 8rem 4rem;
    55655662    }
    … …  
    55685665
    55695666    hr.wp-block-separator {
    5570         margin: 8rem 0;
     5667        margin: 8rem auto;
    55715668    }
    55725669
    … …  
    55755672    /* ALIGNMENT CLASSES */
    55765673
    5577     .alignwide,
    5578     .alignfull {
     5674    .entry-content > .alignleft,
     5675    .entry-content > p .alignleft,
     5676    .entry-content > .wp-block-image .alignleft {
     5677        position: absolute;
     5678        right: calc((100vw - 58rem) / 2 + 58rem);
     5679        max-width: calc((100% - 58rem) / 2 - 4rem);
     5680    }
     5681
     5682    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft,
     5683    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft,
     5684    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft {
     5685        position: relative;
     5686        right: inherit;
     5687        max-width: inherit;
     5688    }
     5689
     5690    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     5691    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     5692    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     5693    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     5694    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     5695    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
     5696        position: absolute;
     5697        right: calc((100% - 58rem) / 2 + 58rem);
     5698        max-width: calc((100% - 58rem) / 2 - 4rem);
     5699    }
     5700
     5701    .entry-content > .alignright,
     5702    .entry-content > p .alignright,
     5703    .entry-content > .wp-block-image .alignright,
     5704    [class*="__inner-container"] > .alignright {
     5705        position: absolute;
     5706        left: calc((100vw - 58rem) / 2 + 58rem);
     5707        max-width: calc((100% - 58rem) / 2 - 4rem);
     5708    }
     5709
     5710    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright,
     5711    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright,
     5712    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright {
     5713        position: relative;
     5714        left: inherit;
     5715        max-width: inherit;
     5716    }
     5717
     5718    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     5719    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     5720    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     5721    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     5722    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     5723    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
     5724        position: absolute;
     5725        left: calc((100% - 58rem) / 2 + 58rem);
     5726        max-width: calc((100% - 58rem) / 2 - 4rem);
     5727    }
     5728
     5729    .entry-content > .alignwide,
     5730    .entry-content > .alignfull {
    55795731        margin-bottom: 8rem;
    55805732        margin-top: 8rem;
    … …  
    57255877    /* BLOCK: GROUP */
    57265878
    5727     .wp-block-group.alignwide.has-background,
    5728     .wp-block-group.alignfull.has-background {
     5879    .entry-content > .wp-block-group.alignwide.has-background,
     5880    .entry-content > .wp-block-group.alignfull.has-background {
    57295881        padding: 8rem 6rem;
    57305882    }
    … …  
    57465898    /* ALIGNMENT CLASSES */
    57475899
    5748     .alignfull {
     5900    .entry-content > .alignfull {
    57495901        margin-bottom: 10rem;
    57505902        margin-top: 10rem;
    … …  
    58445996    .wp-block-separator.is-style-wide {
    58455997        max-width: 120rem;
    5846         left: calc(50% - 60rem);
    58475998        width: 120rem;
    58485999    }
    … …  
    58706021    .entry-content > .alignwide {
    58716022        max-width: 120rem;
    5872         left: calc(50% - 60rem);
    58736023        width: 120rem;
     6024    }
     6025
     6026    [class*="__inner-container"] > .alignwide {
     6027        max-width: 120rem;
     6028        width: 100%;
    58746029    }
    58756030

  • branches/5.3/src/wp-content/themes/twentytwenty/template-parts/content.php

    r46614 r46712  
    2626    ?>
    2727
    28     <div class="post-inner section-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
     28    <div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
    2929
    3030        <div class="entry-content">
    … …  
    4040        </div><!-- .entry-content -->
    4141
     42    </div><!-- .post-inner -->
     43
     44    <div class="section-inner">
    4245        <?php
    4346        wp_link_pages(
    … …  
    6265        ?>
    6366
    64     </div><!-- .post-inner -->
     67    </div><!-- .section-inner -->
    6568
    6669    <?php
Note: See TracChangeset for help on using the changeset viewer.