WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
12/14/2018 02:32:33 AM (8 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.