WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
12/14/2018 02:32:33 AM (6 years ago)
Author:
pento
Message:

Default Themes: Import Twenty Nineteen from the 5.0 branch.

Merges [43808,43821,43842,43860,43892,43904,43909,43926-43929,43956,43961-43963] from the 5.0 branch to trunk.

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, jorbin, netweb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins, peterwilsoncc, dannycooper, iCaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, grapplerulrich, ocean90, joshfeck, frankew, AbdulWahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, nao, mayukojpn, enodekciw, ketuchetan, atanasangelovdev, poena, sharaz, artisticasad, mukesh27, burhandodhy, crunnells, aprakasa, themeroots, imonly_ik, tlxo, youthkee, brentswisher, smyoon315, mrahmadawais, desideveloper, Kau-Boy, mor10, mikeyarce, dingo_bastard, xkon, twoabove.

Fixes #45424.

Location:
trunk
Files:
2 edited
1 copied

Legend:

Unmodified
Added
Removed

  • trunk

  • trunk/src/wp-content/themes/twentynineteen/style-editor.scss

    r43808 r44149  
    11/*!
    22Twenty Nineteen Editor Styles
    3 
    4 NOTE: Styling alignment styles require use of [data-align] selectors.
    5 This is not ideal, but it works. Styles using those selectors should be refactored
    6 when Gutenberg supports styling those variations more intuitively.
    73*/
    84
    … …  
    106
    117@import "sass/variables-site/variables-site";
    12 @import "sass/variables-site/colors";
    138@import "sass/mixins/mixins-master";
     9
     10/** === Editor Frame === */
     11
     12body {
     13
     14    .wp-block[data-align="full"] {
     15        width: 100%;
     16    }
     17
     18    @include media(mobile) {
     19
     20        .wp-block[data-align="full"] {
     21            width: calc( 100% + 90px );
     22            max-width: calc( 100% + 90px );
     23        }
     24    }
     25
     26    @include media(tablet) {
     27
     28        .editor-writing-flow {
     29            max-width: 80%;
     30            margin: 0 10%;
     31        }
     32
     33        .editor-post-title__block,
     34        .editor-default-block-appender,
     35        .editor-block-list__block {
     36            margin-left: 0;
     37            margin-right: 0;
     38        }
     39
     40        .wp-block[data-align="wide"] {
     41            width: 100%;
     42        }
     43
     44        .wp-block[data-align="full"] {
     45            position: relative;
     46            left: calc( -12.5% - 14px );
     47            width: calc( 125% + 116px );
     48            max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
     49        }
     50
     51        .wp-block[data-align="right"] {
     52            max-width: 125%;
     53        }
     54    }
     55}
     56
     57/** === Editor Block Toolbar Position === */
     58
     59// Since 2019 left-aligns wide and fullwide blocks, left align the toolbar too.
     60.editor-block-list__block[data-align="wide"] .editor-block-contextual-toolbar .editor-block-toolbar.editor-block-toolbar,
     61.editor-block-list__block[data-align="full"] .editor-block-contextual-toolbar .editor-block-toolbar.editor-block-toolbar {
     62        max-width: none;
     63}
    1464
    1565/** === Content Width === */
    … …  
    1767.wp-block {
    1868    width: calc(100vw - (2 * #{$size__spacing-unit}));
     69    max-width: 100%;
    1970
    2071    @include media(tablet) {
    … …  
    2475    @include media(desktop) {
    2576        width: calc(6 * (100vw / 12 ));
     77    }
     78
     79    // Only the top level blocks need specific widths, therefore override for every nested block.
     80    .wp-block {
     81        width: 100%;
    2682    }
    2783}
    … …  
    3288    font-size: $font__size_base;
    3389    font-family: $font__body;
     90    line-height: $font__line-height-body;
    3491    color: $color__text-main;
    3592}
    … …  
    46103h6 {
    47104    font-family: $font__heading;
     105    font-weight: 700;
    48106}
    49107
    … …  
    100158        outline: 0;
    101159        text-decoration: underline;
     160    }
     161}
     162
     163// Use white text against these backgrounds by default.
     164.has-primary-background-color,
     165.has-secondary-background-color,
     166.has-dark-gray-background-color,
     167.has-light-gray-background-color {
     168    color: $color__background-body;
     169
     170    p,
     171    h1,
     172    h2,
     173    h3,
     174    h4,
     175    h5,
     176    h6,
     177    a {
     178        color: $color__background-body;
     179    }
     180}
     181
     182// Use dark gray text against this background by default.
     183.has-white-background-color {
     184    color: $color__text-main;
     185
     186    p,
     187    h1,
     188    h2,
     189    h3,
     190    h4,
     191    h5,
     192    h6,
     193    a {
     194        color: $color__text-main;
    102195    }
    103196}
    … …  
    111204}
    112205
     206/** === Post Title === */
     207
     208.editor-post-title__block {
     209    @include post-section-dash;
     210
     211    &:before {
     212        width: $font__size-xxl;
     213        margin-top: 0;
     214        margin-bottom: 0;
     215        margin-left: 1em;
     216        position: relative;
     217        top: 0.5em;
     218    }
     219
     220    .editor-post-title__input {
     221        font-family: $font__heading;
     222        font-size: $font__size-xxl;
     223        font-weight: 700;
     224    }
     225}
     226
     227/** === Default Appender === */
     228
     229.editor-default-block-appender .editor-default-block-appender__content {
     230    font-family: $font__body;
     231    font-size: $font__size_base;
     232}
     233
     234/** === Heading === */
     235
     236.wp-block-heading {
     237    strong {
     238        font-weight: bolder;
     239    }
     240}
    113241/** === Paragraph === */
    114242
    … …  
    124252}
    125253
    126 /** === Cover Image === */
    127 
    128 .wp-block-cover-image {
     254/** === Table === */
     255
     256.wp-block-table {
     257    font-family: $font__heading;
     258}
     259
     260/** === Cover === */
     261
     262.wp-block-cover {
    129263
    130264    h2,
    131     .wp-block-cover-image-text {
     265    .wp-block-cover-text {
    132266        font-family: $font__heading;
    133         font-size: $font__size-xl;
     267        font-size: $font__size-lg;
    134268        font-weight: bold;
    135269        line-height: 1.4;
    136     }
    137 
    138     &.has-left-content {
    139         justify-content: center;
     270        padding-left: $size__spacing-unit;
     271        padding-right: $size__spacing-unit;
     272
     273        strong {
     274            font-weight: bolder;
     275        }
     276
     277        @include media(tablet) {
     278            margin-left: auto;
     279            margin-right: auto;
     280            padding: 0;
     281        }
     282    }
     283
     284    @include media(tablet) {
     285        padding-left: 10%;
     286        padding-right: 10%;
    140287
    141288        h2,
    142         .wp-block-cover-image-text {
    143             padding: 1em;
    144         }
    145     }
    146 
    147     &.has-right-content {
    148         justify-content: center;
     289        .wp-block-cover-text {
     290            font-size: $font__size-xl;
     291        }
     292    }
     293}
     294
     295.wp-block[data-type="core/cover"][data-align="left"],
     296.wp-block[data-type="core/cover"][data-align="right"] {
     297
     298    .editor-block-list__block-edit {
     299        width: calc(4 * (100vw / 12));
     300    }
     301
     302    .wp-block-cover {
     303        width: 100%;
     304        max-width: 100%;
     305    }
     306
     307    @include media(tablet) {
     308
     309        .wp-block-cover {
     310            padding: $size__spacing-unit;
     311        }
     312    }
     313}
     314
     315.wp-block[data-type="core/cover"][data-align="wide"],
     316.wp-block[data-type="core/cover"][data-align="full"] {
     317
     318    @include media(tablet) {
    149319
    150320        h2,
    151         .wp-block-cover-image-text {
    152             padding: 1em;
    153         }
    154     }
    155 }
    156 
    157 body[data-type="core/cover-image"][data-align="left"],
    158 body[data-type="core/cover-image"][data-align="right"] {
    159 
    160     h2,
    161     .wp-block-cover-image-text {
    162         width: 100%;
    163         max-width: 305px;
    164     }
    165 }
    166 
    167 body[data-type="core/cover-image"][data-align="wide"],
    168 body[data-type="core/cover-image"][data-align="full"] {
     321        .wp-block-cover-text {
     322            max-width: calc(8 * (100vw / 12));
     323        }
     324    }
    169325
    170326    @include media(desktop) {
     327
    171328        h2,
    172         .wp-block-cover-image-text {
    173             padding: 0;
    174             width: calc(6 * (100vw / 12));
     329        .wp-block-cover-text {
    175330            max-width: calc(6 * (100vw / 12));
     331        }
     332    }
     333}
     334
     335.wp-block[data-type="core/cover"][data-align="full"] {
     336
     337    @include media(tablet) {
     338
     339        .wp-block-cover {
     340            padding-left: calc(10% + 64px);
     341            padding-right: calc(10% + 64px);
    176342        }
    177343    }
    … …  
    201367    }
    202368
    203     .wp-block-button__link:not(.has-background),
    204     .wp-block-button__link:not(.has-background) {
     369    &:not(.is-style-outline) .wp-block-button__link {
    205370        background: $color__background-button;
    206371    }
    … …  
    210375    }
    211376
    212     &.is-style-outline .wp-block-button__link,
    213     &.is-style-outline .wp-block-button__link:hover,
    214     &.is-style-outline .wp-block-button__link:focus,
    215     &.is-style-outline .wp-block-button__link:active {
     377    &.is-style-outline,
     378    &.is-style-outline:hover,
     379    &.is-style-outline:focus,
     380    &.is-style-outline:active {
    216381        background: transparent;
    217         border-color: $color__background-button;
    218 
    219         &:not(.has-text-color) {
    220             color: $color__background-button;
     382        color: $color__background-button;
     383
     384        .wp-block-button__link {
     385            background: transparent;
     386
     387            &:not(.has-text-color) {
     388                color: $color__background-button;
     389            }
    221390        }
    222391    }
    … …  
    258427
    259428.wp-block-pullquote {
    260     border: none;
     429    border-color: transparent;
     430    border-width: 2px;
     431    color: #000;
     432
     433    blockquote {
     434        margin-top: calc(3 * #{ $size__spacing-unit});
     435        margin-bottom: calc(3.33 * #{ $size__spacing-unit});
     436        hyphens: auto;
     437        word-break: break-word;
     438    }
     439
     440    &:not(.is-style-solid-color) .wp-block-pullquote__citation {
     441        color: $color__text-light;
     442    }
    261443
    262444    &.is-style-solid-color {
    263445
    264446        blockquote {
    265             width: calc(100vw - (2 * #{ $size__spacing-unit}));
    266             max-width: 80%;
     447            width: calc(100% - (2 * #{ $size__spacing-unit}));
     448            max-width: calc( 100% - (2 * #{ $size__spacing-unit}));
     449
     450            a,
     451            &.has-text-color p,
     452            &.has-text-color a {
     453                color: inherit;
     454            }
     455
     456            &:not(.has-text-color) {
     457                color: $color__background-body;
     458            }
    267459
    268460            @include media(tablet) {
    269                 width: calc(8 * (100vw / 12));
     461                max-width: 80%;
    270462            }
    271 
    272             @include media(desktop) {
    273                 width: calc(6 * (100vw / 12));
    274             }
    275         }
    276 
    277         blockquote:not(.has-text-color) p,
    278         .wp-block-pullquote__citation {
    279             color: white;
    280463        }
    281464
    … …  
    284467        }
    285468    }
    286 
    287     blockquote {
    288         hyphens: auto;
    289         word-break: break-word;
    290     }
    291 }
    292 
    293 body[data-type="core/pullquote"],
    294 body[data-type="core/pullquote"][data-align="left"],
    295 body[data-type="core/pullquote"][data-align="right"] {
     469}
     470
     471.wp-block[data-type="core/pullquote"],
     472.wp-block[data-type="core/pullquote"][data-align="left"],
     473.wp-block[data-type="core/pullquote"][data-align="right"] {
    296474
    297475    blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    … …  
    303481        margin-bottom: 0.5em;
    304482        margin-top: 0.5em;
    305         color: $color__text-main;
    306483
    307484        @include media(tablet) {
    … …  
    315492        line-height: 1.6;
    316493        text-transform: none;
    317         color: $color__text-light;
    318494    }
    319495
    … …  
    323499}
    324500
    325 body[data-type="core/pullquote"][data-align="left"],
    326 body[data-type="core/pullquote"][data-align="right"] {
     501.wp-block[data-type="core/pullquote"][data-align="left"],
     502.wp-block[data-type="core/pullquote"][data-align="right"] {
    327503
    328504    .editor-block-list__block-edit {
     505        width: calc(4 * (100vw / 12));
    329506        max-width: 50%;
    330507
    … …  
    335512        .wp-block-pullquote.is-style-solid-color {
    336513            padding: 1em;
    337 
    338             p,
    339             .wp-block-pullquote__citation {
    340                 color: white;
    341             }
    342514        }
    343515    }
    … …  
    351523}
    352524
     525.wp-block[data-type="core/pullquote"][data-align="full"] {
     526
     527    @include media(tablet) {
     528
     529        .wp-block-pullquote blockquote {
     530            max-width: calc(80% - 128px);
     531        }
     532    }
     533}
     534
     535
    353536/** === File === */
    354537
    … …  
    356539    font-family: $font__heading;
    357540
     541    .wp-block-file__textlink {
     542        text-decoration: underline;
     543        color: $color__link;
     544
     545        &:hover {
     546            color: $color__link-hover;
     547            text-decoration: none;
     548        }
     549    }
     550
    358551    .wp-block-file__button {
     552        display: table;
    359553        line-height: 1.8;
    360554        font-size: $font__size-sm;
    … …  
    363557        border-radius: 5px;
    364558    }
     559
     560    .wp-block-file__button-richtext-wrapper {
     561        display: block;
     562        margin-top: calc(0.75 * #{$size__spacing-unit});
     563        margin-left: 0;
     564    }
     565
    365566}
    366567
    … …  
    403604        color: $color__text-light;
    404605        font-size: $font__size-lg;
    405         letter-spacing: $font__size-sm;
     606        letter-spacing: calc(2 * #{$size__spacing-unit});
     607        padding-left: calc(2 * #{$size__spacing-unit});
    406608    }
    407609}
    … …  
    421623
    422624    li {
     625        color: $color__text-light;
    423626        font-family: $font__heading;
    424         font-size: $font__size-lg;
     627        font-size: calc(#{$font__size_base} * #{$font__size-ratio});
    425628        font-weight: bold;
    426629        line-height: $font__line-height-heading;
     630        padding-bottom: ( .75 * $size__spacing-unit );
     631
     632        &.menu-item-has-children,
     633        &:last-child {
     634            padding-bottom: 0;
     635        }
    427636
    428637        a {
    429638            text-decoration: none;
    430 
    431             &:after {
    432                 color: $color__text-light;
    433                 content: ",";
    434             }
    435         }
    436 
    437         &:last-child a:after {
    438             color: $color__text-light;
    439             content: ".";
    440         }
    441     }
     639        }
     640
     641        ul {
     642            padding-left: $size__spacing-unit;
     643        }
     644    }
     645}
     646
     647.wp-block-categories {
     648
     649    ul {
     650        padding-top: ( .75 * $size__spacing-unit );
     651        @include nestedSubMenuPadding();
     652    }
     653
     654    li ul {
     655        list-style: none;
     656        padding-left: 0;
     657        margin-bottom: ( -.75 * $size__spacing-unit );
     658    }
     659
    442660}
    443661
    … …  
    491709.wp-caption {
    492710    dd {
     711        color: $color__text-light;
     712        font-size: $font__size-xs;
     713        font-family: $font__heading;
     714        line-height: $font__line-height-pre;
     715        margin: 0;
     716        padding: ( $size__spacing-unit * .5 );
     717        text-align: left;
    493718        text-align: center;
    494719        -webkit-margin-start: 0px;
    … …  
    500725
    501726    /* Add style for galleries in classic-editor block */
    502     .gallery {
    503 
    504         display: flex;
    505 
    506         .gallery-item {
    507             padding: ( $size__spacing-unit * .5 );
    508             text-align: center;
    509             vertical-align: top;
    510             width: 100%;
    511 
    512             .gallery-caption {
    513                 margin: 0;
    514             }
    515         }
    516 
    517         // Loops to enumerate the classes for gallery columns.
    518         @for $i from 2 through 9 {
    519             &.gallery-columns-#{$i} .gallery-item {
    520                 max-width: calc( ( 12 / #{$i} ) * (100% / 12) );
    521             }
    522         }
    523     }
    524 }
     727    blockquote {
     728        border-left: 2px solid $color__link;
     729
     730        cite {
     731            font-family: $font__heading;
     732            font-size: $font__size-xs;
     733            font-style: normal;
     734            line-height: 1.6;
     735            color: $color__text-light;
     736        }
     737    }
     738}
     739
     740/* Make sure our non-latin font overrides don't overwrite the iconfont used in the classic editor toolbar */
     741.wp-block[data-type="core/freeform"] .mce-btn i {
     742    font-family: dashicons !important;
     743}
Note: See TracChangeset for help on using the changeset viewer.