WordPress.org
Get WordPress

Make WordPress Core

Ticket #45043: 45043.1.patch

File 45043.1.patch, 33.8 KB (added by laurelfulford, 7 years ago)

  • src/wp-content/themes/twentyfifteen/css/blocks.css

     
     1/*
     2Theme Name: Twenty Fifteen
     3Description: Used to style Gutenberg Blocks.
     4*/
     5
     6/*--------------------------------------------------------------
     7>>> TABLE OF CONTENTS:
     8----------------------------------------------------------------
     91.0 General Block Styles
     102.0 Blocks - Common Blocks
     113.0 Blocks - Formatting
     124.0 Blocks - Layout Elements
     135.0 Blocks - Widgets
     146.0 Blocks - Colors
     15--------------------------------------------------------------*/
     16
     17/*--------------------------------------------------------------
     181.0 General Block Styles
     19--------------------------------------------------------------*/
     20
     21/* Captions */
     22
     23[class^="wp-block-"] figcaption {
     24        color: #707070;
     25        font-family: "Noto Sans", sans-serif;
     26        font-size: 12px;
     27        line-height: 1.5;
     28        margin-bottom: 0;
     29        padding: 0.5em 0;
     30}
     31
     32@media screen and (min-width: 46.25em) {
     33        [class^="wp-block-"] figcaption {
     34                font-size: 14px;
     35        }
     36}
     37
     38@media screen and (min-width: 55em) {
     39        [class^="wp-block-"] figcaption {
     40                font-size: 16px;
     41        }
     42}
     43
     44@media screen and (min-width: 59.6875em) {
     45        [class^="wp-block-"] figcaption {
     46                font-size: 12px;
     47        }
     48}
     49
     50@media screen and (min-width: 68.75em) {
     51        [class^="wp-block-"] figcaption {
     52                font-size: 14px;
     53        }
     54}
     55
     56@media screen and (min-width: 77.5em) {
     57        [class^="wp-block-"] figcaption {
     58                font-size: 16px;
     59        }
     60}
     61
     62/*--------------------------------------------------------------
     632.0 Blocks - Common Blocks
     64--------------------------------------------------------------*/
     65
     66/* Paragraph */
     67
     68p.has-drop-cap:not(:focus)::first-letter {
     69        font-size: 5em;
     70}
     71
     72/* Gallery */
     73
     74.wp-block-gallery {
     75        margin-bottom: 1.6em;
     76}
     77
     78/* Audio */
     79
     80.wp-block-audio audio {
     81        display: block;
     82        width: 100%;
     83}
     84
     85/* Cover Image */
     86
     87.wp-block-cover-image .wp-block-cover-image-text,
     88.wp-block-cover-image h2 {
     89        font-size: 29px;
     90        line-height: 1.2069;
     91}
     92
     93/* Quote */
     94
     95.wp-block-quote,
     96.wp-block-quote:not(.is-large):not(.is-style-large),
     97[class^="wp-block-"] blockquote {
     98        border-color: #707070;
     99}
     100
     101.wp-block-quote cite,
     102.wp-block-quote__citation {
     103        color: #333;
     104        font-family: "Noto Sans", sans-serif;
     105        font-size: 15px;
     106        font-style: normal;
     107        line-height: 1.6;
     108        text-transform: none;
     109}
     110
     111.wp-block-quote em,
     112.wp-block-quote i {
     113        font-style: normal;
     114}
     115
     116.wp-block-quote strong,
     117.wp-block-quote b {
     118        font-weight: 400;
     119}
     120
     121
     122@media screen and (min-width: 46.25em) {
     123        .edit-post-visual-editor .wp-block-quote p {
     124                font-size: 20px;
     125                line-height: 1.75;
     126        }
     127
     128        .wp-block-quote cite,
     129        .wp-block-quote__citation {
     130                font-size: 17px;
     131                line-height: 1.6471;
     132        }
     133}
     134
     135@media screen and (min-width: 55em) {
     136        .edit-post-visual-editor .wp-block-quote p {
     137                font-size: 22px;
     138                line-height: 1.8182;
     139        }
     140
     141        .wp-block-quote cite,
     142        .wp-block-quote__citation {
     143                font-size: 19px;
     144                line-height: 1.6842;
     145        }
     146}
     147
     148@media screen and (min-width: 59.6875em) {
     149        .edit-post-visual-editor .wp-block-quote p {
     150                font-size: 18px;
     151                line-height: 1.6667;
     152        }
     153
     154        .wp-block-quote cite,
     155        .wp-block-quote__citation {
     156                font-size: 15px;
     157                line-height: 1.6;
     158        }
     159}
     160
     161@media screen and (min-width: 68.75em) {
     162        .edit-post-visual-editor .wp-block-quote p {
     163                font-size: 20px;
     164                line-height: 1.75;
     165        }
     166
     167        .wp-block-quote cite,
     168        .wp-block-quote__citation {
     169                font-size: 17px;
     170                line-height: 1.6471;
     171        }
     172}
     173
     174@media screen and (min-width: 77.5em) {
     175        .edit-post-visual-editor .wp-block-quote p {
     176                font-size: 22px;
     177                line-height: 1.8182;
     178        }
     179
     180        .wp-block-quote cite,
     181        .wp-block-quote__citation {
     182                font-size: 19px;
     183                line-height: 1.6842;
     184        }
     185}
     186
     187/* File */
     188
     189.wp-block-file a.wp-block-file__button {
     190        background-color: #333;
     191        border: 0;
     192        border-radius: 0;
     193        color: #fff;
     194        cursor: pointer;
     195        font-family: "Noto Sans", sans-serif;
     196        font-size: 12px;
     197        font-weight: 700;
     198        line-height: 1.5;
     199        padding: 0.7917em 1.5em;
     200        text-transform: uppercase;
     201        vertical-align: baseline;
     202}
     203
     204.wp-block-file a.wp-block-file__button:hover,
     205.wp-block-file a.wp-block-file__button:focus {
     206        background-color: #707070;
     207        background-color: rgba(51, 51, 51, 0.7);
     208        outline: 0;
     209}
     210
     211.rtl .wp-block-file * + .wp-block-file__button {
     212        margin-left: 0.75em;
     213        margin-right: 0;
     214}
     215
     216@media screen and (min-width: 46.25em) {
     217        .wp-block-file a.wp-block-file__button {
     218                font-size: 14px;
     219                font-size: 1.4rem;
     220                padding: 0.8214em 1.6429em;
     221        }
     222}
     223
     224@media screen and (min-width: 55em) {
     225        .wp-block-file a.wp-block-file__button {
     226                font-size: 16px;
     227                font-size: 1.6rem;
     228                padding: 0.8125em 1.625em;
     229        }
     230}
     231
     232@media screen and (min-width: 59.6875em) {
     233        .wp-block-file a.wp-block-file__button {
     234                font-size: 12px;
     235                font-size: 1.2rem;
     236                padding: 0.7917em 1.5833em;
     237        }
     238}
     239
     240@media screen and (min-width: 68.75em) {
     241        .wp-block-file a.wp-block-file__button {
     242                font-size: 14px;
     243                font-size: 1.4rem;
     244                padding: 0.8214em 1.5714em;
     245        }
     246}
     247
     248@media screen and (min-width: 77.5em) {
     249        .wp-block-file a.wp-block-file__button {
     250                font-size: 16px;
     251                font-size: 1.6rem;
     252                padding: 0.8125em 1.625em;
     253        }
     254}
     255
     256/*--------------------------------------------------------------
     2573.0 Blocks - Formatting
     258--------------------------------------------------------------*/
     259
     260/* Code */
     261
     262.wp-block-code {
     263        background-color: transparent;
     264        border: 0;
     265        padding: 0;
     266}
     267
     268.wp-block-code code {
     269        font-family: Inconsolata, monospace;
     270        font-size: inherit;
     271}
     272
     273/* Preformatted */
     274
     275.wp-block-preformatted {
     276        background-color: rgba(0, 0, 0, 0.01);
     277        border: 1px solid #eaeaea;
     278        line-height: 1.2;
     279        margin-bottom: 1.6em;
     280        max-width: 100%;
     281        overflow: auto;
     282        padding: 0.8em;
     283        white-space: pre;
     284        white-space: pre-wrap;
     285        word-wrap: break-word;
     286}
     287
     288/* Pullquote */
     289
     290.wp-block-pullquote {
     291        border: 0;
     292}
     293
     294.wp-block-pullquote blockquote {
     295        border: 0;
     296        margin-left: 0;
     297        margin-right: 0;
     298        padding-left: 0;
     299        padding-right: 0;
     300}
     301
     302.wp-block-pullquote cite {
     303        color: #333;
     304        font-family: "Noto Sans", sans-serif;
     305        font-size: 15px;
     306        font-style: normal;
     307        line-height: 1.6;
     308        text-transform: none;
     309}
     310
     311@media screen and (min-width: 46.25em) {
     312        .wp-block-pullquote cite {
     313                font-size: 17px;
     314                line-height: 1.6471;
     315        }
     316}
     317
     318@media screen and (min-width: 55em) {
     319        .wp-block-pullquote cite {
     320                font-size: 19px;
     321                line-height: 1.6842;
     322        }
     323}
     324
     325@media screen and (min-width: 59.6875em) {
     326        .wp-block-pullquote cite {
     327                font-size: 15px;
     328                line-height: 1.6;
     329        }
     330}
     331
     332@media screen and (min-width: 68.75em) {
     333        .wp-block-pullquote cite {
     334                font-size: 17px;
     335                line-height: 1.6471;
     336        }
     337}
     338
     339@media screen and (min-width: 77.5em) {
     340        .wp-block-pullquote cite {
     341                font-size: 19px;
     342                line-height: 1.6842;
     343        }
     344}
     345
     346/* Table */
     347
     348.wp-block-table th,
     349.wp-block-table td {
     350        border-color: #eaeaea;
     351        border-width: 0 1px 1px 0;
     352}
     353
     354/*--------------------------------------------------------------
     3554.0 Blocks - Layout Elements
     356--------------------------------------------------------------*/
     357
     358/* Button */
     359
     360.wp-block-button .wp-block-button__link {
     361        background-color: #333;
     362        border: 0;
     363        border-radius: 0;
     364        color: #fff;
     365        cursor: pointer;
     366        font-family: "Noto Sans", sans-serif;
     367        font-size: 12px;
     368        font-size: 1.2rem;
     369        font-weight: 700;
     370        line-height: 1.5;
     371        padding: 0.7917em 1.5em;
     372        text-transform: uppercase;
     373        vertical-align: baseline;
     374}
     375
     376.wp-block-button .wp-block-button__link:hover,
     377.wp-block-button .wp-block-button__link:focus {
     378        background-color: #707070;
     379        background-color: rgba(51, 51, 51, 0.7);
     380        outline: 0;
     381}
     382
     383@media screen and (min-width: 46.25em) {
     384        .wp-block-button .wp-block-button__link {
     385                font-size: 14px;
     386                font-size: 1.4rem;
     387                padding: 0.8214em 1.6429em;
     388        }
     389}
     390
     391@media screen and (min-width: 55em) {
     392        .wp-block-button .wp-block-button__link {
     393                font-size: 16px;
     394                font-size: 1.6rem;
     395                padding: 0.8125em 1.625em;
     396        }
     397}
     398
     399@media screen and (min-width: 59.6875em) {
     400        .wp-block-button .wp-block-button__link {
     401                font-size: 12px;
     402                font-size: 1.2rem;
     403                padding: 0.7917em 1.5833em;
     404        }
     405}
     406
     407@media screen and (min-width: 68.75em) {
     408        .wp-block-button .wp-block-button__link {
     409                font-size: 14px;
     410                font-size: 1.4rem;
     411                padding: 0.8214em 1.5714em;
     412        }
     413}
     414
     415@media screen and (min-width: 77.5em) {
     416        .wp-block-button .wp-block-button__link {
     417                font-size: 16px;
     418                font-size: 1.6rem;
     419                padding: 0.8125em 1.625em;
     420        }
     421}
     422
     423/* Seperators */
     424
     425.wp-block-separator {
     426        border: 0;
     427        max-width: 100px;
     428}
     429
     430.wp-block-separator.is-style-wide {
     431        max-width: 100%;
     432}
     433
     434/*--------------------------------------------------------------
     4355.0 Blocks - Widgets
     436--------------------------------------------------------------*/
     437
     438/* Comments */
     439
     440.wp-block-latest-comments {
     441        margin: 0;
     442}
     443
     444.wp-block-latest-comments__comment,
     445.wp-block-latest-comments__comment-excerpt,
     446.wp-block-latest-comments__comment-excerpt p {
     447        font-size: inherit;
     448}
     449
     450.wp-block-latest-comments__comment-meta a {
     451        border-bottom-color: transparent;
     452        font-weight: 700;
     453}
     454
     455.wp-block-latest-comments__comment-excerpt p:last-child {
     456        margin-bottom: 0;
     457}
     458
     459.wp-block-latest-comments__comment-date {
     460        color: #707070;
     461        font-family: "Noto Sans", sans-serif;
     462        font-size: 12px;
     463        line-height: 1.5;
     464        margin-bottom: 1.6em;
     465}
     466
     467@media screen and (min-width: 46.25em) {
     468        .wp-block-latest-comments__comment-date {
     469                font-size: 14px;
     470        }
     471}
     472
     473@media screen and (min-width: 55em) {
     474        .wp-block-latest-comments__comment-date {
     475                font-size: 16px;
     476        }
     477}
     478
     479@media screen and (min-width: 59.6875em) {
     480        .wp-block-latest-comments__comment-date {
     481                font-size: 12px;
     482        }
     483}
     484
     485@media screen and (min-width: 68.75em) {
     486        .wp-block-latest-comments__comment-date {
     487                font-size: 14px;
     488        }
     489}
     490
     491@media screen and (min-width: 77.5em) {
     492        .wp-block-latest-comments__comment-date {
     493                font-size: 16px;
     494        }
     495}
     496
     497.wp-block-latest-comments .wp-block-latest-comments__comment {
     498        border-top: 1px solid #eaeaea;
     499        border-top: 1px solid rgba(51, 51, 51, 0.1);
     500        margin-bottom: 0;
     501        padding: 1.6em 0;
     502}
     503
     504/*--------------------------------------------------------------
     5056.0 Blocks - Colors
     506--------------------------------------------------------------*/
     507
     508.has-dark-gray-color {
     509        color: #111;
     510}
     511
     512.has-dark-gray-background-color {
     513        background-color: #111;
     514}
     515
     516.has-light-gray-color {
     517        color: #f1f1f1;
     518}
     519
     520.has-light-gray-background-color {
     521        background-color: #f1f1f1;
     522}
     523
     524.has-white-color {
     525        color: #fff;
     526}
     527
     528.has-white-background-color {
     529        background-color: #fff;
     530}
     531
     532.has-yellow-color {
     533        color: #f4ca16;
     534}
     535
     536.has-yellow-background-color {
     537        background-color: #f4ca16;
     538}
     539
     540.has-dark-brown-color {
     541        color: #352712;
     542}
     543
     544.has-dark-brown-background-color {
     545        background-color: #352712;
     546}
     547
     548.has-medium-pink-color {
     549        color: #e53b51;
     550}
     551
     552.has-medium-pink-background-color {
     553        background-color: #e53b51;
     554}
     555
     556.has-light-pink-color {
     557        color: #ffe5d1;
     558}
     559
     560.has-light-pink-background-color {
     561        background-color: #ffe5d1;
     562}
     563
     564.has-dark-purple-color {
     565        color: #2e2256;
     566}
     567
     568.has-dark-purple-background-color {
     569        background-color: #2e2256;
     570}
     571
     572.has-purple-color {
     573        color: #674970;
     574}
     575
     576.has-purple-background-color {
     577        background-color: #674970;
     578}
     579
     580.has-blue-gray-color {
     581        color: #22313f;
     582}
     583
     584.has-blue-gray-background-color {
     585        background-color: #22313f;
     586}
     587
     588.has-bright-blue-color {
     589        color: #55c3dc;
     590}
     591
     592.has-bright-blue-background-color {
     593        background-color: #55c3dc;
     594}
     595
     596.has-light-blue-color {
     597        color: #e9f2f9;
     598}
     599
     600.has-light-blue-background-color {
     601        background-color: #e9f2f9;
     602}

  • src/wp-content/themes/twentyfifteen/css/editor-blocks.css

     
     1/*
     2Theme Name: Twenty Fifteen
     3Description: Used to style Gutenberg Blocks in the editor.
     4*/
     5
     6/*--------------------------------------------------------------
     7>>> TABLE OF CONTENTS:
     8----------------------------------------------------------------
     91.0 General Typography
     102.0 General Block Styles
     113.0 Blocks - Common Blocks
     124.0 Blocks - Formatting
     135.0 Blocks - Layout Elements
     146.0 Blocks - Widgets
     15--------------------------------------------------------------*/
     16
     17/*--------------------------------------------------------------
     181.0 General Typography
     19--------------------------------------------------------------*/
     20
     21.edit-post-visual-editor .editor-block-list__block,
     22.edit-post-visual-editor .editor-block-list__block p,
     23.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     24        font-size: 15px;
     25        line-height: 1.6;
     26}
     27
     28.edit-post-visual-editor .editor-block-list__block {
     29        color: #333;
     30}
     31
     32.editor-post-title__block .editor-post-title__input {
     33        color: #333;
     34        font-size: 26px;
     35        line-height: 1.1538;
     36}
     37
     38.edit-post-visual-editor h1,
     39.edit-post-visual-editor h2,
     40.edit-post-visual-editor h3,
     41.edit-post-visual-editor h4,
     42.edit-post-visual-editor h5,
     43.edit-post-visual-editor h6 {
     44        clear: both;
     45        font-weight: 700;
     46}
     47
     48.edit-post-visual-editor h1 {
     49        font-size: 26px;
     50        line-height: 1.1538;
     51        margin-top: 1.8462em;
     52        margin-bottom: 0.9231em;
     53}
     54
     55.edit-post-visual-editor h2 {
     56        font-size: 22px;
     57        line-height: 1.3636;
     58        margin-top: 2.1818em;
     59        margin-bottom: 1.0909em;
     60}
     61
     62.edit-post-visual-editor h3 {
     63        font-size: 18px;
     64        line-height: 1.3333;
     65        margin-top: 2.6667em;
     66        margin-bottom: 1.3333em;
     67}
     68
     69.edit-post-visual-editor h4,
     70.edit-post-visual-editor h5,
     71.edit-post-visual-editor h6 {
     72        font-size: 15px;
     73        line-height: 1.2;
     74        margin-top: 3.2em;
     75        margin-bottom: 1.6em;
     76}
     77
     78.edit-post-visual-editor h5,
     79.edit-post-visual-editor h6 {
     80        letter-spacing: 0.1em;
     81        text-transform: uppercase;
     82}
     83
     84.edit-post-visual-editor > h1:first-child,
     85.edit-post-visual-editor > h2:first-child,
     86.edit-post-visual-editor > h3:first-child,
     87.edit-post-visual-editor > h4:first-child,
     88.edit-post-visual-editor > h5:first-child,
     89.edit-post-visual-editor > h6:first-child {
     90        margin-top: 0;
     91}
     92
     93@media screen and (min-width: 46.25em) {
     94        .edit-post-visual-editor .editor-block-list__block,
     95        .edit-post-visual-editor .editor-block-list__block p,
     96        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     97                font-size: 17px;
     98                line-height: 1.6471;
     99        }
     100
     101        .editor-post-title__block .editor-post-title__input {
     102                font-size: 35px;
     103                line-height: 1.2;
     104        }
     105
     106        .edit-post-visual-editor h1 {
     107                font-size: 35px;
     108                line-height: 1.2;
     109                margin-top: 1.6em;
     110                margin-bottom: 0.8em;
     111        }
     112
     113        .edit-post-visual-editor h2 {
     114                font-size: 29px;
     115                line-height: 1.2069;
     116                margin-top: 1.931em;
     117                margin-bottom: 0.9655em;
     118        }
     119
     120        .edit-post-visual-editor h3 {
     121                font-size: 24px;
     122                line-height: 1.1667;
     123                margin-top: 2.3333em;
     124                margin-bottom: 1.1667em;
     125        }
     126
     127        .edit-post-visual-editor h4 {
     128                font-size: 20px;
     129                line-height: 1.4;
     130                margin-top: 2.8em;
     131                margin-bottom: 1.4em;
     132        }
     133
     134        .edit-post-visual-editor h5,
     135        .edit-post-visual-editor h6 {
     136                font-size: 17px;
     137                line-height: 1.2353;
     138                margin-top: 3.2941em;
     139                margin-bottom: 1.6471em;
     140        }
     141}
     142
     143@media screen and (min-width: 55em) {
     144        .edit-post-visual-editor .editor-block-list__block,
     145        .edit-post-visual-editor .editor-block-list__block p,
     146        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     147                font-size: 19px;
     148                line-height: 1.6842;
     149        }
     150
     151        .editor-post-title__block .editor-post-title__input {
     152                font-size: 39px;
     153                line-height: 1.2308;
     154        }
     155
     156        .edit-post-visual-editor h1 {
     157                font-size: 39px;
     158                line-height: 1.2308;
     159                margin-top: 1.641em;
     160                margin-bottom: 0.8205em;
     161        }
     162
     163        .edit-post-visual-editor h2 {
     164                font-size: 32px;
     165                line-height: 1.25;
     166                margin-top: 2em;
     167                margin-bottom: 1em;
     168        }
     169
     170        .edit-post-visual-editor h3 {
     171                font-size: 27px;
     172                line-height: 1.1852;
     173                margin-top: 2.3704em;
     174                margin-bottom: 1.1852em;
     175        }
     176
     177        .edit-post-visual-editor h4 {
     178                font-size: 22px;
     179                line-height: 1.4545;
     180                margin-top: 2.9091em;
     181                margin-bottom: 1.4545em;
     182        }
     183
     184        .edit-post-visual-editor h5,
     185        .edit-post-visual-editor h6 {
     186                font-size: 19px;
     187                line-height: 1.2632;
     188                margin-top: 3.3684em;
     189                margin-bottom: 1.6842em;
     190        }
     191}
     192
     193@media screen and (min-width: 59.6875em) {
     194        .edit-post-visual-editor .editor-block-list__block,
     195        .edit-post-visual-editor .editor-block-list__block p,
     196        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     197                font-size: 15px;
     198                line-height: 1.6;
     199        }
     200
     201        .editor-post-title__block .editor-post-title__input {
     202                font-size: 31px;
     203                line-height: 1.1613;
     204        }
     205
     206        .edit-post-visual-editor h1 {
     207                font-size: 31px;
     208                line-height: 1.1613;
     209                margin-top: 1.5484em;
     210                margin-bottom: 0.7742em;
     211        }
     212
     213        .edit-post-visual-editor h2 {
     214                font-size: 26px;
     215                line-height: 1.3846;
     216                margin-top: 1.8462em;
     217                margin-bottom: 0.9231em;
     218        }
     219
     220        .edit-post-visual-editor h3 {
     221                font-size: 22px;
     222                line-height: 1.3636;
     223                margin-top: 2.1818em;
     224                margin-bottom: 1.0909em;
     225        }
     226
     227        .edit-post-visual-editor h4 {
     228                font-size: 18px;
     229                line-height: 1.3333;
     230                margin-top: 2.6667em;
     231                margin-bottom: 1.3333em;
     232        }
     233
     234        .edit-post-visual-editor h5,
     235        .edit-post-visual-editor h6 {
     236                font-size: 15px;
     237                line-height: 1.2;
     238                margin-top: 3.2em;
     239                margin-bottom: 1.6em;
     240        }
     241}
     242
     243@media screen and (min-width: 68.75em) {
     244        .edit-post-visual-editor .editor-block-list__block,
     245        .edit-post-visual-editor .editor-block-list__block p,
     246        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     247                font-size: 17px;
     248                line-height: 1.6471;
     249        }
     250
     251        .editor-post-title__block .editor-post-title__input {
     252                font-size: 35px;
     253                line-height: 1.2;
     254        }
     255
     256        .edit-post-visual-editor h1 {
     257                font-size: 35px;
     258                line-height: 1.2;
     259                margin-top: 1.6em;
     260                margin-bottom: 0.8em;
     261        }
     262
     263        .edit-post-visual-editor h2 {
     264                font-size: 29px;
     265                line-height: 1.2069;
     266                margin-top: 1.931em;
     267                margin-bottom: 0.9655em;
     268        }
     269
     270        .edit-post-visual-editor h3 {
     271                font-size: 24px;
     272                line-height: 1.1667;
     273                margin-top: 2.3333em;
     274                margin-bottom: 1.1667em;
     275        }
     276
     277        .edit-post-visual-editor h4 {
     278                font-size: 20px;
     279                line-height: 1.4;
     280                margin-top: 2.8em;
     281                margin-bottom: 1.4em;
     282        }
     283
     284        .edit-post-visual-editor h5,
     285        .edit-post-visual-editor h6 {
     286                font-size: 17px;
     287                line-height: 1.2353;
     288                margin-top: 3.2941em;
     289                margin-bottom: 1.6471em;
     290        }
     291}
     292
     293@media screen and (min-width: 77.5em) {
     294        .edit-post-visual-editor .editor-block-list__block,
     295        .edit-post-visual-editor .editor-block-list__block p,
     296        .editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     297                font-size: 19px;
     298                line-height: 1.6842;
     299        }
     300
     301        .editor-post-title__block .editor-post-title__input {
     302                font-size: 39px;
     303                line-height: 1.2308;
     304        }
     305
     306        .edit-post-visual-editor h3 {
     307                font-size: 27px;
     308                line-height: 1.1852;
     309                margin-top: 2.3704em;
     310                margin-bottom: 1.1852em;
     311        }
     312
     313        .edit-post-visual-editor h4 {
     314                font-size: 22px;
     315                line-height: 1.4545;
     316                margin-top: 2.9091em;
     317                margin-bottom: 1.4545em;
     318        }
     319
     320        .edit-post-visual-editor h5,
     321        .edit-post-visual-editor h6 {
     322                font-size: 19px;
     323                line-height: 1.2632;
     324                margin-top: 3.3684em;
     325                margin-bottom: 1.6842em;
     326        }
     327}
     328
     329/*--------------------------------------------------------------
     3302.0 General Block Styles
     331--------------------------------------------------------------*/
     332
     333/* Main column width */
     334
     335body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
     336body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
     337body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
     338        max-width: 690px; /* 660px + 30px for the editor padding */
     339}
     340
     341body.gutenberg-editor-page .edit-post-visual-editor .wp-block-columns .editor-block-list__block {
     342        width: auto;
     343}
     344
     345/* Link styles */
     346
     347.edit-post-visual-editor a,
     348.editor-block-list__block a,
     349.wp-block-freeform.block-library-rich-text__tinymce a {
     350        border-bottom: 1px solid #333;
     351        color: #333;
     352        text-decoration: none;
     353}
     354
     355/* List styles */
     356
     357.edit-post-visual-editor ul:not(.wp-block-gallery),
     358.editor-block-list__block ul:not(.wp-block-gallery),
     359.block-library-list ul,
     360.edit-post-visual-editor ol,
     361.editor-block-list__block ol,
     362.block-library-list ol {
     363        margin: 0 0 1.6em 1.3333em;
     364        padding: 0;
     365}
     366
     367.block-library-list .editor-rich-text__tinymce {
     368        padding: 0;
     369}
     370
     371.edit-post-visual-editor ul:not(.wp-block-gallery),
     372.editor-block-list__block ul:not(.wp-block-gallery),
     373.block-library-list ul {
     374        list-style: disc;
     375}
     376
     377.edit-post-visual-editor ol,
     378.editor-block-list__block ol,
     379.block-library-list ol {
     380        list-style: decimal;
     381}
     382
     383.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
     384.editor-block-list__block ul:not(.wp-block-gallery) li > ul,
     385.block-library-list li > ul,
     386.edit-post-visual-editor li > ol,
     387.editor-block-list__block li > ol,
     388.block-library-list li > ol {
     389        margin-bottom: 0;
     390}
     391
     392.wp-block-freeform.block-library-rich-text__tinymce li,
     393.editor-block-list__block li {
     394        margin-bottom: 0;
     395}
     396
     397.rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
     398.rtl .editor-block-list__block ul:not(.wp-block-gallery),
     399.rtl .block-library-list ul,
     400.rtl .edit-post-visual-editor ol,
     401.rtl .editor-block-list__block ol,
     402.rtl .block-library-list ol {
     403        margin-left: 0;
     404        margin-right: 1.3333em;
     405}
     406
     407/* Quote */
     408
     409.rtl .editor-block-list__block blockquote {
     410        border-left: 0;
     411        padding-left: 0;
     412}
     413
     414/* Captions */
     415
     416[class^="wp-block-"] figcaption {
     417        color: #707070;
     418        font-family: "Noto Sans", sans-serif;
     419        font-size: 12px;
     420        margin-bottom: 0;
     421        padding: 0.5em 0;
     422}
     423
     424.editor-block-list__block [class^="wp-block-"] figcaption {
     425        line-height: 1.5;
     426}
     427
     428@media screen and (min-width: 46.25em) {
     429        [class^="wp-block-"] figcaption {
     430                font-size: 14px;
     431        }
     432}
     433
     434@media screen and (min-width: 55em) {
     435        [class^="wp-block-"] figcaption {
     436                font-size: 16px;
     437        }
     438}
     439
     440@media screen and (min-width: 59.6875em) {
     441        [class^="wp-block-"] figcaption {
     442                font-size: 12px;
     443        }
     444}
     445
     446@media screen and (min-width: 68.75em) {
     447        [class^="wp-block-"] figcaption {
     448                font-size: 14px;
     449        }
     450}
     451
     452@media screen and (min-width: 77.5em) {
     453        [class^="wp-block-"] figcaption {
     454                font-size: 16px;
     455        }
     456}
     457
     458/* Pre */
     459
     460[class^="wp-block-"] pre {
     461        font-size: inherit;
     462}
     463
     464/* Alignments */
     465
     466.wp-block-quote.alignright,
     467.wp-block-freeform.block-library-rich-text__tinymce .alignright {
     468        margin: 0.4211em 0 1.6842em 1.6842em;
     469}
     470
     471.wp-block-quote.alignleft,
     472.wp-block-freeform.block-library-rich-text__tinymce .alignleft {
     473        margin: 0.4211em 1.6842em 1.6842em 0;
     474}
     475
     476/*--------------------------------------------------------------
     4773.0 Blocks - Common Blocks
     478--------------------------------------------------------------*/
     479
     480/* Paragraph */
     481
     482p.has-drop-cap:not(:focus)::first-letter {
     483        font-size: 5em;
     484}
     485
     486/* Quotes */
     487
     488.wp-block-quote,
     489.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     490        color: #707070;
     491        margin-bottom: 1.6667em;
     492        padding-left: 0.7778em;
     493}
     494
     495.wp-block-quote:not(.is-large):not(.is-style-large),
     496.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     497        border-color: #707070;
     498}
     499
     500.edit-post-visual-editor .wp-block-quote p {
     501        font-size: 18px;
     502        font-style: italic;
     503        line-height: 1.6667;
     504        margin-bottom: 1.6667em;
     505}
     506
     507.edit-post-visual-editor .wp-block-quote > p:last-child {
     508        margin-bottom: 0;
     509}
     510
     511.wp-block-quote__citation {
     512        color: #333;
     513        font-family: "Noto Sans", sans-serif;
     514        font-size: 15px;
     515        font-style: normal;
     516        line-height: 1.6;
     517        text-transform: none;
     518}
     519
     520.wp-block-quote em,
     521.wp-block-quote i {
     522        font-style: normal;
     523}
     524
     525.wp-block-quote strong,
     526.wp-block-quote b {
     527        font-weight: 400;
     528}
     529
     530@media screen and (min-width: 46.25em) {
     531        .edit-post-visual-editor .wp-block-quote p {
     532                font-size: 20px;
     533                line-height: 1.75;
     534        }
     535
     536        .wp-block-quote__citation {
     537                font-size: 17px;
     538                line-height: 1.6471;
     539        }
     540}
     541
     542@media screen and (min-width: 55em) {
     543        .edit-post-visual-editor .wp-block-quote p {
     544                font-size: 22px;
     545                line-height: 1.8182;
     546        }
     547
     548        .wp-block-quote__citation {
     549                font-size: 19px;
     550                line-height: 1.6842;
     551        }
     552}
     553
     554@media screen and (min-width: 59.6875em) {
     555        .edit-post-visual-editor .wp-block-quote p {
     556                font-size: 18px;
     557                line-height: 1.6667;
     558        }
     559
     560        .wp-block-quote__citation {
     561                font-size: 15px;
     562                line-height: 1.6;
     563        }
     564}
     565
     566@media screen and (min-width: 68.75em) {
     567        .edit-post-visual-editor .wp-block-quote p {
     568                font-size: 20px;
     569                line-height: 1.75;
     570        }
     571
     572        .wp-block-quote__citation {
     573                font-size: 17px;
     574                line-height: 1.6471;
     575        }
     576}
     577
     578@media screen and (min-width: 77.5em) {
     579        .edit-post-visual-editor .wp-block-quote p {
     580                font-size: 22px;
     581                line-height: 1.8182;
     582        }
     583
     584        .wp-block-quote__citation {
     585                font-size: 19px;
     586                line-height: 1.6842;
     587        }
     588}
     589
     590/* Cover Image */
     591
     592.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p,
     593.wp-block-cover-image h2 {
     594        font-size: 29px;
     595        line-height: 1.2069;
     596}
     597
     598
     599/* File */
     600
     601.wp-block-file .editor-rich-text__tinymce {
     602        border-bottom: 1px solid #333;
     603}
     604
     605.wp-block-file .wp-block-file__button {
     606        background-color: #333;
     607        border: 0;
     608        border-radius: 0;
     609        color: #fff;
     610        cursor: pointer;
     611        font-family: "Noto Sans", sans-serif;
     612        font-size: 12px;
     613        font-weight: 700;
     614        line-height: 1.5;
     615        padding: 0.7917em 1.5em;
     616        text-transform: uppercase;
     617        vertical-align: baseline;
     618}
     619
     620@media screen and (min-width: 46.25em) {
     621        .wp-block-file .wp-block-file__button {
     622                font-size: 14px;
     623                padding: 0.8214em 1.6429em;
     624        }
     625}
     626
     627@media screen and (min-width: 55em) {
     628        .wp-block-file .wp-block-file__button {
     629                font-size: 16px;
     630                padding: 0.8125em 1.625em;
     631        }
     632}
     633
     634@media screen and (min-width: 59.6875em) {
     635        .wp-block-file .wp-block-file__button {
     636                font-size: 12px;
     637                padding: 0.7917em 1.5833em;
     638        }
     639}
     640
     641@media screen and (min-width: 68.75em) {
     642        .wp-block-file .wp-block-file__button {
     643                font-size: 14px;
     644                padding: 0.8214em 1.5714em;
     645        }
     646}
     647
     648@media screen and (min-width: 77.5em) {
     649        .wp-block-file .wp-block-file__button {
     650                font-size: 16px;
     651                padding: 0.8125em 1.625em;
     652        }
     653}
     654
     655/*--------------------------------------------------------------
     6564.0 Blocks - Formatting
     657--------------------------------------------------------------*/
     658
     659/* Code */
     660
     661.wp-block-code,
     662.wp-block-freeform.block-library-rich-text__tinymce code {
     663        background: transparent;
     664        border: 0;
     665        padding: 0;
     666}
     667
     668/* Custom HTML */
     669
     670.wp-block-html .CodeMirror-lines pre {
     671        background-color: inherit;
     672        border: inherit;
     673        font-size: inherit;
     674        line-height: inherit;
     675        margin-bottom: inherit;
     676        padding: inherit;
     677}
     678
     679/* Pullquote */
     680
     681.wp-block-pullquote,
     682.editor-block-list__block .wp-block-pullquote blockquote {
     683        border: 0;
     684        margin: 0;
     685        padding-left: 0;
     686}
     687
     688.wp-block-pullquote .wp-block-pullquote__citation {
     689        color: #333;
     690        font-family: "Noto Sans", sans-serif;
     691        font-size: 15px;
     692        font-style: normal;
     693        line-height: 1.6;
     694        text-transform: none;
     695}
     696
     697@media screen and (min-width: 46.25em) {
     698        .wp-block-pullquote .wp-block-pullquote__citation {
     699                font-size: 17px;
     700                line-height: 1.6471;
     701        }
     702}
     703
     704@media screen and (min-width: 55em) {
     705        .wp-block-pullquote .wp-block-pullquote__citation {
     706                font-size: 19px;
     707                line-height: 1.6842;
     708        }
     709}
     710
     711@media screen and (min-width: 59.6875em) {
     712        .wp-block-pullquote .wp-block-pullquote__citation {
     713                font-size: 15px;
     714                line-height: 1.6;
     715        }
     716}
     717
     718@media screen and (min-width: 68.75em) {
     719        .wp-block-pullquote .wp-block-pullquote__citation {
     720                font-size: 17px;
     721                line-height: 1.6471;
     722        }
     723}
     724
     725@media screen and (min-width: 77.5em) {
     726        .wp-block-pullquote .wp-block-pullquote__citation {
     727                font-size: 19px;
     728                line-height: 1.6842;
     729        }
     730}
     731
     732/* Tables */
     733
     734.editor-block-list__block .wp-block-table th,
     735.editor-block-list__block .wp-block-table td {
     736        padding: 0;
     737}
     738
     739.rtl .editor-block-list__block .wp-block-table th {
     740        text-align: right;
     741}
     742
     743/*--------------------------------------------------------------
     7445.0 Blocks - Layout Elements
     745--------------------------------------------------------------*/
     746
     747/* Button */
     748
     749.wp-block-button .wp-block-button__link {
     750        background-color: #333;
     751        border: 0;
     752        border-radius: 0;
     753        color: #fff;
     754        cursor: pointer;
     755        font-family: "Noto Sans", sans-serif;
     756        font-size: 12px;
     757        font-weight: 700;
     758        line-height: 1.5;
     759        padding: 0.7917em 1.5em;
     760        text-transform: uppercase;
     761        vertical-align: baseline;
     762}
     763
     764@media screen and (min-width: 46.25em) {
     765        .wp-block-button .wp-block-button__link {
     766                font-size: 14px;
     767                padding: 0.8214em 1.6429em;
     768        }
     769}
     770
     771@media screen and (min-width: 55em) {
     772        .wp-block-button .wp-block-button__link {
     773                font-size: 16px;
     774                padding: 0.8125em 1.625em;
     775        }
     776}
     777
     778@media screen and (min-width: 59.6875em) {
     779        .wp-block-button .wp-block-button__link {
     780                font-size: 12px;
     781                padding: 0.7917em 1.5833em;
     782        }
     783}
     784
     785@media screen and (min-width: 68.75em) {
     786        .wp-block-button .wp-block-button__link {
     787                font-size: 14px;
     788                padding: 0.8214em 1.5714em;
     789        }
     790}
     791
     792@media screen and (min-width: 77.5em) {
     793        .wp-block-button .wp-block-button__link {
     794                font-size: 16px;
     795                padding: 0.8125em 1.625em;
     796        }
     797}
     798
     799/* Seperator */
     800
     801.wp-block-separator {
     802        max-width: 100px;
     803}
     804
     805.wp-block-separator.is-style-wide {
     806        max-width: 100%;
     807}
     808
     809
     810/*--------------------------------------------------------------
     8116.0 Blocks - Widgets
     812--------------------------------------------------------------*/
     813
     814/* Comments */
     815
     816.wp-block-latest-comments {
     817        margin: 0;
     818}
     819
     820.wp-block-latest-comments__comment,
     821.wp-block-latest-comments__comment-excerpt,
     822.wp-block-latest-comments__comment-excerpt p {
     823        font-size: inherit;
     824}
     825
     826.wp-block-latest-comments__comment-meta a {
     827        border-bottom-color: transparent;
     828        font-weight: 700;
     829}
     830
     831.wp-block-latest-comments__comment-excerpt p:last-child {
     832        margin-bottom: 0;
     833}
     834
     835.wp-block-latest-comments__comment-date {
     836        color: #707070;
     837        font-family: "Noto Sans", sans-serif;
     838        font-size: 12px;
     839        line-height: 1.5;
     840        margin-bottom: 1.6em;
     841}
     842
     843@media screen and (min-width: 46.25em) {
     844        .wp-block-latest-comments__comment-date {
     845                font-size: 14px;
     846        }
     847}
     848
     849@media screen and (min-width: 55em) {
     850        .wp-block-latest-comments__comment-date {
     851                font-size: 16px;
     852        }
     853}
     854
     855@media screen and (min-width: 59.6875em) {
     856        .wp-block-latest-comments__comment-date {
     857                font-size: 12px;
     858        }
     859}
     860
     861@media screen and (min-width: 68.75em) {
     862        .wp-block-latest-comments__comment-date {
     863                font-size: 14px;
     864        }
     865}
     866
     867@media screen and (min-width: 77.5em) {
     868        .wp-block-latest-comments__comment-date {
     869                font-size: 16px;
     870        }
     871}
     872
     873.wp-block-latest-comments .wp-block-latest-comments__comment {
     874        border-top: 1px solid #eaeaea;
     875        border-top: 1px solid rgba(51, 51, 51, 0.1);
     876        margin-bottom: 0;
     877        padding: 1.6em 0;
     878}

  • src/wp-content/themes/twentyfifteen/functions.php

     
    142142         */
    143143        add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );
    144144
     145        // Load regular editor styles into the new block-based editor.
     146        add_theme_support( 'editor-styles' );
     147
     148        // Load default block styles.
     149        add_theme_support( 'wp-block-styles' );
     150
     151        // Add support for custom color scheme.
     152        add_theme_support( 'editor-color-palette', array(
     153                array(
     154                        'name'  => __( 'Dark Gray', 'twentyfifteen' ),
     155                        'slug'  => 'dark-gray',
     156                        'color' => '#111',
     157                ),
     158                array(
     159                        'name'  => __( 'Light Gray', 'twentyfifteen' ),
     160                        'slug'  => 'light-gray',
     161                        'color' => '#f1f1f1',
     162                ),
     163                array(
     164                        'name'  => __( 'White', 'twentyfifteen' ),
     165                        'slug'  => 'white',
     166                        'color' => '#fff',
     167                ),
     168                array(
     169                        'name'  => __( 'Yellow', 'twentyfifteen' ),
     170                        'slug'  => 'yellow',
     171                        'color' => '#f4ca16',
     172                ),
     173                array(
     174                        'name'  => __( 'Dark Brown', 'twentyfifteen' ),
     175                        'slug'  => 'dark-brown',
     176                        'color' => '#352712',
     177                ),
     178                array(
     179                        'name'  => __( 'Medium Pink', 'twentyfifteen' ),
     180                        'slug'  => 'medium-pink',
     181                        'color' => '#e53b51',
     182                ),
     183                array(
     184                        'name'  => __( 'Light Pink', 'twentyfifteen' ),
     185                        'slug'  => 'light-pink',
     186                        'color' => '#ffe5d1',
     187                ),
     188                array(
     189                        'name'  => __( 'Dark Purple', 'twentyfifteen' ),
     190                        'slug'  => 'dark-purple',
     191                        'color' => '#2e2256',
     192                ),
     193                array(
     194                        'name'  => __( 'Purple', 'twentyfifteen' ),
     195                        'slug'  => 'purple',
     196                        'color' => '#674970',
     197                ),
     198                array(
     199                        'name'  => __( 'Blue Gray', 'twentyfifteen' ),
     200                        'slug'  => 'blue-gray',
     201                        'color' => '#22313f',
     202                ),
     203                array(
     204                        'name'  => __( 'Bright Blue', 'twentyfifteen' ),
     205                        'slug'  => 'bright-blue',
     206                        'color' => '#55c3dc',
     207                ),
     208                array(
     209                        'name'  => __( 'Light Blue', 'twentyfifteen' ),
     210                        'slug'  => 'light-blue',
     211                        'color' => '#e9f2f9',
     212                ),
     213        ) );
     214
    145215        // Indicate widget sidebars can use selective refresh in the Customizer.
    146216        add_theme_support( 'customize-selective-refresh-widgets' );
    147217}
    … …  
    259329        // Load our main stylesheet.
    260330        wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
    261331
     332        // Theme block stylesheet.
     333        wp_enqueue_style( 'twentyfifteen-block-style', get_theme_file_uri( '/css/blocks.css' ), array( 'twentyfifteen-style' ), '1.0' );
     334
    262335        // Load the Internet Explorer specific stylesheet.
    263336        wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    264337        wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
    … …  
    286359add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
    287360
    288361/**
     362 * Enqueue editor styles for Gutenberg
     363 *
     364 * @since Twenty Fifteen 2.1
     365 */
     366function twentyfifteen_block_editor_styles() {
     367        // Block styles.
     368        wp_enqueue_style( 'twentyfifteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     369        // Add custom fonts.
     370        wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );
     371}
     372add_action( 'enqueue_block_editor_assets', 'twentyfifteen_block_editor_styles' );
     373
     374
     375/**
    289376 * Add preconnect for Google Fonts.
    290377 *
    291378 * @since Twenty Fifteen 1.7