WordPress.org
Get WordPress

Make WordPress Core

Ticket #45043: 45043.patch

File 45043.patch, 30.2 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 - Embeds
     157.0 Blocks - Custom Colors
     16--------------------------------------------------------------*/
     17
     18/*--------------------------------------------------------------
     191.0 General Block Styles
     20--------------------------------------------------------------*/
     21
     22/* Captions */
     23
     24[class^="wp-block-"] figcaption {
     25        color: #707070;
     26        font-family: "Noto Sans", sans-serif;
     27        font-size: 12px;
     28        line-height: 1.5;
     29        margin-bottom: 0;
     30        padding: 0.5em 0;
     31}
     32
     33@media screen and (min-width: 46.25em) {
     34        [class^="wp-block-"] figcaption {
     35                font-size: 14px;
     36        }
     37}
     38
     39@media screen and (min-width: 55em) {
     40        [class^="wp-block-"] figcaption {
     41                font-size: 16px;
     42        }
     43}
     44
     45@media screen and (min-width: 59.6875em) {
     46        [class^="wp-block-"] figcaption {
     47                font-size: 12px;
     48        }
     49}
     50
     51@media screen and (min-width: 68.75em) {
     52        [class^="wp-block-"] figcaption {
     53                font-size: 14px;
     54        }
     55}
     56
     57@media screen and (min-width: 77.5em) {
     58        [class^="wp-block-"] figcaption {
     59                font-size: 16px;
     60        }
     61}
     62
     63/*--------------------------------------------------------------
     642.0 Blocks - Common Blocks
     65--------------------------------------------------------------*/
     66
     67/* Paragraph */
     68
     69p.has-drop-cap:not(:focus)::first-letter {
     70        font-size: 5em;
     71}
     72
     73/* Gallery */
     74
     75.wp-block-gallery {
     76        margin-bottom: 1.6em;
     77}
     78
     79/* Audio */
     80
     81.wp-block-audio audio {
     82        display: block;
     83        width: 100%;
     84}
     85
     86/* Cover Image */
     87
     88.wp-block-cover-image .wp-block-cover-image-text,
     89.wp-block-cover-image h2 {
     90        font-size: 29px;
     91        line-height: 1.2069;
     92}
     93
     94/* Quote */
     95
     96.wp-block-quote,
     97.wp-block-quote:not(.is-large):not(.is-style-large),
     98[class^="wp-block-"] blockquote {
     99        border-color: #707070;
     100}
     101
     102.wp-block-quote cite,
     103.wp-block-quote__citation {
     104        color: #333;
     105        font-family: "Noto Sans", sans-serif;
     106        font-size: 15px;
     107        font-style: normal;
     108        line-height: 1.6;
     109        text-transform: none;
     110}
     111
     112.wp-block-quote em,
     113.wp-block-quote i {
     114        font-style: normal;
     115}
     116
     117.wp-block-quote strong,
     118.wp-block-quote b {
     119        font-weight: 400;
     120}
     121
     122
     123@media screen and (min-width: 46.25em) {
     124        .edit-post-visual-editor .wp-block-quote p {
     125                font-size: 20px;
     126                line-height: 1.75;
     127        }
     128
     129        .wp-block-quote cite,
     130        .wp-block-quote__citation {
     131                font-size: 17px;
     132                line-height: 1.6471;
     133        }
     134}
     135
     136@media screen and (min-width: 55em) {
     137        .edit-post-visual-editor .wp-block-quote p {
     138                font-size: 22px;
     139                line-height: 1.8182;
     140        }
     141
     142        .wp-block-quote cite,
     143        .wp-block-quote__citation {
     144                font-size: 19px;
     145                line-height: 1.6842;
     146        }
     147}
     148
     149@media screen and (min-width: 59.6875em) {
     150        .edit-post-visual-editor .wp-block-quote p {
     151                font-size: 18px;
     152                line-height: 1.6667;
     153        }
     154
     155        .wp-block-quote cite,
     156        .wp-block-quote__citation {
     157                font-size: 15px;
     158                line-height: 1.6;
     159        }
     160}
     161
     162@media screen and (min-width: 68.75em) {
     163        .edit-post-visual-editor .wp-block-quote p {
     164                font-size: 20px;
     165                line-height: 1.75;
     166        }
     167
     168        .wp-block-quote cite,
     169        .wp-block-quote__citation {
     170                font-size: 17px;
     171                line-height: 1.6471;
     172        }
     173}
     174
     175@media screen and (min-width: 77.5em) {
     176        .edit-post-visual-editor .wp-block-quote p {
     177                font-size: 22px;
     178                line-height: 1.8182;
     179        }
     180
     181        .wp-block-quote cite,
     182        .wp-block-quote__citation {
     183                font-size: 19px;
     184                line-height: 1.6842;
     185        }
     186}
     187
     188/* File */
     189
     190.wp-block-file a.wp-block-file__button {
     191        background-color: #333;
     192        border: 0;
     193        border-radius: 0;
     194        color: #fff;
     195        cursor: pointer;
     196        font-family: "Noto Sans", sans-serif;
     197        font-size: 12px;
     198        font-weight: 700;
     199        line-height: 1.5;
     200        padding: 0.7917em 1.5em;
     201        text-transform: uppercase;
     202        vertical-align: baseline;
     203}
     204
     205.wp-block-file a.wp-block-file__button:hover,
     206.wp-block-file a.wp-block-file__button:focus {
     207        background-color: #707070;
     208        background-color: rgba(51, 51, 51, 0.7);
     209        outline: 0;
     210}
     211
     212@media screen and (min-width: 46.25em) {
     213        .wp-block-file a.wp-block-file__button {
     214                font-size: 14px;
     215                font-size: 1.4rem;
     216                padding: 0.8214em 1.6429em;
     217        }
     218}
     219
     220@media screen and (min-width: 55em) {
     221        .wp-block-file a.wp-block-file__button {
     222                font-size: 16px;
     223                font-size: 1.6rem;
     224                padding: 0.8125em 1.625em;
     225        }
     226}
     227
     228@media screen and (min-width: 59.6875em) {
     229        .wp-block-file a.wp-block-file__button {
     230                font-size: 12px;
     231                font-size: 1.2rem;
     232                padding: 0.7917em 1.5833em;
     233        }
     234}
     235
     236@media screen and (min-width: 68.75em) {
     237        .wp-block-file a.wp-block-file__button {
     238                font-size: 14px;
     239                font-size: 1.4rem;
     240                padding: 0.8214em 1.5714em;
     241        }
     242}
     243
     244@media screen and (min-width: 77.5em) {
     245        .wp-block-file a.wp-block-file__button {
     246                font-size: 16px;
     247                font-size: 1.6rem;
     248                padding: 0.8125em 1.625em;
     249        }
     250}
     251
     252/*--------------------------------------------------------------
     2533.0 Blocks - Formatting
     254--------------------------------------------------------------*/
     255
     256/* Code */
     257
     258.wp-block-code {
     259        background-color: transparent;
     260        border: 0;
     261        padding: 0;
     262}
     263
     264.wp-block-code code {
     265        font-family: Inconsolata, monospace;
     266        font-size: inherit;
     267}
     268
     269/* Preformatted */
     270
     271.wp-block-preformatted {
     272        background-color: rgba(0, 0, 0, 0.01);
     273        border: 1px solid #eaeaea;
     274        line-height: 1.2;
     275        margin-bottom: 1.6em;
     276        max-width: 100%;
     277        overflow: auto;
     278        padding: 0.8em;
     279        white-space: pre;
     280        white-space: pre-wrap;
     281        word-wrap: break-word;
     282}
     283
     284/* Pullquote */
     285
     286.wp-block-pullquote {
     287        border: 0;
     288}
     289
     290.wp-block-pullquote blockquote {
     291        border-left: 0;
     292        margin-left: 0;
     293        padding-left: 0;
     294}
     295
     296.wp-block-pullquote cite {
     297        color: #333;
     298        font-family: "Noto Sans", sans-serif;
     299        font-size: 15px;
     300        font-style: normal;
     301        line-height: 1.6;
     302        text-transform: none;
     303}
     304
     305@media screen and (min-width: 46.25em) {
     306        .wp-block-pullquote cite {
     307                font-size: 17px;
     308                line-height: 1.6471;
     309        }
     310}
     311
     312@media screen and (min-width: 55em) {
     313        .wp-block-pullquote cite {
     314                font-size: 19px;
     315                line-height: 1.6842;
     316        }
     317}
     318
     319@media screen and (min-width: 59.6875em) {
     320        .wp-block-pullquote cite {
     321                font-size: 15px;
     322                line-height: 1.6;
     323        }
     324}
     325
     326@media screen and (min-width: 68.75em) {
     327        .wp-block-pullquote cite {
     328                font-size: 17px;
     329                line-height: 1.6471;
     330        }
     331}
     332
     333@media screen and (min-width: 77.5em) {
     334        .wp-block-pullquote cite {
     335                font-size: 19px;
     336                line-height: 1.6842;
     337        }
     338}
     339
     340/* Table */
     341
     342.wp-block-table th,
     343.wp-block-table td {
     344        border-color: #eaeaea;
     345        border-width: 0 1px 1px 0;
     346}
     347
     348/*--------------------------------------------------------------
     3494.0 Blocks - Layout Elements
     350--------------------------------------------------------------*/
     351
     352/* Button */
     353
     354.wp-block-button .wp-block-button__link {
     355        background-color: #333;
     356        border: 0;
     357        border-radius: 0;
     358        color: #fff;
     359        cursor: pointer;
     360        font-family: "Noto Sans", sans-serif;
     361        font-size: 12px;
     362        font-size: 1.2rem;
     363        font-weight: 700;
     364        line-height: 1.5;
     365        padding: 0.7917em 1.5em;
     366        text-transform: uppercase;
     367        vertical-align: baseline;
     368}
     369
     370.wp-block-button .wp-block-button__link:hover,
     371.wp-block-button .wp-block-button__link:focus {
     372        background-color: #707070;
     373        background-color: rgba(51, 51, 51, 0.7);
     374        outline: 0;
     375}
     376
     377@media screen and (min-width: 46.25em) {
     378        .wp-block-button .wp-block-button__link {
     379                font-size: 14px;
     380                font-size: 1.4rem;
     381                padding: 0.8214em 1.6429em;
     382        }
     383}
     384
     385@media screen and (min-width: 55em) {
     386        .wp-block-button .wp-block-button__link {
     387                font-size: 16px;
     388                font-size: 1.6rem;
     389                padding: 0.8125em 1.625em;
     390        }
     391}
     392
     393@media screen and (min-width: 59.6875em) {
     394        .wp-block-button .wp-block-button__link {
     395                font-size: 12px;
     396                font-size: 1.2rem;
     397                padding: 0.7917em 1.5833em;
     398        }
     399}
     400
     401@media screen and (min-width: 68.75em) {
     402        .wp-block-button .wp-block-button__link {
     403                font-size: 14px;
     404                font-size: 1.4rem;
     405                padding: 0.8214em 1.5714em;
     406        }
     407}
     408
     409@media screen and (min-width: 77.5em) {
     410        .wp-block-button .wp-block-button__link {
     411                font-size: 16px;
     412                font-size: 1.6rem;
     413                padding: 0.8125em 1.625em;
     414        }
     415}
     416
     417/* Seperators */
     418
     419.wp-block-separator {
     420        border: 0;
     421        max-width: 100px;
     422}
     423
     424.wp-block-separator.is-style-wide {
     425        max-width: 100%;
     426}
     427
     428/*--------------------------------------------------------------
     4295.0 Blocks - Widgets
     430--------------------------------------------------------------*/
     431
     432/* Comments */
     433
     434.wp-block-latest-comments {
     435        margin: 0;
     436}
     437
     438.wp-block-latest-comments__comment,
     439.wp-block-latest-comments__comment-excerpt,
     440.wp-block-latest-comments__comment-excerpt p {
     441        font-size: inherit;
     442}
     443
     444.wp-block-latest-comments__comment-meta a {
     445        border-bottom-color: transparent;
     446        font-weight: 700;
     447}
     448
     449.wp-block-latest-comments__comment-excerpt p:last-child {
     450        margin-bottom: 0;
     451}
     452
     453.wp-block-latest-comments__comment-date {
     454        color: #707070;
     455        font-family: "Noto Sans", sans-serif;
     456        font-size: 12px;
     457        line-height: 1.5;
     458        margin-bottom: 1.6em;
     459}
     460
     461@media screen and (min-width: 46.25em) {
     462        .wp-block-latest-comments__comment-date {
     463                font-size: 14px;
     464        }
     465}
     466
     467@media screen and (min-width: 55em) {
     468        .wp-block-latest-comments__comment-date {
     469                font-size: 16px;
     470        }
     471}
     472
     473@media screen and (min-width: 59.6875em) {
     474        .wp-block-latest-comments__comment-date {
     475                font-size: 12px;
     476        }
     477}
     478
     479@media screen and (min-width: 68.75em) {
     480        .wp-block-latest-comments__comment-date {
     481                font-size: 14px;
     482        }
     483}
     484
     485@media screen and (min-width: 77.5em) {
     486        .wp-block-latest-comments__comment-date {
     487                font-size: 16px;
     488        }
     489}
     490
     491.wp-block-latest-comments .wp-block-latest-comments__comment {
     492        border-top: 1px solid #eaeaea;
     493        border-top: 1px solid rgba(51, 51, 51, 0.1);
     494        margin-bottom: 0;
     495        padding: 1.6em 0;
     496}

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

  • 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
    145151        // Indicate widget sidebars can use selective refresh in the Customizer.
    146152        add_theme_support( 'customize-selective-refresh-widgets' );
    147153}
    … …  
    259265        // Load our main stylesheet.
    260266        wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
    261267
     268        // Theme block stylesheet.
     269        wp_enqueue_style( 'twentyfifteen-block-style', get_theme_file_uri( '/css/blocks.css' ), array( 'twentyfifteen-style' ), '1.0' );
     270
    262271        // Load the Internet Explorer specific stylesheet.
    263272        wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    264273        wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
    … …  
    286295add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
    287296
    288297/**
     298 * Enqueue editor styles for Gutenberg
     299 *
     300 * @since Twenty Fifteen 2.1
     301 */
     302function twentyfifteen_block_editor_styles() {
     303        // Block styles.
     304        wp_enqueue_style( 'twentyfifteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     305        // Add custom fonts.
     306        wp_enqueue_style( 'twentyfifteen-fonts', twentysixteen_fonts_url(), array(), null );
     307}
     308add_action( 'enqueue_block_editor_assets', 'twentyfifteen_block_editor_styles' );
     309
     310
     311/**
    289312 * Add preconnect for Google Fonts.
    290313 *
    291314 * @since Twenty Fifteen 1.7