WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/02/2018 11:52:16 PM (5 years 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.css

    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/** === Includes === */
    … …  
    106 * since its edges can look jagged due to lack of antialiasing. In this case, we are several
    117 * layers of box-shadow to add the border visually, which will render the border smoother. */
     8/* Calculates maximum width for post content */
     9/** === Editor Frame === */
     10@media screen and (min-width: 600px) {
     11  body .wp-block[data-align="full"] {
     12    width: calc( 100% + 90px);
     13    max-width: calc( 100% + 90px);
     14  }
     15}
     16
     17@media only screen and (min-width: 768px) {
     18  body {
     19    overflow-x: hidden;
     20  }
     21  body .editor-writing-flow {
     22    max-width: 80%;
     23    margin: 0 10%;
     24  }
     25  body .editor-post-title__block,
     26  body .editor-default-block-appender,
     27  body .editor-block-list__block {
     28    margin-left: 0;
     29    margin-right: 0;
     30  }
     31  body .wp-block[data-align="wide"] {
     32    width: 100%;
     33  }
     34  body .wp-block[data-align="full"] {
     35    position: relative;
     36    left: calc( -12.5% - 14px);
     37    width: calc( 125% + 116px);
     38    max-width: calc( 125% + 116px);
     39  }
     40  body .wp-block[data-align="right"] {
     41    max-width: 125%;
     42  }
     43}
     44
    1245/** === Content Width === */
    1346.wp-block {
    1447  width: calc(100vw - (2 * 1rem));
     48  max-width: 100%;
    1549}
    1650
    … …  
    2559    width: calc(6 * (100vw / 12 ));
    2660  }
     61}
     62
     63.wp-block .wp-block {
     64  width: 100%;
    2765}
    2866
    … …  
    137175}
    138176
     177/** === Post Title === */
     178.editor-post-title__block:before {
     179  background: #767676;
     180  content: "\020";
     181  display: block;
     182  height: 2px;
     183  margin: 1rem 0;
     184  width: 1em;
     185}
     186
     187.editor-post-title__block:before {
     188  width: 2.8125em;
     189  margin-top: 0;
     190  margin-bottom: 0;
     191  margin-left: 1em;
     192  position: relative;
     193  top: 0.5em;
     194}
     195
     196.editor-post-title__block .editor-post-title__input {
     197  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     198  font-size: 2.8125em;
     199}
     200
     201/** === Default Appender === */
     202.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     203  font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
     204  font-size: 22px;
     205}
     206
    139207/** === Paragraph === */
    140208.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
    … …  
    155223}
    156224
    157 .wp-block-cover.has-left-content {
    158   justify-content: center;
    159 }
    160 
    161225.wp-block-cover.has-left-content h2,
    162226.wp-block-cover.has-left-content .wp-block-cover-text {
    … …  
    164228}
    165229
    166 .wp-block-cover.has-right-content {
    167   justify-content: center;
    168 }
    169 
    170230.wp-block-cover.has-right-content h2,
    171231.wp-block-cover.has-right-content .wp-block-cover-text {
    … …  
    173233}
    174234
    175 body[data-type="core/cover"][data-align="left"] h2,
    176 body[data-type="core/cover"][data-align="left"] .wp-block-cover-text,
    177 body[data-type="core/cover"][data-align="right"] h2,
    178 body[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
     235.wp-block[data-type="core/cover"][data-align="left"] h2,
     236.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover-text,
     237.wp-block[data-type="core/cover"][data-align="right"] h2,
     238.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover-text {
    179239  width: 100%;
    180240  max-width: 305px;
    … …  
    182242
    183243@media only screen and (min-width: 1168px) {
    184   body[data-type="core/cover"][data-align="wide"] h2,
    185   body[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
    186   body[data-type="core/cover"][data-align="full"] h2,
    187   body[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
     244  .wp-block[data-type="core/cover"][data-align="wide"] h2,
     245  .wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
     246  .wp-block[data-type="core/cover"][data-align="full"] h2,
     247  .wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
    188248    padding: 0;
    189249    width: calc(6 * (100vw / 12));
    … …  
    293353}
    294354
    295 body[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    296 body[data-type="core/pullquote"] blockquote > .editor-rich-text p,
    297 body[data-type="core/pullquote"] p,
    298 body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    299 body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
    300 body[data-type="core/pullquote"][data-align="left"] p,
    301 body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    302 body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
    303 body[data-type="core/pullquote"][data-align="right"] p {
     355.wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     356.wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p,
     357.wp-block[data-type="core/pullquote"] p,
     358.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     359.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
     360.wp-block[data-type="core/pullquote"][data-align="left"] p,
     361.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     362.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
     363.wp-block[data-type="core/pullquote"][data-align="right"] p {
    304364  font-size: 1.6875em;
    305365  font-style: italic;
    … …  
    310370
    311371@media only screen and (min-width: 768px) {
    312   body[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    313   body[data-type="core/pullquote"] blockquote > .editor-rich-text p,
    314   body[data-type="core/pullquote"] p,
    315   body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    316   body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
    317   body[data-type="core/pullquote"][data-align="left"] p,
    318   body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    319   body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
    320   body[data-type="core/pullquote"][data-align="right"] p {
     372  .wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     373  .wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p,
     374  .wp-block[data-type="core/pullquote"] p,
     375  .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     376  .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
     377  .wp-block[data-type="core/pullquote"][data-align="left"] p,
     378  .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     379  .wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
     380  .wp-block[data-type="core/pullquote"][data-align="right"] p {
    321381    font-size: 2.25em;
    322382  }
    323383}
    324384
    325 body[data-type="core/pullquote"] .wp-block-pullquote__citation,
    326 body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
    327 body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
     385.wp-block[data-type="core/pullquote"] .wp-block-pullquote__citation,
     386.wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
     387.wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
    328388  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    329389  font-size: 0.71111em;
    … …  
    332392}
    333393
    334 body[data-type="core/pullquote"] em,
    335 body[data-type="core/pullquote"][data-align="left"] em,
    336 body[data-type="core/pullquote"][data-align="right"] em {
     394.wp-block[data-type="core/pullquote"] em,
     395.wp-block[data-type="core/pullquote"][data-align="left"] em,
     396.wp-block[data-type="core/pullquote"][data-align="right"] em {
    337397  font-style: normal;
    338398}
    339399
    340 body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit,
    341 body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit {
     400.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit,
     401.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit {
    342402  max-width: 50%;
    343403}
    344404
    345 body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color),
    346 body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) {
     405.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color),
     406.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) {
    347407  padding: 0;
    348408}
    349409
    350 body[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color,
    351 body[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color {
     410.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color,
     411.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color {
    352412  padding: 1em;
    353413}
    354414
    355 body[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    356 body[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
    357 body[data-type="core/pullquote"][data-align="left"] p,
    358 body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
    359 body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    360 body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
    361 body[data-type="core/pullquote"][data-align="right"] p,
    362 body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
     415.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     416.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .editor-rich-text p,
     417.wp-block[data-type="core/pullquote"][data-align="left"] p,
     418.wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation,
     419.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
     420.wp-block[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p,
     421.wp-block[data-type="core/pullquote"][data-align="right"] p,
     422.wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation {
    363423  text-align: left;
    364424}
    … …  
    406466  color: #767676;
    407467  font-size: 1.6875em;
    408   letter-spacing: 0.88889em;
     468  letter-spacing: calc(2 * 1rem);
     469  padding-left: calc(2 * 1rem);
    409470}
    410471
    … …  
    428489.wp-block-latest-posts li {
    429490  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    430   font-size: 1.6875em;
     491  font-size: calc(22px * 1.125);
    431492  font-weight: bold;
    432493  line-height: 1.2;
    … …  
    493554/* Properly center-align captions in the classic-editor block */
    494555.wp-caption dd {
     556  color: #767676;
     557  font-size: 0.71111em;
     558  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     559  line-height: 1.6;
     560  margin: 0;
     561  padding: 0.5rem;
     562  text-align: left;
    495563  text-align: center;
    496564  -webkit-margin-start: 0px;
Note: See TracChangeset for help on using the changeset viewer.