WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/12/2018 11:19:13 PM (6 years ago)
Author:
allancole
Message:

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update applies the following changes:

  • Improve menu UI to support keyboard, click and touch interactions
  • Improve variable scoping and js performance in menu interaction javascript
  • Improve custom-colors for selected text, buttons and menu hover styles
  • Improve margins structure for more consistency between editor and frontend
  • Improve discussion avatars for simpler wording and better performance
  • Improve fonts in list widgets and list blocks
  • Improve comment responsive spacing and avatar display
  • Improve various block styles to make them consistent between the editor and frontend
  • Add tabbed browsing support for ie11
  • Add backwards compatibility support for older versions of WordPress
  • Add fallback styles for older versions of WP where Gutenberg is activated and then deactivated (backwards compatibility)
  • Add sizes attribute for featured images to improve responsive performance
  • Add focus-within polyfill
  • Add a footer menu for secondary page links
  • Fix editor styles to prevent conflicts with plugins that add meta boxes to the editor
  • Fix columns block issues on small screens
  • Fix empty-space font text cursor issue in Gutenberg editor
  • Fix RTL floating styles so that left/right floats are honored
  • Fix cover image block margins/padding
  • Fix invalid rgba style
  • Fix php warning when returning attributes
  • Fix gallery widget margins to improve gallery grids
  • Fix .entry-content selectors to prevent shortcodes, plugins and other unknown content from breaking the layout
  • Remove translation escaping to follow code standards in previous default themes
  • Remove custom color output in the fronten header when default color is selected
  • Remove fly-out sub-sub-sub-menu behavior on desktop to prevent sub-menus from falling off the screen
  • General code clean up and coding standards improvements

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa, @tlxo, @themeroots, @whizbangik, @yingles, @youthkee, @brentswisher, @smy315, @ahmadawais, @desi-developer.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

    r43860 r43892  
    11/* !Block styles */
    22
    3 .entry-content > *,
    4 .entry-summary > * {
     3.entry .entry-content > *,
     4.entry .entry-summary > * {
     5    margin: 32px 0;
     6    max-width: 100%;
     7
    58    @include postContentMaxWidth();
    69
    7     margin: 32px $size__spacing-unit;
    8 
    910    @include media(tablet) {
    10         margin: 32px calc(2 * (100vw / 12));
    11     }
    12 /*
    13     // Set top margins for headings
    14     & + h1:before,
    15     & + h2:before,
    16     & + h3,
    17     & + h4,
    18     & + h5,
    19     & + h6 {
    20         margin-top: calc(4 * #{ $size__spacing-unit});
    21     }
    22 */
     11        margin: 32px 0;
     12    }
    2313
    2414    > *:first-child {
    … …  
    3121
    3222    &.alignwide {
    33 
    3423        margin-left: auto;
    3524        margin-right: auto;
     25        clear: both;
    3626
    3727        @include media(tablet) {
    38             margin-left: calc(2 * (100vw / 12));
    39             margin-right: calc(2 * (100vw / 12));
    40             max-width: calc(8 * (100vw / 12));
     28            width: 100%;
     29            max-width: 100%;
    4130        }
    4231    }
    4332
    4433    &.alignfull {
    45         margin-top: calc(2 * #{$size__spacing-unit});
    46         margin-right: 0;
    47         margin-bottom: calc(2 * #{$size__spacing-unit});
    48         margin-left: 0;
    49         max-width: 100%;
     34        position: relative;
     35        left: -#{$size__spacing-unit };
     36        width: calc( 100% + (2 * #{$size__spacing-unit}));
     37        max-width: calc( 100% + (2 * #{$size__spacing-unit}));
     38        clear: both;
     39
     40        @include media(tablet) {
     41            margin-top: calc(2 * #{$size__spacing-unit});
     42            margin-bottom: calc(2 * #{$size__spacing-unit});
     43            left: calc( -12.5% - 75px );
     44            width: calc( 125% + 150px );
     45            max-width: calc( 125% + 150px );
     46        }
    5047    }
    5148
    5249    &.alignleft {
     50        /*rtl:ignore*/
    5351        float: left;
    5452        max-width: calc(5 * (100vw / 12));
    5553        margin-top: 0;
     54        margin-left: 0;
     55        /*rtl:ignore*/
     56        margin-right: $size__spacing-unit;
    5657
    5758        @include media(tablet) {
    5859            max-width: calc(4 * (100vw / 12));
     60            /*rtl:ignore*/
    5961            margin-right: calc(2 * #{$size__spacing-unit});
    6062        }
    … …  
    6668
    6769    &.alignright {
     70        /*rtl:ignore*/
    6871        float: right;
    6972        max-width: calc(5 * (100vw / 12));
    7073        margin-top: 0;
     74        margin-right: 0;
     75        /*rtl:ignore*/
    7176        margin-left: $size__spacing-unit;
    72         margin-right: $size__spacing-unit;
    7377
    7478        @include media(tablet) {
    7579            max-width: calc(4 * (100vw / 12));
     80            margin-right: 0;
     81            /*rtl:ignore*/
    7682            margin-left: calc(2 * #{$size__spacing-unit});
    77             margin-right: calc(2 * (100vw / 12));
    7883        }
    7984    }
    8085    &.aligncenter {
    81 
    8286        margin-left: auto;
    8387        margin-right: auto;
    8488
    85         @include media(desktop) {
    86             margin-left: calc(2 * (100vw / 12));
    87             margin-right: calc(2 * (100vw / 12));
    88             max-width: calc(10 * (100vw / 12));
    89             position: relative;
    90             left: 25%;
    91             transform: translate(-50%);
     89        @include postContentMaxWidth();
     90
     91        @include media(tablet) {
     92            margin-left: 0;
     93            margin-right: 0;
    9294        }
    9395    }
    9496}
    9597
    96 .entry-content {
     98/*
     99 * Unset nested content selector styles
     100 * - Prevents layout styles from cascading too deeply
     101 * - helps with plugin compatibility
     102 */
     103.entry .entry-content,
     104.entry .entry-summary {
     105
     106    .entry-content,
     107    .entry-summary,
     108    .entry {
     109        margin: inherit;
     110        max-width: inherit;
     111        padding: inherit;
     112
     113        @include media(tablet) {
     114            margin: inherit;
     115            max-width: inherit;
     116            padding: inherit;
     117        }
     118    }
     119}
     120
     121.entry .entry-content {
     122
     123    //! Paragraphs
     124    p.has-background {
     125        padding: 20px 30px;
     126    }
    97127
    98128    //! Audio
    … …  
    108138        &.alignright audio {
    109139
    110             max-width: (0.5 * $mobile_width);
     140            max-width: (0.33 * $mobile_width);
    111141
    112142            @include media(tablet) {
    … …  
    152182
    153183            &:hover {
     184                background: $color__background-button-hover;
    154185                cursor: pointer;
    155186            }
    156187
    157             &:hover, &:focus {
     188            &:focus {
    158189                background: $color__background-button-hover;
    159             }
    160 
    161             &:focus {
    162190                outline: thin dotted;
    163191                outline-offset: -4px;
    … …  
    197225            font-weight: bold;
    198226            line-height: $font__line-height-heading;
    199 
    200             &:not(.menu-item-has-children) {
    201                 padding-bottom: ( .75 * $size__spacing-unit );
     227            padding-bottom: ( .75 * $size__spacing-unit );
     228
     229            &.menu-item-has-children,
     230            &:last-child {
     231                padding-bottom: 0;
    202232            }
    203233
    … …  
    205235                text-decoration: none;
    206236            }
    207 
    208             ul {
    209                 padding-left: $size__spacing-unit;
    210             }
    211         }
     237        }
     238    }
     239
     240    //! Latest categories
     241    .wp-block-categories {
     242
     243        ul {
     244            padding-top: ( .75 * $size__spacing-unit );
     245        }
     246       
     247        li ul {
     248            list-style: none;
     249            padding-left: 0;
     250        }
     251
     252        @include nestedSubMenuPadding();
    212253    }
    213254
    … …  
    265306            color: $color__text-main;
    266307            border: none;
    267             padding-bottom: calc(2 * #{$size__spacing-unit});
     308            margin-top: calc(4 * #{ $size__spacing-unit});
     309            margin-bottom: calc(4.33 * #{ $size__spacing-unit});
    268310            margin-right: 0;
    269311        }
    … …  
    288330            display: inline-block;
    289331            font-family: $font__heading;
    290             font-size: $font__size-xs;
    291332            line-height: 1.6;
    292333            text-transform: none;
     334            color: $color__text-light;
     335
     336            /*
     337             * This requires a rem-based font size calculation instead of our normal em-based one,
     338             * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
     339             */
     340            font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
    293341        }
    294342
    295343        &.alignleft,
    296344        &.alignright {
     345            width: 100%;
    297346            padding: 0;
    298347
    … …  
    306355
    307356        &.is-style-solid-color {
    308 
    309357            background-color: $color__link;
     358            padding-left: 0;
     359            padding-right: 0;
     360
     361            @include media(tablet) {
     362                padding-left: 10%;
     363                padding-right: 10%;
     364            }
    310365
    311366            p {
    … …  
    324379            }
    325380
     381            cite {
     382                color: inherit;
     383            }
     384
    326385            blockquote {
     386                max-width: calc(100% - (2 * #{$size__spacing-unit}));
    327387                color: $color__background-body;
    328                 margin: 0 auto;
     388                padding-left: 0;
     389                margin-left: $size__spacing-unit;
     390
     391                @include media(tablet) {
     392                    margin-left: 0;
     393                    margin-right: 0;
     394                }
    329395            }
    330396
    … …  
    333399            }
    334400
    335             &.alignleft,
    336             &.alignright {
    337                 padding: $size__spacing-unit $size__spacing-unit 0;
    338 
    339                 blockquote {
    340                     padding: 0 0 calc( 1.5 * #{$size__spacing-unit} );
    341                     margin-left: 0;
    342                     margin-top: 0;
    343                 }
     401            &.alignfull {
    344402
    345403                @include media(tablet) {
    346                     padding: calc( 2 * #{$size__spacing-unit} ) calc( 2 * #{$size__spacing-unit} ) $size__spacing-unit;
     404                    padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
     405                    padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
    347406                }
    348407            }
    … …  
    367426
    368427        cite {
    369             font-size: $font__size-xs;
     428            /*
     429             * This requires a rem-based font size calculation instead of our normal em-based one,
     430             * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
     431             */
     432            font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
    370433        }
    371434
    372435        &.is-large,
    373436        &.is-style-large {
    374             padding: $size__spacing-unit 0 ($size__spacing-unit) ($size__spacing-unit * 2);
    375437            margin: $size__spacing-unit 0;
     438            padding: 0;
    376439            border-left: none;
    377440
    … …  
    384447            cite,
    385448            footer {
    386                 font-size: $font__size-xs;
     449                /*
     450                 * This requires a rem-based font size calculation instead of our normal em-based one,
     451                 * because the cite tag sometimes gets wrapped in a p tag. This is equivalent to $font-size_xs.
     452                 */
     453                font-size: calc(1rem / (1.25 * #{$font__size-ratio}));
    387454            }
    388455
    389456            @include media(tablet) {
    390 
    391                 margin: $size__spacing-unit calc(2 * (100vw / 12));
    392                 max-width: calc(6 * (100vw / 12));
     457                margin: $size__spacing-unit 0;
     458                padding: $size__spacing-unit 0;
    393459
    394460                p {
    … …  
    413479        &.alignfull img {
    414480            width: 100vw;
    415             margin-left: auto;
    416             margin-right: auto;
     481
     482            @include media(tablet) {
     483                margin-left: auto;
     484                margin-right: auto;
     485            }
    417486        }
    418487    }
    … …  
    421490    .wp-block-cover-image,
    422491    .wp-block-cover {
     492        position: relative;
     493        min-height: 430px;
     494        padding: $size__spacing-unit;
     495
     496        @include media(tablet) {
     497            padding: $size__spacing-unit 10%;
     498        }
    423499
    424500        .wp-block-cover-image-text,
    … …  
    428504            font-size: $font__size-lg;
    429505            font-weight: bold;
    430 
    431             width: calc(100vw - (2 * #{ $size__spacing-unit }));
    432             max-width: calc(100vw - (2 * #{ $size__spacing-unit }));
     506            line-height: 1.25;
     507            padding: 0;
     508            color: #fff;
    433509
    434510            @include media(tablet) {
    435511                font-size: $font__size-xl;
    436                 width: calc(8 * (100vw / 12));
    437                 max-width: calc(8 * (100vw / 12));
    438             }
    439 
    440             @include media(desktop) {
    441                 width: calc(6 * (100vw / 12 ));
    442                 max-width: calc(6 * (100vw / 12 ));
    443             }
    444         }
    445 
    446         &.alignleft,
    447         &.alignright,
     512                max-width: 100%;
     513            }
     514        }
     515
    448516        &.aligncenter {
    449517            h2,
    … …  
    459527        }
    460528
    461         &.aligncenter {
    462             margin: 32px calc(2 * (100vw / 12));
    463             max-width: calc(6 * (100vw / 12));
    464         }
    465 
    466         &.has-left-content {
    467             justify-content: center;
    468 
    469             h2,
     529        &.alignleft,
     530        &.alignright {
     531            width: 100%;
     532        }
     533
     534        &.alignfull {
     535
    470536            .wp-block-cover-image-text,
    471             .wp-block-cover-text {
    472                 padding: $size__spacing-unit;
    473             }
    474         }
    475 
    476         &.has-right-content {
    477             justify-content: center;
    478 
    479             h2,
    480             .wp-block-cover-image-text,
    481             .wp-block-cover-text {
    482                 padding: $size__spacing-unit;
     537            .wp-block-cover-text,
     538            h2 {
     539                @include postContentMaxWidth();
     540            }
     541
     542            @include media(tablet) {
     543                padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
     544                padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
     545
     546                .wp-block-cover-image-text,
     547                .wp-block-cover-text,
     548                h2 {
     549                    padding: 0;
     550                }
    483551            }
    484552        }
    … …  
    486554
    487555    //! Galleries
    488     .wp-block-gallery .blocks-gallery-image:last-child,
    489     .wp-block-gallery .blocks-gallery-item:last-child {
    490         margin-bottom: 16px;
     556    .wp-block-gallery {
     557        list-style-type: none;
     558        padding-left: 0;
     559
     560        .blocks-gallery-image:last-child,
     561        .blocks-gallery-item:last-child {
     562            margin-bottom: 16px;
     563        }
    491564    }
    492565
    … …  
    508581    .wp-block-separator,
    509582    hr {
     583        background-color: $color__text-light;
     584        border: 0;
     585        height: 2px;
    510586        margin-bottom: (2 * $size__spacing-unit);
    511587        margin-top: (2 * $size__spacing-unit);
     588        max-width: 2.25em;
    512589        text-align: left;
    513590
    514         &:not(.is-style-dots) {
    515             background-color: $color__text-light;
    516             border: 0;
    517             height: 2px;
    518         }
    519 
    520         &:not(.is-style-wide):not(.is-style-dots) {
    521             max-width: 2.25em;
    522         }
    523 
    524         /* Remove duplicate rule-line when a separator
    525          * is followed by an H1, or H2 */
    526         & + h1,
    527         & + h2 {
    528 
    529             &:before {
    530                 display: none;
    531             }
     591        &.is-style-wide {
     592            max-width: 100%;
     593            @include postContentMaxWidth();
    532594        }
    533595
    534596        &.is-style-dots {
     597            max-width: 100%;
    535598            @include postContentMaxWidth();
     599            background-color: inherit;
     600            border: inherit;
     601            height: inherit;
    536602            text-align: center;
    537603
    … …  
    543609            }
    544610        }
     611
     612        /* Remove duplicate rule-line when a separator
     613         * is followed by an H1, or H2 */
     614        & + h1,
     615        & + h2 {
     616
     617            &:before {
     618                display: none;
     619            }
     620        }
    545621    }
    546622
    … …  
    553629    .wp-block-table {
    554630
    555         td, th {
     631        th,
     632        td {
    556633            border-color: $color__text-light;
    557634        }
    … …  
    570647            font-family: $font__heading;
    571648            line-height: $font__line-height-heading;
     649            text-decoration: none;
    572650            font-weight: bold;
    573651            padding: ($size__spacing-unit * .75) $size__spacing-unit;
     652            color: #fff;
    574653
    575654            @include media(desktop) {
    … …  
    579658
    580659            &:hover {
     660                background: $color__background-button-hover;
    581661                cursor: pointer;
    582662            }
    583663
    584             &:hover, &:focus {
     664            &:focus {
    585665                background: $color__background-button-hover;
    586             }
    587 
    588             &:focus {
    589666                outline: thin dotted;
    590667                outline-offset: -4px;
    591668            }
     669        }
     670
     671        * + .wp-block-file__button {
     672            margin-left: ($size__spacing-unit * .75);
    592673        }
    593674    }
    … …  
    607688    .wp-block-columns {
    608689
    609         .wp-block-column > * {
    610 
    611             &:first-child {
    612                 margin-top: 0;
    613             }
    614 
    615             &:last-child {
    616                 margin-bottom: 0;
    617             }
    618         }
    619 
    620         &[class*='has-'] > * {
    621             margin-right: $size__spacing-unit;
    622 
    623             &:last-child {
    624                 margin-right: 0;
     690        @include media(tablet) {
     691            .wp-block-column > * {
     692
     693                &:first-child {
     694                    margin-top: 0;
     695                }
     696
     697                &:last-child {
     698                    margin-bottom: 0;
     699                }
     700            }
     701
     702            &[class*='has-'] > * {
     703                margin-right: $size__spacing-unit;
     704
     705                &:last-child {
     706                    margin-right: 0;
     707                }
    625708            }
    626709        }
Note: See TracChangeset for help on using the changeset viewer.