WordPress.org

Make WordPress Core

Ticket #45045: 45045.3.patch

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

  • 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.wp-block-quote.is-large .wp-block-quote__citation,
     542.wp-block-quote.is-style-large .wp-block-quote__citation {
     543        text-align: right;
     544}
     545
     546.rtl .wp-block-quote.is-large .wp-block-quote__citation,
     547.rtl .wp-block-quote.is-style-large .wp-block-quote__citation {
     548        text-align: left;
     549}
     550
     551@media screen and (min-width: 30em) {
     552        .editor-block-list__block .wp-block-quote.alignleft p,
     553        .editor-block-list__block .wp-block-quote.alignright p,
     554        .editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation,
     555        .editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation,
     556        .editor-block-list__block .wp-block-quote footer {
     557                font-size: 14px;
     558                font-size: 0.875rem;
     559        }
     560}
     561
     562@media screen and (min-width: 48em) {
     563        .editor-block-list__block .wp-block-quote.alignleft p,
     564        .editor-block-list__block .wp-block-quote.alignright p,
     565        .editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation,
     566        .editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation {
     567                font-size: 13px;
     568                font-size: 0.8125rem;
     569        }
     570
     571        .editor-block-list__block .wp-block-quote.alignleft {
     572                margin-left: -17.5%;
     573                width: 48%;
     574        }
     575
     576        .editor-block-list__block .wp-block-quote.alignright {
     577                margin-right: -17.5%;
     578                width: 48%;
     579        }
     580}
     581
     582/* File */
     583
     584.wp-block-file .wp-block-file__textlink {
     585        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1);
     586        box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1);
     587}
     588
     589.wp-block-file .wp-block-file__button {
     590        background-color: #222;
     591        -webkit-border-radius: 2px;
     592        border-radius: 2px;
     593        -webkit-box-shadow: none;
     594        box-shadow: none;
     595        color: #fff;
     596        display: inline-block;
     597        font-size: 14px;
     598        font-size: 0.875rem;
     599        font-weight: 800;
     600        padding: 0.7em 2em;
     601        -webkit-transition: background-color 0.2s ease-in-out;
     602        transition: background-color 0.2s ease-in-out;
     603        white-space: nowrap;
     604}
     605
     606/*--------------------------------------------------------------
     6074.0 Blocks - Formatting
     608--------------------------------------------------------------*/
     609
     610/* Code */
     611
     612.wp-block-code {
     613        border: 0;
     614        padding: 0;
     615}
     616
     617/* Classic */
     618
     619.wp-block-freeform.block-library-rich-text__tinymce li,
     620.wp-block-freeform.block-library-rich-text__tinymce p {
     621        line-height: 1.5;
     622}
     623
     624.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     625        border: 0;
     626        padding: 0;
     627}
     628
     629/* Pullquote */
     630
     631.wp-block-pullquote {
     632        border: 0;
     633}
     634
     635.wp-block-pullquote.alignleft blockquote > .editor-rich-text p,
     636.wp-block-pullquote.alignright blockquote > .editor-rich-text p {
     637        font-size: 20px;
     638}
     639
     640
     641.wp-block-pullquote .wp-block-pullquote__citation {
     642        font-size: inherit;
     643        font-weight: 600;
     644        text-transform: none;
     645}
     646
     647/* Table */
     648
     649table.wp-block-table {
     650        border-collapse: collapse;
     651        margin: 0 0 1.5em;
     652        width: 100%;
     653}
     654
     655table.wp-block-table thead th {
     656        border: 0;
     657        border-bottom: 2px solid #bbb;
     658        padding-bottom: 0.5em;
     659}
     660
     661table.wp-block-table th {
     662        padding: 0.4em;
     663        text-align: left;
     664}
     665
     666table.wp-block-table tr {
     667        border-bottom: 1px solid #eee;
     668}
     669
     670table.wp-block-table td {
     671        border: 0;
     672        padding: 0.4em;
     673}
     674
     675table.wp-block-table th:first-child,
     676table.wp-block-table td:first-child {
     677        padding-left: 0;
     678}
     679
     680table.wp-block-table th:last-child,
     681table.wp-block-table td:last-child {
     682        padding-right: 0;
     683}
     684
     685.wp-block-table__cell-content {
     686        padding: 0;
     687}
     688
     689.rtl table.wp-block-table th,
     690.rtl table.wp-block-table td {
     691        text-align: right;
     692}
     693
     694/*--------------------------------------------------------------
     6955.0 Blocks - Layout Elements
     696--------------------------------------------------------------*/
     697
     698/* Separators */
     699
     700.edit-post-visual-editor .wp-block-separator {
     701        border: 0;
     702}
     703
     704/* Buttons */
     705
     706.wp-block-button .wp-block-button__link {
     707        background-color: #222;
     708        -webkit-border-radius: 2px;
     709        border-radius: 2px;
     710        -webkit-box-shadow: none;
     711        box-shadow: none;
     712        color: #fff;
     713        display: inline-block;
     714        font-size: 14px;
     715        font-size: 0.875rem;
     716        font-weight: 800;
     717        line-height: 1.66;
     718        margin-top: 2em;
     719        padding: 0.7em 2em;
     720        -webkit-transition: background-color 0.2s ease-in-out;
     721        transition: background-color 0.2s ease-in-out;
     722        white-space: nowrap;
     723}
     724/*--------------------------------------------------------------
     7256.0 Blocks - Widgets
     726--------------------------------------------------------------*/
     727
     728/* Latest Comments */
     729
     730.editor-block-list__block ol.wp-block-latest-comments > li:before {
     731        content: '';
     732}
     733
     734.wp-block-latest-comments article {
     735        margin-bottom: 4em;
     736}
     737
     738.wp-block-latest-comments .avatar,
     739.wp-block-latest-comments__comment-avatar {
     740        border-radius: 0;
     741}
     742
     743.wp-block-latest-comments__comment-meta {
     744        font-size: 16px;
     745        font-size: 1rem;
     746        margin-bottom: 0.4em;
     747}
     748
     749.editor-block-list__block .wp-block-latest-comments__comment-meta a {
     750        -webkit-box-shadow: none;
     751        box-shadow: none;
     752        font-weight: 700;
     753}
     754
     755.wp-block-latest-comments__comment-date {
     756        color: #767676;
     757        font-size: 10px;
     758        font-size: 0.625rem;
     759        font-weight: 800;
     760        letter-spacing: 0.1818em;
     761        margin-top: 0.4em;
     762        text-transform: uppercase;
     763}
     764
     765.editor-block-list__block .wp-block-latest-comments__comment-excerpt p {
     766        font-size: 14px;
     767        font-size: 0.875rem;
     768}
     769
     770/* Latest Posts */
     771
     772.edit-post-visual-editor .wp-block-latest-posts.is-grid {
     773        list-style: none;
     774        margin-left: 0;
     775        margin-right: 0;
     776}

  • 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_theme_file_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 *