WordPress.org
Get WordPress

Make WordPress Core

Ticket #45045: 45045.patch

File 45045.patch, 26.6 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 Blocks - Common Blocks
     18--------------------------------------------------------------*/
     19
     20/* Paragraph */
     21
     22p.has-drop-cap:not(:focus)::first-letter {
     23        font-size: 5em;
     24        line-height: 0.68;
     25        margin: 0.05em 0.1em 0 0;
     26        text-transform: uppercase;
     27        font-style: normal;
     28}
     29
     30/* Image */
     31
     32.wp-block-image figure {
     33        margin-bottom: 0;
     34        margin-top: 0;
     35}
     36
     37/* Quote */
     38
     39.wp-block-quote.alignleft p:last-of-type,
     40.wp-block-quote.alignright p:last-of-type {
     41        margin-bottom: 0;
     42}
     43
     44/* Audio */
     45
     46.wp-block-audio audio {
     47        display: block;
     48        width: 100%;
     49}
     50
     51/* File */
     52
     53.wp-block-file .wp-block-file__button {
     54        background-color: #222;
     55        -webkit-border-radius: 2px;
     56        border-radius: 2px;
     57        -webkit-box-shadow: none;
     58        box-shadow: none;
     59        color: #fff;
     60        display: inline-block;
     61        font-size: 14px;
     62        font-size: 0.875rem;
     63        font-weight: 800;
     64        margin-top: 2em;
     65        padding: 0.7em 2em;
     66        -webkit-transition: background-color 0.2s ease-in-out;
     67        transition: background-color 0.2s ease-in-out;
     68        white-space: nowrap;
     69}
     70
     71.wp-block-file .wp-block-file__button:hover,
     72.wp-block-file .wp-block-file__button:focus {
     73        background-color: #767676;
     74        -webkit-box-shadow: none;
     75        box-shadow: none;
     76}
     77
     78/*--------------------------------------------------------------
     792.0 Blocks - Formatting
     80--------------------------------------------------------------*/
     81
     82/* Code */
     83
     84.wp-block-code {
     85        background: transparent;
     86        padding: 0;
     87}
     88
     89/*--------------------------------------------------------------
     903.0 Blocks - Layout Elements
     91--------------------------------------------------------------*/
     92
     93/* Buttons */
     94
     95.wp-block-button .wp-block-button__link {
     96        background-color: #222;
     97        -webkit-border-radius: 2px;
     98        border-radius: 2px;
     99        -webkit-box-shadow: none;
     100        box-shadow: none;
     101        color: #fff;
     102        display: inline-block;
     103        font-size: 14px;
     104        font-size: 0.875rem;
     105        font-weight: 800;
     106        line-height: 1.66;
     107        margin-top: 2em;
     108        padding: 0.7em 2em;
     109        -webkit-transition: background-color 0.2s ease-in-out;
     110        transition: background-color 0.2s ease-in-out;
     111        white-space: nowrap;
     112}
     113
     114.wp-block-button .wp-block-button__link:hover,
     115.wp-block-button .wp-block-button__link:focus {
     116        background-color: #767676;
     117        -webkit-box-shadow: none;
     118        box-shadow: none;
     119}
     120
     121/*--------------------------------------------------------------
     1224.0 Blocks - Widgets
     123--------------------------------------------------------------*/
     124
     125/* Comments */
     126
     127.wp-block-latest-comments article {
     128        margin-bottom: 4em;
     129}
     130
     131.blog:not(.has-sidebar) #primary .wp-block-latest-comments article,
     132.archive:not(.page-one-column):not(.has-sidebar) #primary .wp-block-latest-comments article,
     133.search:not(.has-sidebar) #primary .wp-block-latest-comments article {
     134        float: none;
     135        width: 100%;
     136}
     137
     138.wp-block-latest-comments .avatar,
     139.wp-block-latest-comments__comment-avatar {
     140        border-radius: 0;
     141}
     142
     143.wp-block-latest-comments a {
     144        -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
     145        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
     146
     147}
     148
     149.wp-block-latest-comments__comment-meta {
     150        font-size: 16px;
     151        font-size: 1rem;
     152        margin-bottom: 0.4em;
     153}
     154
     155.wp-block-latest-comments__comment-author,
     156.wp-block-latest-comments__comment-link {
     157        font-weight: 700;
     158        text-decoration: none;
     159}
     160
     161.wp-block-latest-comments__comment-date {
     162        color: #767676;
     163        font-size: 10px;
     164        font-size: 0.625rem;
     165        font-weight: 800;
     166        letter-spacing: 0.1818em;
     167        margin-top: 0.4em;
     168        text-transform: uppercase;
     169}
     170
     171.editor-block-list__block .wp-block-latest-comments__comment-excerpt p {
     172        font-size: 14px;
     173        font-size: 0.875rem;
     174}

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

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

     
    117117          */
    118118        add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_fonts_url() ) );
    119119
     120        /*
     121         * Add support for the editor color palette.
     122         *
     123         * See:
     124         */
     125        add_theme_support( 'editor-color-palette', array(
     126                array(
     127                        'name'  => __( 'Dark Grey', 'twentyseventeen' ),
     128                        'slug'  => 'dark-grey',
     129                        'color' => '#333',
     130                ),
     131                array(
     132                        'name'  => __( 'Medium Grey', 'twentyseventeen' ),
     133                        'slug'  => 'medium-grey',
     134                        'color' => '#666',
     135                ),
     136                array(
     137                        'name'  => __( 'Light Grey', 'twentyseventeen' ),
     138                        'slug'  => 'light-grey',
     139                        'color' => '#eee',
     140                ),
     141                array(
     142                        'name'  => __( 'White', 'twentyseventeen' ),
     143                        'slug'  => 'white',
     144                        'color' => '#fff',
     145                ),
     146        ) );
     147
    120148        // Define and register starter content to showcase the theme on new sites.
    121149        $starter_content = array(
    122150                'widgets'     => array(
    … …  
    439467        // Theme stylesheet.
    440468        wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );
    441469
     470        // Theme block stylesheet.
     471        wp_enqueue_style( 'twentyseventeen-block-style', get_theme_file_uri( '/assets/css/blocks.css' ), array( 'twentyseventeen-style' ), '1.0' );
     472
    442473        // Load the dark colorscheme.
    443474        if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
    444475                wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' );
    … …  
    489520add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );
    490521
    491522/**
     523 * Enqueue editor styles for Gutenberg
     524 *
     525 * @since Twenty Seventeen 1.8
     526 */
     527function twentyseventeen_block_editor_styles() {
     528        // Block styles.
     529        wp_enqueue_style( 'twentyseventeen-block-editor-style', get_template_directory_uri() . '/assets/css/editor-blocks.css' );
     530        // Add custom fonts.
     531        wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
     532}
     533add_action( 'enqueue_block_editor_assets', 'twentyseventeen_block_editor_styles' );
     534
     535/**
    492536 * Add custom image sizes attribute to enhance responsive image functionality
    493537 * for content images.
    494538 *