WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/12/2018 11:19:13 PM (8 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.