WordPress.org
Get WordPress

Make WordPress Core

Ticket #45042: 45042.2.patch

File 45042.2.patch, 19.1 KB (added by laurelfulford, 6 years ago)

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

     
     1/*
     2Theme Name: Twenty Fourteen
     3Description: Used to style Gutenberg Blocks.
     4*/
     5
     6/*--------------------------------------------------------------
     7>>> TABLE OF CONTENTS:
     8----------------------------------------------------------------
     91.0 General Block Styles
     102.0 Blocks - Common Blocks
     113.0 Blocks - Formatting
     124.0 Blocks - Layout Elements
     135.0 Blocks - Widgets
     146.0 Blocks - Colors
     15--------------------------------------------------------------*/
     16
     17/*--------------------------------------------------------------
     181.0 General Block Styles
     19--------------------------------------------------------------*/
     20
     21[class^="wp-block-"] figcaption,
     22[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
     23        font-size: 12px;
     24        font-style: italic;
     25        line-height: 1.5;
     26        margin: 9px 0 0;
     27}
     28
     29/*--------------------------------------------------------------
     302.0 Blocks - Common Blocks
     31--------------------------------------------------------------*/
     32
     33/* Paragraph */
     34
     35p.has-drop-cap:not(:focus)::first-letter {
     36        font-size: 5em;
     37}
     38
     39/* Image */
     40
     41.wp-block-image {
     42        margin-bottom: 24px;
     43}
     44
     45/* Gallery */
     46
     47.wp-block-gallery {
     48        margin: 0 0 24px;
     49}
     50
     51.wp-block-gallery .blocks-gallery-image figcaption,
     52.wp-block-gallery .blocks-gallery-item figcaption {
     53        left: 0;
     54        right: 0;
     55        width: auto;
     56}
     57
     58/* Quote */
     59
     60.wp-block-quote:not(.is-large):not(.is-style-large) {
     61        border-left: 0;
     62        border-right: 0;
     63        padding-left: 0;
     64        padding-right: 0;
     65}
     66
     67.wp-block-quote.is-large,
     68.wp-block-quote.is-style-large {
     69        padding: 0;
     70}
     71
     72.wp-block-quote cite {
     73        color: #2b2b2b;
     74        font-size: 16px;
     75        font-weight: 400;
     76}
     77
     78.wp-block-quote.alignleft cite,
     79.wp-block-quote.alignright cite {
     80        display: inline-block;
     81        margin-bottom: 17px;
     82        margin-top: 0;
     83}
     84
     85.rtl .wp-block-quote.alignleft {
     86        margin-right: 24px;
     87}
     88
     89.rtl .wp-block-quote.alignright {
     90        margin-left: 24px;
     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.aligncenter {
     103        display: flex;
     104}
     105
     106
     107/* File */
     108
     109.wp-block-file .wp-block-file__button {
     110        background-color: #24890d;
     111        border: 0;
     112        border-radius: 2px;
     113        color: #fff;
     114        font-size: 12px;
     115        font-weight: 700;
     116        line-height: 15px;
     117        padding: 10px 30px 11px;
     118        text-transform: uppercase;
     119        vertical-align: bottom;
     120}
     121
     122.wp-block-file .wp-block-file__button:hover,
     123.wp-block-file .wp-block-file__button:focus {
     124        background-color: #41a62a;
     125}
     126
     127.wp-block-file .wp-block-file__button:active {
     128        background-color: #55d737;
     129}
     130
     131/*--------------------------------------------------------------
     1323.0 Blocks - Formatting
     133--------------------------------------------------------------*/
     134
     135/* Code */
     136
     137.wp-block-code {
     138        border: 0;
     139        padding: 0;
     140}
     141
     142/* Pullquote */
     143
     144.wp-block-pullquote {
     145        border: 0;
     146        margin: 0;
     147}
     148
     149.wp-block-pullquote cite {
     150        color: #2b2b2b;
     151        font-size: 16px;
     152        font-weight: 400;
     153        margin-top: 0;
     154        text-transform: none;
     155}
     156
     157/* Table */
     158
     159.wp-block-table {
     160        overflow-x: visible;
     161}
     162
     163.wp-block-table th,
     164.wp-block-table td {
     165        border-color: rgba(0, 0, 0, 0.1);
     166        border-width: 0 1px 1px 0;
     167}
     168
     169/*--------------------------------------------------------------
     1704.0 Blocks - Layout Elements
     171--------------------------------------------------------------*/
     172
     173/* Buttons */
     174
     175.wp-block-button .wp-block-button__link {
     176        background-color: #24890d;
     177        border: 0;
     178        border-radius: 2px;
     179        color: #fff;
     180        font-size: 12px;
     181        font-weight: 700;
     182        line-height: 15px;
     183        padding: 10px 30px 11px;
     184        text-transform: uppercase;
     185        vertical-align: bottom;
     186}
     187
     188.wp-block-button .wp-block-button__link:hover,
     189.wp-block-button .wp-block-button__link:focus {
     190        background-color: #41a62a;
     191}
     192
     193.wp-block-button .wp-block-button__link:active {
     194        background-color: #55d737;
     195}
     196
     197/* Separator */
     198
     199.wp-block-separator {
     200        border: 0;
     201        max-width: 100px;
     202}
     203
     204.wp-block-separator.is-style-wide {
     205        max-width: 100%;
     206}
     207
     208/*--------------------------------------------------------------
     2095.0 Blocks - Widgets
     210--------------------------------------------------------------*/
     211
     212/* Latest Comments */
     213
     214.wp-block-latest-comments {
     215        margin: 0;
     216        padding: 0;
     217}
     218
     219.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     220.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     221        margin-left: 60px;
     222}
     223
     224.wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar {
     225        border-radius: 0;
     226        border: 1px solid rgba(0, 0, 0, 0.1);
     227        padding: 2px;
     228}
     229
     230.wp-block-latest-comments__comment,
     231.wp-block-latest-comments__comment-excerpt,
     232.wp-block-latest-comments__comment-excerpt p {
     233        font-size: 16px;
     234}
     235
     236.wp-block-latest-comments__comment-meta a {
     237        color: #2b2b2b;
     238        font-weight: 900;
     239        text-decoration: none;
     240}
     241
     242.wp-block-latest-comments_comment-meta a:hover,
     243.wp-block-latest-comments_comment-meta a:focus {
     244        color: #41a62a;
     245}
     246
     247.wp-block-latest-comments__comment-excerpt p:last-child {
     248}
     249
     250.wp-block-latest-comments__comment-date {
     251        text-transform: uppercase;
     252}
     253
     254.wp-block-latest-comments .wp-block-latest-comments__comment {
     255        border-top: 1px solid rgba(0, 0, 0, 0.1);
     256        margin-bottom: 24px;
     257        padding-top: 24px;
     258}
     259
     260/* Latest Posts */
     261
     262.wp-block-latest-posts.is-grid {
     263        margin-left: 0;
     264        margin-right: 0;
     265}
     266
     267/*--------------------------------------------------------------
     2686.0 Blocks - Colors
     269--------------------------------------------------------------*/
     270
     271.has-green-color {
     272        color: #24890d;
     273}
     274
     275.has-green-background-color {
     276        background-color: #24890d;
     277}
     278
     279.has-black-color {
     280        color: #000;
     281}
     282
     283.has-black-background-color {
     284        background-color: #000;
     285}
     286
     287.has-dark-gray-color {
     288        color: #2b2b2b;
     289}
     290
     291.has-dark-gray-background-color {
     292        background-color: #2b2b2b;
     293}
     294
     295.has-medium-gray-color {
     296        color: #767676;
     297}
     298
     299.has-medium-gray-background-color {
     300        background-color: #767676;
     301}
     302
     303.has-light-gray-color {
     304        color: #f5f5f5;
     305}
     306
     307.has-light-gray-background-color {
     308        background-color: #f5f5f5;
     309}
     310
     311.has-white-color {
     312        color: #fff;
     313}
     314
     315.has-white-background-color {
     316        background-color: #fff;
     317}

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

     
     1/*
     2Theme Name: Twenty Fourteen
     3Description: Used to style Gutenberg Blocks in the editor.
     4*/
     5
     6/*--------------------------------------------------------------
     7>>> TABLE OF CONTENTS:
     8----------------------------------------------------------------
     91.0 General Typography
     102.0 General Block Styles
     113.0 Blocks - Common Blocks
     124.0 Blocks - Formatting
     135.0 Blocks - Layout Elements
     146.0 Blocks - Widgets
     15--------------------------------------------------------------*/
     16
     17/*--------------------------------------------------------------
     181.0 General Typography
     19--------------------------------------------------------------*/
     20
     21.edit-post-visual-editor .editor-block-list__block,
     22.edit-post-visual-editor .editor-block-list__block p,
     23.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
     24        line-height: 1.5;
     25}
     26
     27.edit-post-visual-editor .editor-block-list__block {
     28        color: #2b2b2b;
     29}
     30
     31.editor-post-title__block .editor-post-title__input {
     32        font-family: Lato, sans-serif;
     33        font-size: 33px;
     34        font-weight: 300;
     35        line-height: 1.0909090909;
     36        text-transform: uppercase;
     37}
     38
     39/* Headers */
     40
     41.wp-block-freeform.block-library-rich-text__tinymce h1 {
     42        font-size: 26px;
     43}
     44
     45.wp-block-freeform.block-library-rich-text__tinymce h2 {
     46        font-size: 24px;
     47}
     48
     49.wp-block-freeform.block-library-rich-text__tinymce h3 {
     50        font-size: 22px;
     51}
     52
     53.wp-block-freeform.block-library-rich-text__tinymce h4 {
     54        font-size: 20px;
     55}
     56
     57.wp-block-freeform.block-library-rich-text__tinymce h5 {
     58        font-size: 18px;
     59}
     60
     61.wp-block-freeform.block-library-rich-text__tinymce h6 {
     62        font-size: 16px;
     63}
     64
     65/*--------------------------------------------------------------
     662.0 General Block Styles
     67--------------------------------------------------------------*/
     68
     69/* Main column width */
     70
     71body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
     72body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
     73body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
     74        max-width: 504px; /* 474 + 30 for editor block padding */
     75}
     76
     77/* Link styles */
     78
     79.edit-post-visual-editor a,
     80.editor-block-list__block a,
     81.wp-block-freeform.block-library-rich-text__tinymce a {
     82        color: #24890d;
     83}
     84
     85/* List styles */
     86
     87.wp-block-freeform.block-library-rich-text__tinymce li {
     88        line-height: 1.5;
     89}
     90
     91.edit-post-visual-editor ul:not(.wp-block-gallery),
     92.editor-block-list__block ul:not(.wp-block-gallery),
     93.block-library-list ul,
     94.edit-post-visual-editor ol,
     95.editor-block-list__block ol,
     96.block-library-list ol {
     97        margin: 0 0 1.6em 1.3333em;
     98        padding: 0;
     99}
     100
     101.block-library-list .editor-rich-text__tinymce {
     102        padding: 0;
     103}
     104
     105.edit-post-visual-editor ul:not(.wp-block-gallery),
     106.editor-block-list__block ul:not(.wp-block-gallery),
     107.block-library-list ul {
     108        list-style: disc;
     109}
     110
     111.edit-post-visual-editor ol,
     112.editor-block-list__block ol,
     113.block-library-list ol {
     114        list-style: decimal;
     115}
     116
     117.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
     118.editor-block-list__block ul:not(.wp-block-gallery) li > ul,
     119.block-library-list li > ul,
     120.edit-post-visual-editor li > ol,
     121.editor-block-list__block li > ol,
     122.block-library-list li > ol {
     123        margin-bottom: 0;
     124}
     125
     126.wp-block-freeform.block-library-rich-text__tinymce li,
     127.editor-block-list__block li {
     128        margin-bottom: 0;
     129}
     130
     131.rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
     132.rtl .editor-block-list__block ul:not(.wp-block-gallery),
     133.rtl .block-library-list ul,
     134.rtl .edit-post-visual-editor ol,
     135.rtl .editor-block-list__block ol,
     136.rtl .block-library-list ol {
     137        margin-left: 0;
     138        margin-right: 1.3333em;
     139}
     140
     141/* Code */
     142
     143.wp-block-freeform.block-library-rich-text__tinymce code {
     144        background: transparent;
     145}
     146
     147
     148/* Captions */
     149
     150[class^="wp-block-"] figcaption,
     151[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
     152        font-size: 12px;
     153        font-style: italic;
     154        line-height: 1.5;
     155        margin: 9px 0 0;
     156}
     157
     158/* Tables */
     159
     160.edit-post-visual-editor .editor-block-list__block table,
     161.edit-post-visual-editor .editor-block-list__block table th,
     162.edit-post-visual-editor .editor-block-list__block table td {
     163        border: 1px solid rgba(0, 0, 0, 0.1);
     164        font-size: 14px;
     165        line-height: 1.2857142857;
     166}
     167
     168.edit-post-visual-editor .editor-block-list__block table {
     169        border-collapse: separate;
     170        border-spacing: 0;
     171        border-width: 1px 0 0 1px;
     172        margin-bottom: 24px;
     173        width: 100%;
     174}
     175
     176.edit-post-visual-editor .editor-block-list__block table th {
     177        border-width: 0 1px 1px 0;
     178        font-weight: 700;
     179        text-align: left;
     180        text-transform: uppercase;
     181}
     182
     183.edit-post-visual-editor .editor-block-list__block table td {
     184        border-width: 0 1px 1px 0;
     185}
     186
     187.rtl .edit-post-visual-editor .editor-block-list__block table th {
     188        text-align: right;
     189}
     190
     191/* Quotes */
     192
     193.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     194        border-left: 0;
     195        border-right: 0;
     196        padding-left: 0;
     197        padding-right: 0;
     198}
     199
     200.wp-block-freeform.block-library-rich-text__tinymce blockquote p {
     201        font-size: 19px;
     202}
     203
     204/* Tables */
     205
     206.editor-block-list__block .wp-block-table th,
     207.editor-block-list__block .wp-block-table td {
     208        padding: 0;
     209}
     210
     211/*--------------------------------------------------------------
     2123.0 Blocks - Common Blocks
     213--------------------------------------------------------------*/
     214
     215/* Paragraph */
     216
     217p.has-drop-cap:not(:focus)::first-letter {
     218        font-size: 5em;
     219}
     220
     221/* Image */
     222
     223.wp-block-image {
     224        margin-bottom: 24px;
     225}
     226
     227@media screen and (min-width: 810px) {
     228        .wp-block-image.alignleft {
     229                clear: left;
     230                margin-left: -168px;
     231        }
     232
     233        .wp-block-image.alignright {
     234                clear: right;
     235                margin-left: -168px;
     236        }
     237}
     238
     239/* Gallery */
     240
     241.editor-block-list__block .wp-block-gallery {
     242        margin-left: 0;
     243        margin-right: 0;
     244}
     245
     246/* Quote */
     247
     248.editor-block-list__block .wp-block-quote p {
     249        font-size: 19px;
     250}
     251
     252.wp-block-quote:not(.is-large):not(.is-style-large) {
     253        border-left: 0;
     254        border-right: 0;
     255        padding-left: 0;
     256        padding-right: 0;
     257}
     258
     259.wp-block-quote.is-large,
     260.wp-block-quote.is-style-large {
     261        padding: 0;
     262}
     263
     264.wp-block-quote.is-large p,
     265.wp-block-quote.is-style-large p {
     266        font-size: 24px;
     267        line-height: 1.6;
     268}
     269
     270.wp-block-quote .wp-block-quote__citation {
     271        color: #2b2b2b;
     272        font-size: 16px;
     273        font-weight: 400;
     274        margin-top: 0;
     275}
     276
     277.wp-block-quote.alignleft .wp-block-quote__citation,
     278.wp-block-quote.alignright .wp-block-quote__citation {
     279        display: inline-block;
     280        margin-bottom: 17px;
     281}
     282
     283@media screen and (min-width: 1200px) {
     284        .editor-block-list__block .wp-block-quote.alignleft,
     285        .editor-block-list__block .wp-block-quote.alignright {
     286                width: -webkit-calc(50% + 130px);
     287                width: calc(50% + 130px);
     288        }
     289
     290        .editor-block-list__block .wp-block-quote.alignleft {
     291                clear: left;
     292                margin-left: -168px;
     293        }
     294
     295        .editor-block-list__block .wp-block-quote.alignright {
     296                clear: right;
     297                margin-right: -168px;
     298        }
     299}
     300
     301/* Cover Image */
     302
     303.wp-block-cover-image.aligncenter {
     304        display: flex;
     305}
     306
     307/* File */
     308
     309.wp-block-file .wp-block-file__textlink {
     310        color: #24890d;
     311        text-decoration: underline;
     312}
     313
     314.wp-block-file .wp-block-file__button {
     315        background-color: #24890d;
     316        border: 0;
     317        border-radius: 2px;
     318        color: #fff;
     319        font-size: 12px;
     320        font-weight: 700;
     321        line-height: 15px;
     322        padding: 10px 30px 11px;
     323        text-transform: uppercase;
     324        vertical-align: bottom;
     325}
     326
     327/*--------------------------------------------------------------
     3284.0 Blocks - Formatting
     329--------------------------------------------------------------*/
     330
     331/* Code */
     332
     333.wp-block-code {
     334        border: 0;
     335        padding: 0;
     336}
     337
     338/* Pullquote */
     339
     340.wp-block-pullquote {
     341        border: 0;
     342        margin: 0;
     343}
     344
     345.wp-block-pullquote .wp-block-pullquote__citation {
     346        color: #2b2b2b;
     347        font-size: 16px;
     348        font-weight: 400;
     349        margin-top: 0;
     350        text-transform: none;
     351}
     352
     353/*--------------------------------------------------------------
     3545.0 Blocks - Layout Elements
     355--------------------------------------------------------------*/
     356
     357/* Buttons */
     358
     359.wp-block-button .wp-block-button__link {
     360        background-color: #24890d;
     361        border: 0;
     362        border-radius: 2px;
     363        color: #fff;
     364        font-size: 12px;
     365        font-weight: 700;
     366        line-height: 15px;
     367        padding: 10px 30px 11px;
     368        text-transform: uppercase;
     369        vertical-align: bottom;
     370}
     371
     372/*--------------------------------------------------------------
     3736.0 Blocks - Widgets
     374--------------------------------------------------------------*/
     375
     376/* Archives, Categories & Latest Posts */
     377
     378.wp-block-archives li a,
     379.wp-block-categories__list li a,
     380.wp-block-latest-posts li a {
     381        text-decoration: underline;
     382}
     383
     384/* Latest Comments */
     385
     386.editor-block-list__block ol.wp-block-latest-comments,
     387.rtl .editor-block-list__block ol.wp-block-latest-comments {
     388        margin: 0;
     389        padding: 0;
     390}
     391
     392.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     393.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     394        margin-left: 60px;
     395}
     396
     397.wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar {
     398        border-radius: 0;
     399        border: 1px solid rgba(0, 0, 0, 0.1);
     400        padding: 2px;
     401}
     402
     403.wp-block-latest-comments__comment,
     404.wp-block-latest-comments__comment-excerpt,
     405.wp-block-latest-comments__comment-excerpt p {
     406        font-size: 16px;
     407}
     408
     409.editor-block-list__block .wp-block-latest-comments__comment-meta a,
     410.editor-block-list__block .wp-block-latest-comments__comment-meta a:visited {
     411        color: #2b2b2b;
     412        font-weight: 900;
     413        text-decoration: none;
     414}
     415
     416.wp-block-latest-comments__comment-date {
     417        text-transform: uppercase;
     418}
     419
     420.wp-block-latest-comments .wp-block-latest-comments__comment {
     421        border-top: 1px solid rgba(0, 0, 0, 0.1);
     422        margin-bottom: 24px;
     423        padding-top: 24px;
     424}
     425
     426/* Latest Posts */
     427
     428.wp-block-latest-posts.is-grid {
     429        list-style: none;
     430        margin-left: 0;
     431        margin-right: 0;
     432}

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

     
    7070        // This theme styles the visual editor to resemble the theme style.
    7171        add_editor_style( array( 'css/editor-style.css', twentyfourteen_font_url(), 'genericons/genericons.css' ) );
    7272
     73        // Load regular editor styles into the new block-based editor.
     74        add_theme_support( 'editor-styles' );
     75
     76        // Load default block styles.
     77        add_theme_support( 'wp-block-styles' );
     78
     79        // Add support for custom color scheme.
     80        add_theme_support( 'editor-color-palette', array(
     81                array(
     82                        'name'  => __( 'Green', 'twentyfourteen' ),
     83                        'slug'  => 'green',
     84                        'color' => '#24890d',
     85                ),
     86                array(
     87                        'name'  => __( 'Black', 'twentyfourteen' ),
     88                        'slug'  => 'black',
     89                        'color' => '#000',
     90                ),
     91                array(
     92                        'name'  => __( 'Dark Gray', 'twentyfourteen' ),
     93                        'slug'  => 'dark-gray',
     94                        'color' => '#2b2b2b',
     95                ),
     96                array(
     97                        'name'  => __( 'Medium Gray', 'twentyfourteen' ),
     98                        'slug'  => 'medium-gray',
     99                        'color' => '#767676',
     100                ),
     101                array(
     102                        'name'  => __( 'Light Gray', 'twentyfourteen' ),
     103                        'slug'  => 'light-gray',
     104                        'color' => '#f5f5f5',
     105                ),
     106                array(
     107                        'name'  => __( 'White', 'twentyfourteen' ),
     108                        'slug'  => 'white',
     109                        'color' => '#fff',
     110                ),
     111        ) );
     112
    73113        // Add RSS feed links to <head> for posts and comments.
    74114        add_theme_support( 'automatic-feed-links' );
    75115
    … …  
    239279        // Load our main stylesheet.
    240280        wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );
    241281
     282        // Theme block stylesheet.
     283        wp_enqueue_style( 'twentyfourteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfourteen-style' ), '20181018' );
     284
    242285        // Load the Internet Explorer specific stylesheet.
    243286        wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style' ), '20131205' );
    244287        wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );
    … …  
    302345}
    303346add_filter( 'wp_resource_hints', 'twentyfourteen_resource_hints', 10, 2 );
    304347
     348/**
     349 * Enqueue editor styles for Gutenberg
     350 *
     351 * @since Twenty Fourteen 2.3
     352 */
     353function twentyfourteen_block_editor_styles() {
     354        // Block styles.
     355        wp_enqueue_style( 'twentyfourteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     356        // Add custom fonts.
     357        wp_enqueue_style( 'twentyfourteen-fonts', twentyfourteen_font_url(), array(), null );
     358}
     359add_action( 'enqueue_block_editor_assets', 'twentyfourteen_block_editor_styles' );
     360
    305361if ( ! function_exists( 'twentyfourteen_the_attached_image' ) ) :
    306362/**
    307363 * Print the attached image with a link to the next attached image.