WordPress.org

Make WordPress Core


Ignore:
Timestamp:
11/02/2018 11:52:16 PM (13 months ago)
Author:
allancole
Message:

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

Let Gutenberg shine with this simple, fast, and powerful theme. 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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/src/wp-content/themes/twentynineteen/style-editor.scss

    r43842 r43860  
    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
     
    139@import "sass/mixins/mixins-master";
    1410
     11/** === Editor Frame === */
     12
     13body {
     14
     15    // Non-standard media query necessary to override a Gutenberg breakpoint style.
     16    @media screen and (min-width: 600px) {
     17        .wp-block[data-align="full"] {
     18            width: calc( 100% + 90px );
     19            max-width: calc( 100% + 90px );
     20        }
     21    }
     22
     23    @include media(tablet) {
     24        overflow-x: hidden;
     25
     26        .editor-writing-flow {
     27            max-width: 80%;
     28            margin: 0 10%;
     29        }
     30
     31        .editor-post-title__block,
     32        .editor-default-block-appender,
     33        .editor-block-list__block {
     34            margin-left: 0;
     35            margin-right: 0;
     36        }
     37
     38        .wp-block[data-align="wide"] {
     39            width: 100%;
     40        }
     41
     42        .wp-block[data-align="full"] {
     43            position: relative;
     44            left: calc( -12.5% - 14px );
     45            width: calc( 125% + 116px );
     46            max-width: calc( 125% + 116px );
     47        }
     48
     49        .wp-block[data-align="right"] {
     50            max-width: 125%;
     51        }
     52    }
     53}
     54
    1555/** === Content Width === */
    1656
    1757.wp-block {
    1858    width: calc(100vw - (2 * #{$size__spacing-unit}));
     59    max-width: 100%;
    1960
    2061    @include media(tablet) {
     
    2465    @include media(desktop) {
    2566        width: calc(6 * (100vw / 12 ));
     67    }
     68
     69    .wp-block {
     70        width: 100%;
    2671    }
    2772}
     
    126171}
    127172
     173/** === Post Title === */
     174
     175.editor-post-title__block {
     176    @include post-section-dash;
     177
     178    &:before {
     179        width: $font__size-xxl;
     180        margin-top: 0;
     181        margin-bottom: 0;
     182        margin-left: 1em;
     183        position: relative;
     184        top: 0.5em;
     185    }
     186
     187    .editor-post-title__input {
     188        font-family: $font__heading;
     189        font-size: $font__size-xxl;
     190    }
     191}
     192
     193/** === Default Appender === */
     194
     195.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     196    font-family: $font__body;
     197    font-size: $font__size_base;
     198}
     199
    128200/** === Paragraph === */
    129201
     
    152224
    153225    &.has-left-content {
    154         justify-content: center;
    155226
    156227        h2,
     
    161232
    162233    &.has-right-content {
    163         justify-content: center;
    164234
    165235        h2,
     
    170240}
    171241
    172 body[data-type="core/cover"][data-align="left"],
    173 body[data-type="core/cover"][data-align="right"] {
     242.wp-block[data-type="core/cover"][data-align="left"],
     243.wp-block[data-type="core/cover"][data-align="right"] {
    174244
    175245    h2,
     
    180250}
    181251
    182 body[data-type="core/cover"][data-align="wide"],
    183 body[data-type="core/cover"][data-align="full"] {
     252.wp-block[data-type="core/cover"][data-align="wide"],
     253.wp-block[data-type="core/cover"][data-align="full"] {
    184254
    185255    @include media(desktop) {
     
    308378}
    309379
    310 body[data-type="core/pullquote"],
    311 body[data-type="core/pullquote"][data-align="left"],
    312 body[data-type="core/pullquote"][data-align="right"] {
     380.wp-block[data-type="core/pullquote"],
     381.wp-block[data-type="core/pullquote"][data-align="left"],
     382.wp-block[data-type="core/pullquote"][data-align="right"] {
    313383
    314384    blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     
    338408}
    339409
    340 body[data-type="core/pullquote"][data-align="left"],
    341 body[data-type="core/pullquote"][data-align="right"] {
     410.wp-block[data-type="core/pullquote"][data-align="left"],
     411.wp-block[data-type="core/pullquote"][data-align="right"] {
    342412
    343413    .editor-block-list__block-edit {
     
    413483        color: $color__text-light;
    414484        font-size: $font__size-lg;
    415         letter-spacing: $font__size-sm;
     485        letter-spacing: calc(2 * #{$size__spacing-unit});
     486        padding-left: calc(2 * #{$size__spacing-unit});
    416487    }
    417488}
     
    432503    li {
    433504        font-family: $font__heading;
    434         font-size: $font__size-lg;
     505        font-size: calc(#{$font__size_base} * #{$font__size-ratio});
    435506        font-weight: bold;
    436507        line-height: $font__line-height-heading;
     
    499570.wp-caption {
    500571    dd {
     572        color: $color__text-light;
     573        font-size: $font__size-xs;
     574        font-family: $font__heading;
     575        line-height: $font__line-height-pre;
     576        margin: 0;
     577        padding: ( $size__spacing-unit * .5 );
     578        text-align: left;
    501579        text-align: center;
    502580        -webkit-margin-start: 0px;
Note: See TracChangeset for help on using the changeset viewer.