WordPress.org
Get WordPress

Make WordPress Core

Ticket #45045: 45045.2.patch

File 45045.2.patch, 29.1 KB (added by laurelfulford, 7 years ago)

  • src/wp-content/themes/twentyseventeen/assets/css/blocks.css

     
     1/*
     2Theme Name: Twenty Seventeen
     3Description: Used to style Gutenberg Blocks.
     4*/
     5
     6/*--------------------------------------------------------------
     7>>> TABLE OF CONTENTS:
     8----------------------------------------------------------------
     91.0 Blocks - Common Blocks
     102.0 Blocks - Formatting
     113.0 Blocks - Layout Elements
     124.0 Blocks - Widgets
     135.0 Blocks - Embeds
     14--------------------------------------------------------------*/
     15
     16/*--------------------------------------------------------------
     171.0 General Block Styles
     18--------------------------------------------------------------*/
     19
     20/* Captions */
     21
     22[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
     23        font-style: italic;
     24        margin-bottom: 1.5em;
     25        text-align: left;
     26}
     27
     28.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
     29        text-align: right;
     30}
     31
     32/*--------------------------------------------------------------
     332.0 Blocks - Common Blocks
     34--------------------------------------------------------------*/
     35
     36/* Paragraph */
     37
     38.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
     39        font-size: 5em;
     40        margin-top: 0.075em;
     41}
     42
     43/* Image */
     44
     45.wp-block-image figure {
     46        margin-bottom: 0;
     47        margin-top: 0;
     48}
     49
     50/* Gallery */
     51
     52.wp-block-gallery {
     53        margin-bottom: 1.5em;
     54}
     55
     56.wp-block-gallery figcaption {
     57        font-style: italic;
     58}
     59
     60.wp-block-gallery.aligncenter {
     61        display: flex;
     62        margin: 0 -8px;
     63}
     64
     65/* Quote */
     66
     67.wp-block-quote:not(.is-large):not(.is-style-large) {
     68        border: 0;
     69        padding: 0;
     70}
     71
     72.wp-block-quote.alignleft p:last-of-type,
     73.wp-block-quote.alignright p:last-of-type {
     74        margin-bottom: 0;
     75}
     76
     77.wp-block-quote cite {
     78        color: inherit;
     79        font-size: inherit;
     80}
     81
     82/* Audio */
     83
     84.wp-block-audio audio {
     85        display: block;
     86        width: 100%;
     87}
     88
     89/* Cover Image */
     90
     91.wp-block-cover-image.alignright,
     92.wp-block-cover-image.alignleft,
     93.wp-block-cover-image.aligncenter {
     94        display: flex;
     95}
     96
     97/* File */
     98
     99.wp-block-file .wp-block-file__button {
     100        background-color: #222;
     101        -webkit-border-radius: 2px;
     102        border-radius: 2px;
     103        -webkit-box-shadow: none;
     104        box-shadow: none;
     105        color: #fff;
     106        display: inline-block;
     107        font-size: 14px;
     108        font-size: 0.875rem;
     109        font-weight: 800;
     110        margin-top: 2em;
     111        padding: 0.7em 2em;
     112        -webkit-transition: background-color 0.2s ease-in-out;
     113        transition: background-color 0.2s ease-in-out;
     114        white-space: nowrap;
     115}
     116
     117.wp-block-file .wp-block-file__button:hover,
     118.wp-block-file .wp-block-file__button:focus {
     119        background-color: #767676;
     120        -webkit-box-shadow: none;
     121        box-shadow: none;
     122}
     123
     124/*--------------------------------------------------------------
     1253.0 Blocks - Formatting
     126--------------------------------------------------------------*/
     127
     128/* Code */
     129
     130.wp-block-code {
     131        background: transparent;
     132        border: 0;
     133        padding: 0;
     134}
     135
     136/* Pullquote */
     137
     138.wp-block-pullquote {
     139        border: 0;
     140}
     141
     142.wp-block-pullquote__citation,
     143.wp-block-pullquote cite {
     144        font-size: inherit;
     145        text-transform: none;
     146}
     147
     148/* Table */
     149
     150.wp-block-table thead th {
     151        border-bottom: 2px solid #bbb;
     152        padding-bottom: 0.5em;
     153}
     154
     155.wp-block-table tr {
     156        border-bottom: 1px solid #eee;
     157}
     158
     159.wp-block-table th,
     160.wp-block-table td {
     161        border: 0;
     162}
     163
     164.rtl .wp-block-table th,
     165.rtl .wp-block-table td {
     166        text-align: right;
     167}
     168
     169/*--------------------------------------------------------------
     1704.0 Blocks - Layout Elements
     171--------------------------------------------------------------*/
     172
     173/* Buttons */
     174
     175.wp-block-button .wp-block-button__link {
     176        background-color: #222;
     177        -webkit-border-radius: 2px;
     178        border-radius: 2px;
     179        -webkit-box-shadow: none;
     180        box-shadow: none;
     181        color: #fff;
     182        display: inline-block;
     183        font-size: 14px;
     184        font-size: 0.875rem;
     185        font-weight: 800;
     186        line-height: 1.66;
     187        margin-top: 2em;
     188        padding: 0.7em 2em;
     189        -webkit-transition: background-color 0.2s ease-in-out;
     190        transition: background-color 0.2s ease-in-out;
     191        white-space: nowrap;
     192}
     193
     194.wp-block-button .wp-block-button__link:hover,
     195.wp-block-button .wp-block-button__link:focus {
     196        background-color: #767676;
     197        -webkit-box-shadow: none;
     198        box-shadow: none;
     199}
     200
     201/* Separator */
     202
     203.wp-block-separator {
     204        border: 0;
     205}
     206
     207.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
     208        max-width: 100px;
     209}
     210
     211/*--------------------------------------------------------------
     2125.0 Blocks - Widgets
     213--------------------------------------------------------------*/
     214
     215/* Comments */
     216
     217.wp-block-latest-comments article {
     218        margin-bottom: 4em;
     219}
     220
     221.blog:not(.has-sidebar) #primary .wp-block-latest-comments article,
     222.archive:not(.page-one-column):not(.has-sidebar) #primary .wp-block-latest-comments article,
     223.search:not(.has-sidebar) #primary .wp-block-latest-comments article {
     224        float: none;
     225        width: 100%;
     226}
     227
     228.wp-block-latest-comments .avatar,
     229.wp-block-latest-comments__comment-avatar {
     230        border-radius: 0;
     231}
     232
     233.wp-block-latest-comments a {
     234        -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
     235        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
     236
     237}
     238
     239.wp-block-latest-comments__comment-meta {
     240        font-size: 16px;
     241        font-size: 1rem;
     242        margin-bottom: 0.4em;
     243}
     244
     245.wp-block-latest-comments__comment-author,
     246.wp-block-latest-comments__comment-link {
     247        font-weight: 700;
     248        text-decoration: none;
     249}
     250
     251.wp-block-latest-comments__comment-date {
     252        color: #767676;
     253        font-size: 10px;
     254        font-size: 0.625rem;
     255        font-weight: 800;
     256        letter-spacing: 0.1818em;
     257        margin-top: 0.4em;
     258        text-transform: uppercase;
     259}
     260
     261.editor-block-list__block .wp-block-latest-comments__comment-excerpt p {
     262        font-size: 14px;
     263        font-size: 0.875rem;
     264}

  • src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css

     
     1/*
     2Theme Name: Twenty Seventeen
     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 Settings
     113.0 Blocks - Common Blocks
     124.0 Blocks - Formatting
     135.0 Blocks - Layout Elements
     146.0 Blocks - Widgets
     15
     16--------------------------------------------------------------*/
     17
     18/*--------------------------------------------------------------
     191.0 General Typography
     20--------------------------------------------------------------*/
     21
     22.edit-post-visual-editor .editor-block-list__block,
     23.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     24        font-size: 15px;
     25        font-size: 0.9375rem;
     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-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
     35        font-size: 20px;
     36        font-size: 1.25rem;
     37        font-weight: 300;
     38}
     39
     40@media screen and (min-width: 30em) {
     41
     42        .edit-post-visual-editor .editor-block-list__block {
     43                font-size: 18px;
     44                font-size: 1.125rem;
     45        }
     46
     47        .editor-post-title__block .editor-post-title__input {
     48                font-size: 26px;
     49                font-size: 1.625rem;
     50        }
     51
     52        .edit-post-visual-editor .editor-block-list__block h1 {
     53                font-size: 30px;
     54                font-size: 1.875rem;
     55        }
     56
     57        .edit-post-visual-editor .editor-block-list__block h2 {
     58                font-size: 26px;
     59                font-size: 1.625rem;
     60        }
     61
     62        .edit-post-visual-editor .editor-block-list__block h3 {
     63                font-size: 22px;
     64                font-size: 1.375rem;
     65        }
     66
     67        .edit-post-visual-editor .editor-block-list__block h4 {
     68                font-size: 18px;
     69                font-size: 1.125rem;
     70        }
     71
     72        .edit-post-visual-editor .editor-block-list__block h5 {
     73                font-size: 13px;
     74                font-size: 0.8125rem;
     75        }
     76
     77        .edit-post-visual-editor .editor-block-list__block h6 {
     78                font-size: 16px;
     79                font-size: 1rem;
     80        }
     81}
     82
     83@media screen and (min-width: 48em) {
     84
     85        .edit-post-visual-editor .editor-block-list__block {
     86                font-size: 16px;
     87                font-size: 1rem;
     88        }
     89
     90        .editor-rich-text__tinymce.mce-content-body {
     91                line-height: 1.5;
     92        }
     93}
     94
     95/* Typography for Arabic Font */
     96
     97html[lang="ar"] .edit-post-visual-editor .editor-block-list__block,
     98html[lang="ary"] .edit-post-visual-editor .editor-block-list__block,
     99html[lang="azb"] .edit-post-visual-editor .editor-block-list__block,
     100html[lang="fa-IR"] .edit-post-visual-editor .editor-block-list__block,
     101html[lang="haz"] .edit-post-visual-editor .editor-block-list__block,
     102html[lang="ps"] .edit-post-visual-editor .editor-block-list__block,
     103html[lang="ur"] .edit-post-visual-editor .editor-block-list__block {
     104        font-family: Tahoma, Arial, sans-serif;
     105}
     106
     107html[lang="ar"] .edit-post-visual-editor h1,
     108html[lang="ar"] .edit-post-visual-editor h2,
     109html[lang="ar"] .edit-post-visual-editor h3,
     110html[lang="ar"] .edit-post-visual-editor h4,
     111html[lang="ar"] .edit-post-visual-editor h5,
     112html[lang="ar"] .edit-post-visual-editor h6,
     113html[lang="ary"] .edit-post-visual-editor h1,
     114html[lang="ary"] .edit-post-visual-editor h2,
     115html[lang="ary"] .edit-post-visual-editor h3,
     116html[lang="ary"] .edit-post-visual-editor h4,
     117html[lang="ary"] .edit-post-visual-editor h5,
     118html[lang="ary"] .edit-post-visual-editor h6,
     119html[lang="azb"] .edit-post-visual-editor h1,
     120html[lang="azb"] .edit-post-visual-editor h2,
     121html[lang="azb"] .edit-post-visual-editor h3,
     122html[lang="azb"] .edit-post-visual-editor h4,
     123html[lang="azb"] .edit-post-visual-editor h5,
     124html[lang="azb"] .edit-post-visual-editor h6,
     125html[lang="fa-IR"] .edit-post-visual-editor h1,
     126html[lang="fa-IR"] .edit-post-visual-editor h2,
     127html[lang="fa-IR"] .edit-post-visual-editor h3,
     128html[lang="fa-IR"] .edit-post-visual-editor h4,
     129html[lang="fa-IR"] .edit-post-visual-editor h5,
     130html[lang="fa-IR"] .edit-post-visual-editor h6,
     131html[lang="haz"] .edit-post-visual-editor h1,
     132html[lang="haz"] .edit-post-visual-editor h2,
     133html[lang="haz"] .edit-post-visual-editor h3,
     134html[lang="haz"] .edit-post-visual-editor h4,
     135html[lang="haz"] .edit-post-visual-editor h5,
     136html[lang="haz"] .edit-post-visual-editor h6,
     137html[lang="ps"] .edit-post-visual-editor h1,
     138html[lang="ps"] .edit-post-visual-editor h2,
     139html[lang="ps"] .edit-post-visual-editor h3,
     140html[lang="ps"] .edit-post-visual-editor h4,
     141html[lang="ps"] .edit-post-visual-editor h5,
     142html[lang="ps"] .edit-post-visual-editor h6,
     143html[lang="ur"] .edit-post-visual-editor h1,
     144html[lang="ur"] .edit-post-visual-editor h2,
     145html[lang="ur"] .edit-post-visual-editor h3,
     146html[lang="ur"] .edit-post-visual-editor h4,
     147html[lang="ur"] .edit-post-visual-editor h5,
     148html[lang="ur"] .edit-post-visual-editor h6 {
     149        font-weight: 700;
     150}
     151
     152/* Typography for Chinese Font */
     153
     154html[lang^="zh-"] .edit-post-visual-editor .editor-block-list__block,
     155html[lang="zh-CN"] .edit-post-visual-editor .editor-block-list__block {
     156        font-family: "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, sans-serif;
     157}
     158
     159html[lang^="zh-"] .edit-post-visual-editor h1,
     160html[lang^="zh-"] .edit-post-visual-editor h2,
     161html[lang^="zh-"] .edit-post-visual-editor h3,
     162html[lang^="zh-"] .edit-post-visual-editor h4,
     163html[lang^="zh-"] .edit-post-visual-editor h5,
     164html[lang^="zh-"] .edit-post-visual-editor h6 {
     165        font-weight: 700;
     166}
     167
     168/* Typography for Cyrillic Font */
     169
     170html[lang="bg-BG"] .edit-post-visual-editor .editor-block-list__block,
     171html[lang="ru-RU"] .edit-post-visual-editor .editor-block-list__block,
     172html[lang="uk"] .edit-post-visual-editor .editor-block-list__block {
     173        font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
     174}
     175
     176html[lang="bg-BG"] .edit-post-visual-editor h1,
     177html[lang="bg-BG"] .edit-post-visual-editor h2,
     178html[lang="bg-BG"] .edit-post-visual-editor h3,
     179html[lang="bg-BG"] .edit-post-visual-editor h4,
     180html[lang="bg-BG"] .edit-post-visual-editor h5,
     181html[lang="bg-BG"] .edit-post-visual-editor h6,
     182html[lang="ru-RU"] .edit-post-visual-editor h1,
     183html[lang="ru-RU"] .edit-post-visual-editor h2,
     184html[lang="ru-RU"] .edit-post-visual-editor h3,
     185html[lang="ru-RU"] .edit-post-visual-editor h4,
     186html[lang="ru-RU"] .edit-post-visual-editor h5,
     187html[lang="ru-RU"] .edit-post-visual-editor h6,
     188html[lang="uk"] .edit-post-visual-editor h1,
     189html[lang="uk"] .edit-post-visual-editor h2,
     190html[lang="uk"] .edit-post-visual-editor h3,
     191html[lang="uk"] .edit-post-visual-editor h4,
     192html[lang="uk"] .edit-post-visual-editor h5,
     193html[lang="uk"] .edit-post-visual-editor h6 {
     194        font-weight: 700;
     195        line-height: 1.2;
     196}
     197
     198/* Typography for Devanagari Font */
     199
     200html[lang="bn-BD"] .edit-post-visual-editor .editor-block-list__block,
     201html[lang="hi-IN"] .edit-post-visual-editor .editor-block-list__block,
     202html[lang="mr-IN"] .edit-post-visual-editor .editor-block-list__block {
     203        font-family: Arial, sans-serif;
     204}
     205
     206html[lang="bn-BD"] .edit-post-visual-editor h1,
     207html[lang="bn-BD"] .edit-post-visual-editor h2,
     208html[lang="bn-BD"] .edit-post-visual-editor h3,
     209html[lang="bn-BD"] .edit-post-visual-editor h4,
     210html[lang="bn-BD"] .edit-post-visual-editor h5,
     211html[lang="bn-BD"] .edit-post-visual-editor h6,
     212html[lang="hi-IN"] .edit-post-visual-editor h1,
     213html[lang="hi-IN"] .edit-post-visual-editor h2,
     214html[lang="hi-IN"] .edit-post-visual-editor h3,
     215html[lang="hi-IN"] .edit-post-visual-editor h4,
     216html[lang="hi-IN"] .edit-post-visual-editor h5,
     217html[lang="hi-IN"] .edit-post-visual-editor h6,
     218html[lang="mr-IN"] .edit-post-visual-editor h1,
     219html[lang="mr-IN"] .edit-post-visual-editor h2,
     220html[lang="mr-IN"] .edit-post-visual-editor h3,
     221html[lang="mr-IN"] .edit-post-visual-editor h4,
     222html[lang="mr-IN"] .edit-post-visual-editor h5,
     223html[lang="mr-IN"] .edit-post-visual-editor h6 {
     224        font-weight: 700;
     225}
     226
     227/* Typography for Greek Font */
     228
     229html[lang="el"] .edit-post-visual-editor .editor-block-list__block {
     230        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     231}
     232
     233html[lang="el"] .edit-post-visual-editor h1,
     234html[lang="el"] .edit-post-visual-editor h2,
     235html[lang="el"] .edit-post-visual-editor h3,
     236html[lang="el"] .edit-post-visual-editor h4,
     237html[lang="el"] .edit-post-visual-editor h5,
     238html[lang="el"] .edit-post-visual-editor h6 {
     239        font-weight: 700;
     240        line-height: 1.3;
     241}
     242
     243/* Typography for Gujarati Font */
     244
     245html[lang="gu-IN"] .edit-post-visual-editor .editor-block-list__block {
     246        font-family: Arial, sans-serif;
     247}
     248
     249html[lang="gu-IN"] .edit-post-visual-editor h1,
     250html[lang="gu-IN"] .edit-post-visual-editor h2,
     251html[lang="gu-IN"] .edit-post-visual-editor h3,
     252html[lang="gu-IN"] .edit-post-visual-editor h4,
     253html[lang="gu-IN"] .edit-post-visual-editor h5,
     254html[lang="gu-IN"] .edit-post-visual-editor h6 {
     255        font-weight: 700;
     256}
     257
     258/* Typography for Hebrew Font */
     259
     260html[lang="he-IL"] .edit-post-visual-editor .editor-block-list__block {
     261        font-family: "Arial Hebrew", Arial, sans-serif;
     262}
     263
     264html[lang="he-IL"] .edit-post-visual-editor h1,
     265html[lang="he-IL"] .edit-post-visual-editor h2,
     266html[lang="he-IL"] .edit-post-visual-editor h3,
     267html[lang="he-IL"] .edit-post-visual-editor h4,
     268html[lang="he-IL"] .edit-post-visual-editor h5,
     269html[lang="he-IL"] .edit-post-visual-editor h6 {
     270        font-weight: 700;
     271}
     272
     273/* Typography for Japanese Font */
     274
     275html[lang="ja"] .edit-post-visual-editor .editor-block-list__block {
     276        font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
     277}
     278
     279html[lang="ja"] .edit-post-visual-editor h1,
     280html[lang="ja"] .edit-post-visual-editor h2,
     281html[lang="ja"] .edit-post-visual-editor h3,
     282html[lang="ja"] .edit-post-visual-editor h4,
     283html[lang="ja"] .edit-post-visual-editor h5,
     284html[lang="ja"] .edit-post-visual-editor h6 {
     285        font-weight: 700;
     286}
     287
     288/* Typography for Korean font */
     289
     290html[lang="ko-KR"] .edit-post-visual-editor .editor-block-list__block {
     291        font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif;
     292}
     293
     294html[lang="ko-KR"] .edit-post-visual-editor h1,
     295html[lang="ko-KR"] .edit-post-visual-editor h2,
     296html[lang="ko-KR"] .edit-post-visual-editor h3,
     297html[lang="ko-KR"] .edit-post-visual-editor h4,
     298html[lang="ko-KR"] .edit-post-visual-editor h5,
     299html[lang="ko-KR"] .edit-post-visual-editor h6 {
     300        font-weight: 600;
     301}
     302
     303/* Typography for Thai Font */
     304
     305html[lang="th"] .edit-post-visual-editor .editor-block-list__block {
     306        line-height: 1.8;
     307        font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
     308}
     309
     310html[lang="th"] .edit-post-visual-editor h1,
     311html[lang="th"] .edit-post-visual-editor h2,
     312html[lang="th"] .edit-post-visual-editor h3,
     313html[lang="th"] .edit-post-visual-editor h4,
     314html[lang="th"] .edit-post-visual-editor h5,
     315html[lang="th"] .edit-post-visual-editor h6 {
     316        line-height: 1.65;
     317        font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif;
     318}
     319
     320/* Remove letter-spacing for all non-latin alphabets */
     321
     322html[lang="ar"] .edit-post-visual-editor *,
     323html[lang="ary"] .edit-post-visual-editor *,
     324html[lang="azb"] .edit-post-visual-editor *,
     325html[lang="haz"] .edit-post-visual-editor *,
     326html[lang="ps"] .edit-post-visual-editor *,
     327html[lang^="zh-"] .edit-post-visual-editor *,
     328html[lang="bg-BG"] .edit-post-visual-editor *,
     329html[lang="ru-RU"] .edit-post-visual-editor *,
     330html[lang="uk"] .edit-post-visual-editor *,
     331html[lang="bn-BD"] .edit-post-visual-editor *,
     332html[lang="hi-IN"] .edit-post-visual-editor *,
     333html[lang="mr-IN"] .edit-post-visual-editor *,
     334html[lang="el"] .edit-post-visual-editor *,
     335html[lang="gu-IN"] .edit-post-visual-editor *,
     336html[lang="he-IL"] .edit-post-visual-editor *,
     337html[lang="ja"] .edit-post-visual-editor *,
     338html[lang="ko-KR"] .edit-post-visual-editor *,
     339html[lang="th"] .edit-post-visual-editor * {
     340        letter-spacing: 0 !important;
     341}
     342
     343/*--------------------------------------------------------------
     3442.0 General Block Settings
     345--------------------------------------------------------------*/
     346
     347/* Main column width */
     348
     349body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
     350body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
     351body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
     352        max-width: 740px;
     353}
     354
     355/* Background color */
     356
     357.gutenberg-editor-page .editor-block-list__block {
     358        background-color: transparent;
     359}
     360
     361/* Alignments */
     362
     363.edit-post-visual-editor .alignleft {
     364        margin-right: 1.5em;
     365}
     366
     367.edit-post-visual-editor .alignright {
     368        margin-left: 1.5em;
     369}
     370
     371/* Link styles */
     372
     373.edit-post-visual-editor a,
     374.editor-block-list__block a,
     375.wp-block-freeform.block-library-rich-text__tinymce a {
     376        color: #222;
     377}
     378
     379/* List styles */
     380
     381.edit-post-visual-editor ul:not(.wp-block-gallery),
     382.editor-block-list__block ul:not(.wp-block-gallery),
     383.block-library-list ul,
     384.edit-post-visual-editor ol,
     385.editor-block-list__block ol,
     386.block-library-list ol,
     387.block-library-list .editor-rich-text__tinymce {
     388        margin: 0 0 1.5em 1.5em;
     389        padding: 0;
     390}
     391
     392.edit-post-visual-editor ul:not(.wp-block-gallery),
     393.editor-block-list__block ul:not(.wp-block-gallery),
     394.block-library-list ul {
     395        list-style: disc;
     396}
     397
     398.edit-post-visual-editor ol,
     399.editor-block-list__block ol,
     400.block-library-list ol {
     401        list-style: decimal;
     402}
     403
     404.edit-post-visual-editor li > ul:not(.wp-block-gallery),
     405.editor-block-list__block li > ul:not(.wp-block-gallery),
     406.block-library-list li > ul:not(.wp-block-gallery),
     407.edit-post-visual-editor li > ol,
     408.editor-block-list__block li > ol,
     409.block-library-list li > ol {
     410        margin-bottom: 0;
     411        margin-left: 1.5em;
     412}
     413
     414.edit-post-visual-editor li,
     415.editor-block-list__block li,
     416.block-library-list li {
     417        margin: 0;
     418}
     419
     420.rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
     421.rtl .editor-block-list__block ul:not(.wp-block-gallery),
     422.rtl .block-library-list ul,
     423.rtl .edit-post-visual-editor ol,
     424.rtl .editor-block-list__block ol,
     425.rtl .block-library-list ol,
     426.rtl .block-library-list .editor-rich-text__tinymce,
     427.rtl .edit-post-visual-editor li > ul:not(.wp-block-gallery),
     428.rtl .editor-block-list__block li > ul:not(.wp-block-gallery),
     429.rtl .block-library-list li > ul:not(.wp-block-gallery),
     430.rtl .edit-post-visual-editor li > ol,
     431.rtl .editor-block-list__block li > ol,
     432.rtl .block-library-list li > ol {
     433        margin-left: 1.5em;
     434        margin-right: 1.5em;
     435}
     436
     437/* Quote styles */
     438
     439.editor-block-list__block blockquote p {
     440        font-size: 18px;
     441        font-size: 1.125rem;
     442}
     443
     444.editor-block-list__block blockquote.alignright p,
     445.editor-block-list__block blockquote.alignleft p {
     446        font-size: 13px;
     447        font-size: 0.8125rem;
     448}
     449
     450.editor-block-list__block blockquote cite {
     451        display: block;
     452        font-style: normal;
     453        font-weight: 600;
     454        margin-top: 0.5em;
     455}
     456
     457/* Caption styles*/
     458
     459[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
     460        font-style: italic;
     461        margin-bottom: 1.5em;
     462        text-align: left;
     463}
     464
     465.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
     466        text-align: right;
     467}
     468
     469/* Code styles */
     470
     471.wp-block-freeform.block-library-rich-text__tinymce code {
     472        background: transparent;
     473}
     474
     475/* Table styles */
     476
     477.rtl .editor-block-list__block th {
     478        text-align: right;
     479}
     480
     481/*--------------------------------------------------------------
     4823.0 Blocks - Common Blocks
     483--------------------------------------------------------------*/
     484
     485/* Paragraph */
     486
     487.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
     488        font-size: 5em;
     489        margin-top: 0.075em;
     490}
     491
     492/* Gallery */
     493
     494.wp-block-gallery figcaption {
     495        font-style: italic;
     496}
     497
     498/* Quote */
     499
     500.wp-block-quote {
     501        color: #666;
     502        font-size: 18px;
     503        font-size: 1.125rem;
     504        font-style: italic;
     505        line-height: 1.7;
     506}
     507
     508.wp-block-quote:not(.is-large):not(.is-style-large) {
     509        border: 0;
     510        padding: 0;
     511}
     512
     513.editor-block-list__block .wp-block-quote .wp-block-quote__citation {
     514        color: inherit;
     515        display: block;
     516        font-size: inherit;
     517        font-style: normal;
     518        font-weight: 600;
     519        margin-top: 0.5em;
     520}
     521
     522.wp-block-quote.alignleft,
     523.wp-block-quote.alignright {
     524        color: #666;
     525        width: 48%;
     526}
     527
     528.editor-block-list__block .wp-block-quote.alignleft p,
     529.editor-block-list__block .wp-block-quote.alignright p,
     530.editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation,
     531.editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation {
     532        font-size: 13px;
     533        font-size: 0.8125rem;
     534}
     535
     536.editor-block-list__block .wp-block-quote.alignleft p:last-of-type,
     537.editor-block-list__block .wp-block-quote.alignright p:last-of-type {
     538        margin-bottom: 0;
     539}
     540
     541@media screen and (min-width: 30em) {
     542        .editor-block-list__block .wp-block-quote.alignleft p,
     543        .editor-block-list__block .wp-block-quote.alignright p,
     544        .editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation,
     545        .editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation,
     546        .editor-block-list__block .wp-block-quote footer {
     547                font-size: 14px;
     548                font-size: 0.875rem;
     549        }
     550}
     551
     552@media screen and (min-width: 48em) {
     553        .editor-block-list__block .wp-block-quote.alignleft p,
     554        .editor-block-list__block .wp-block-quote.alignright p,
     555        .editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation,
     556        .editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation {
     557                font-size: 13px;
     558                font-size: 0.8125rem;
     559        }
     560
     561        .editor-block-list__block .wp-block-quote.alignleft {
     562                margin-left: -17.5%;
     563                width: 48%;
     564        }
     565
     566        .editor-block-list__block .wp-block-quote.alignright {
     567                margin-right: -17.5%;
     568                width: 48%;
     569        }
     570}
     571
     572/* File */
     573
     574.wp-block-file .wp-block-file__textlink {
     575        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1);
     576        box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1);
     577}
     578
     579.wp-block-file .wp-block-file__button {
     580        background-color: #222;
     581        -webkit-border-radius: 2px;
     582        border-radius: 2px;
     583        -webkit-box-shadow: none;
     584        box-shadow: none;
     585        color: #fff;
     586        display: inline-block;
     587        font-size: 14px;
     588        font-size: 0.875rem;
     589        font-weight: 800;
     590        padding: 0.7em 2em;
     591        -webkit-transition: background-color 0.2s ease-in-out;
     592        transition: background-color 0.2s ease-in-out;
     593        white-space: nowrap;
     594}
     595
     596/*--------------------------------------------------------------
     5974.0 Blocks - Formatting
     598--------------------------------------------------------------*/
     599
     600/* Code */
     601
     602.wp-block-code {
     603        border: 0;
     604        padding: 0;
     605}
     606
     607/* Classic */
     608
     609.wp-block-freeform.block-library-rich-text__tinymce li,
     610.wp-block-freeform.block-library-rich-text__tinymce p {
     611        line-height: 1.5;
     612}
     613
     614.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     615        border: 0;
     616        padding: 0;
     617}
     618
     619/* Custom HTML */
     620
     621.wp-block-html .CodeMirror-lines pre {
     622        background-color: inherit;
     623        border: inherit;
     624        font-size: inherit;
     625        line-height: inherit;
     626        margin-bottom: inherit;
     627        padding: inherit;
     628}
     629
     630/* Pullquote */
     631
     632.wp-block-pullquote {
     633        border: 0;
     634}
     635
     636.wp-block-pullquote .wp-block-pullquote__citation {
     637        font-size: inherit;
     638        font-weight: 600;
     639        text-transform: none;
     640}
     641
     642/* Table */
     643
     644table.wp-block-table {
     645        border-collapse: collapse;
     646        margin: 0 0 1.5em;
     647        width: 100%;
     648}
     649
     650table.wp-block-table thead th {
     651        border: 0;
     652        border-bottom: 2px solid #bbb;
     653        padding-bottom: 0.5em;
     654}
     655
     656table.wp-block-table th {
     657        padding: 0.4em;
     658        text-align: left;
     659}
     660
     661table.wp-block-table tr {
     662        border-bottom: 1px solid #eee;
     663}
     664
     665table.wp-block-table td {
     666        border: 0;
     667        padding: 0.4em;
     668}
     669
     670table.wp-block-table th:first-child,
     671table.wp-block-table td:first-child {
     672        padding-left: 0;
     673}
     674
     675table.wp-block-table th:last-child,
     676table.wp-block-table td:last-child {
     677        padding-right: 0;
     678}
     679
     680.wp-block-table__cell-content {
     681        padding: 0;
     682}
     683
     684.rtl table.wp-block-table th,
     685.rtl table.wp-block-table td {
     686        text-align: right;
     687}
     688
     689/*--------------------------------------------------------------
     6905.0 Blocks - Layout Elements
     691--------------------------------------------------------------*/
     692
     693/* Separators */
     694
     695.edit-post-visual-editor .wp-block-separator {
     696        border: 0;
     697}
     698
     699/* Buttons */
     700
     701.wp-block-button .wp-block-button__link {
     702        background-color: #222;
     703        -webkit-border-radius: 2px;
     704        border-radius: 2px;
     705        -webkit-box-shadow: none;
     706        box-shadow: none;
     707        color: #fff;
     708        display: inline-block;
     709        font-size: 14px;
     710        font-size: 0.875rem;
     711        font-weight: 800;
     712        line-height: 1.66;
     713        margin-top: 2em;
     714        padding: 0.7em 2em;
     715        -webkit-transition: background-color 0.2s ease-in-out;
     716        transition: background-color 0.2s ease-in-out;
     717        white-space: nowrap;
     718}
     719/*--------------------------------------------------------------
     7206.0 Blocks - Widgets
     721--------------------------------------------------------------*/
     722
     723/* Comments */
     724
     725.editor-block-list__block ol.wp-block-latest-comments > li:before {
     726        content: '';
     727}
     728
     729.wp-block-latest-comments article {
     730        margin-bottom: 4em;
     731}
     732
     733.wp-block-latest-comments .avatar,
     734.wp-block-latest-comments__comment-avatar {
     735        border-radius: 0;
     736}
     737
     738.wp-block-latest-comments__comment-meta {
     739        font-size: 16px;
     740        font-size: 1rem;
     741        margin-bottom: 0.4em;
     742}
     743
     744.editor-block-list__block .wp-block-latest-comments__comment-meta a {
     745        -webkit-box-shadow: none;
     746        box-shadow: none;
     747        font-weight: 700;
     748}
     749
     750.wp-block-latest-comments__comment-date {
     751        color: #767676;
     752        font-size: 10px;
     753        font-size: 0.625rem;
     754        font-weight: 800;
     755        letter-spacing: 0.1818em;
     756        margin-top: 0.4em;
     757        text-transform: uppercase;
     758}
     759
     760.editor-block-list__block .wp-block-latest-comments__comment-excerpt p {
     761        font-size: 14px;
     762        font-size: 0.875rem;
     763}

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

     
    106106         */
    107107        add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_fonts_url() ) );
    108108
     109        // Load regular editor styles into the new block-based editor.
     110        add_theme_support( 'editor-styles' );
     111
     112        // Load default block styles.
     113        add_theme_support( 'wp-block-styles' );
     114
    109115        // Define and register starter content to showcase the theme on new sites.
    110116        $starter_content = array(
    111117                'widgets' => array(
    … …  
    415421        // Theme stylesheet.
    416422        wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );
    417423
     424        // Theme block stylesheet.
     425        wp_enqueue_style( 'twentyseventeen-block-style', get_theme_file_uri( '/assets/css/blocks.css' ), array( 'twentyseventeen-style' ), '1.0' );
     426
    418427        // Load the dark colorscheme.
    419428        if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
    420429                wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' );
    … …  
    460469add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );
    461470
    462471/**
     472 * Enqueue editor styles for Gutenberg
     473 *
     474 * @since Twenty Seventeen 1.8
     475 */
     476function twentyseventeen_block_editor_styles() {
     477        // Block styles.
     478        wp_enqueue_style( 'twentyseventeen-block-editor-style', get_template_directory_uri() . '/assets/css/editor-blocks.css' );
     479        // Add custom fonts.
     480        wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
     481}
     482add_action( 'enqueue_block_editor_assets', 'twentyseventeen_block_editor_styles' );
     483
     484/**
    463485 * Add custom image sizes attribute to enhance responsive image functionality
    464486 * for content images.
    465487 *