WordPress.org

Make WordPress Core


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

    r43860 r43892  
    99@import "sass/mixins/mixins-master";
    1010
     11/*
     12 * Chrome renders extra-wide   characters for the Hoefler Text font.
     13 * This results in a jumping cursor when typing in both the Classic and block
     14 * editors. The following font-face override fixes the issue by manually inserting
     15 * a custom font that includes just a Hoefler Text space replacement for that
     16 * character instead.
     17 */
     18@font-face {
     19    font-family: 'NonBreakingSpaceOverride';
     20    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format('woff2'),
     21         url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format('woff');
     22
     23}
     24
    1125/** === Editor Frame === */
    1226
    1327body {
    1428
    15     // Non-standard media query necessary to override a Gutenberg breakpoint style.
    16     @media screen and (min-width: 600px) {
     29    .wp-block[data-align="full"] {
     30        width: 100%;
     31    }
     32
     33    @include media(mobile) {
     34        padding-top: 0;
     35
     36        :not(.editor-inner-blocks) > .editor-block-list__layout, // Target only the top level layout element, or nested blocks will also be affected.
     37        .editor-post-title {
     38            padding-left: 0;
     39            padding-right: 0;
     40        }
     41
     42        .editor-writing-flow {
     43            padding-top: 50px;
     44            overflow: hidden;
     45        }
     46
    1747        .wp-block[data-align="full"] {
    18             width: calc( 100% + 90px );
    19             max-width: calc( 100% + 90px );
     48            position: relative;
     49            left: 45px;
    2050        }
    2151    }
    2252
    2353    @include media(tablet) {
    24         overflow-x: hidden;
    25 
    26         .editor-writing-flow {
     54
     55        :not(.editor-inner-blocks) > .editor-block-list__layout, // Target only the top level layout element, or nested blocks will also be affected.
     56        .editor-post-title {
     57            padding-left: 46px;
     58            padding-right: 46px;
     59        }
     60
     61        .editor-block-list__layout,
     62        .editor-post-title {
    2763            max-width: 80%;
    2864            margin: 0 10%;
     
    67103    }
    68104
     105    // Only the top level blocks need specific widths, therefore override for every nested block.
    69106    .wp-block {
    70107        width: 100%;
     
    76113body {
    77114    font-size: $font__size_base;
    78     font-family: $font__body;
     115    font-family: 'NonBreakingSpaceOverride', $font__body;
     116    line-height: $font__line-height-body;
    79117    color: $color__text-main;
    80118}
     
    148186}
    149187
    150 .has-primary-background-color { 
    151    
     188.has-primary-background-color {
     189
    152190    p,
    153     h1, 
     191    h1,
    154192    h2,
    155193    h3,
    156194    h4,
    157195    h5,
    158     h6, 
     196    h6,
    159197    a,
    160198    a:hover {
     
    188226        font-family: $font__heading;
    189227        font-size: $font__size-xxl;
     228        font-weight: 700;
    190229    }
    191230}
     
    198237}
    199238
     239/** === Heading === */
     240
     241.wp-block-heading {
     242    strong {
     243        font-weight: bolder;
     244    }
     245}
    200246/** === Paragraph === */
    201247
     
    218264    .wp-block-cover-text {
    219265        font-family: $font__heading;
    220         font-size: $font__size-xl;
     266        font-size: $font__size-lg;
    221267        font-weight: bold;
    222268        line-height: 1.4;
    223     }
    224 
    225     &.has-left-content {
     269        padding-left: $size__spacing-unit;
     270        padding-right: $size__spacing-unit;
     271
     272        strong {
     273            font-weight: bolder;
     274        }
     275
     276        @include media(tablet) {
     277            margin-left: auto;
     278            margin-right: auto;
     279            padding: 0;
     280        }
     281    }
     282
     283    @include media(tablet) {
     284        padding-left: 10%;
     285        padding-right: 10%;
    226286
    227287        h2,
    228288        .wp-block-cover-text {
    229             padding: 1em;
    230         }
    231     }
    232 
    233     &.has-right-content {
     289            font-size: $font__size-xl;
     290        }
     291    }
     292}
     293
     294.wp-block[data-type="core/cover"][data-align="left"],
     295.wp-block[data-type="core/cover"][data-align="right"] {
     296
     297    .editor-block-list__block-edit {
     298        width: calc(4 * (100vw / 12));
     299    }
     300
     301    .wp-block-cover {
     302        width: 100%;
     303        max-width: 100%;
     304    }
     305}
     306
     307.wp-block[data-type="core/cover"][data-align="wide"],
     308.wp-block[data-type="core/cover"][data-align="full"] {
     309
     310    @include media(tablet) {
    234311
    235312        h2,
    236313        .wp-block-cover-text {
    237             padding: 1em;
    238         }
    239     }
    240 }
    241 
    242 .wp-block[data-type="core/cover"][data-align="left"],
    243 .wp-block[data-type="core/cover"][data-align="right"] {
    244 
    245     h2,
    246     .wp-block-cover-text {
    247         width: 100%;
    248         max-width: 305px;
    249     }
    250 }
    251 
    252 .wp-block[data-type="core/cover"][data-align="wide"],
    253 .wp-block[data-type="core/cover"][data-align="full"] {
     314            max-width: calc(8 * (100vw / 12));
     315        }
     316    }
    254317
    255318    @include media(desktop) {
     319
    256320        h2,
    257321        .wp-block-cover-text {
    258             padding: 0;
    259             width: calc(6 * (100vw / 12));
    260322            max-width: calc(6 * (100vw / 12));
     323        }
     324    }
     325}
     326
     327.wp-block[data-type="core/cover"][data-align="full"] {
     328
     329    @include media(tablet) {
     330
     331        .wp-block-cover {
     332            padding-left: calc(10% + 64px);
     333            padding-right: calc(10% + 64px);
    261334        }
    262335    }
     
    347420.wp-block-pullquote {
    348421    border: none;
     422    color: #000;
     423
     424    blockquote {
     425        margin-top: calc(3 * #{ $size__spacing-unit});
     426        margin-bottom: calc(3.33 * #{ $size__spacing-unit});
     427        hyphens: auto;
     428        word-break: break-word;
     429    }
     430
     431    &:not(.is-style-solid-color) .wp-block-pullquote__citation {
     432        color: $color__text-light;
     433    }
    349434
    350435    &.is-style-solid-color {
    351436
    352437        blockquote {
    353             width: calc(100vw - (2 * #{ $size__spacing-unit}));
    354             max-width: 80%;
     438            width: calc(100% - (2 * #{ $size__spacing-unit}));
     439            max-width: calc( 100% - (2 * #{ $size__spacing-unit}));
    355440
    356441            @include media(tablet) {
    357                 width: calc(8 * (100vw / 12));
    358             }
    359 
    360             @include media(desktop) {
    361                 width: calc(6 * (100vw / 12));
     442                max-width: 80%;
    362443            }
    363444        }
     
    370451            background-color: $color__link;
    371452        }
    372     }
    373 
    374     blockquote {
    375         hyphens: auto;
    376         word-break: break-word;
    377453    }
    378454}
     
    412488
    413489    .editor-block-list__block-edit {
     490        width: calc(4 * (100vw / 12));
    414491        max-width: 50%;
    415492
     
    430507    }
    431508}
     509
     510.wp-block[data-type="core/pullquote"][data-align="full"] {
     511   
     512    @include media(tablet) {
     513       
     514        .wp-block-pullquote blockquote {
     515            max-width: calc(80% - 128px);
     516        }
     517    }
     518}
     519
    432520
    433521/** === File === */
     
    502590
    503591    li {
     592        color: $color__text-light;
    504593        font-family: $font__heading;
    505594        font-size: calc(#{$font__size_base} * #{$font__size-ratio});
    506595        font-weight: bold;
    507596        line-height: $font__line-height-heading;
    508 
    509         &:not(.menu-item-has-children) {
    510             padding-bottom: ( .75 * $size__spacing-unit );
     597        padding-bottom: ( .75 * $size__spacing-unit );
     598
     599        &.menu-item-has-children,
     600        &:last-child {
     601            padding-bottom: 0;
    511602        }
    512603
     
    519610        }
    520611    }
     612}
     613
     614.wp-block-categories {
     615
     616    ul {
     617        padding-top: ( .75 * $size__spacing-unit );
     618        @include nestedSubMenuPadding();
     619    }
     620
     621    li ul {
     622        list-style: none;
     623        padding-left: 0;
     624        margin-bottom: ( -.75 * $size__spacing-unit );
     625    }
     626
    521627}
    522628
Note: See TracChangeset for help on using the changeset viewer.