WordPress.org
Get WordPress

Make WordPress Core

Ticket #45042: 45042.1.patch

File 45042.1.patch, 19.0 KB (added by laurelfulford, 7 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-bottom: 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 cite {
     68        color: #2b2b2b;
     69        font-size: 16px;
     70        font-weight: 400;
     71}
     72
     73.wp-block-quote.alignleft cite,
     74.wp-block-quote.alignright cite {
     75        display: inline-block;
     76        margin-bottom: 17px;
     77        margin-top: 0;
     78}
     79
     80.rtl .wp-block-quote.alignleft {
     81        margin-right: 24px;
     82}
     83
     84.rtl .wp-block-quote.alignright {
     85        margin-left: 24px;
     86}
     87
     88/* Audio */
     89
     90.wp-block-audio audio {
     91        display: block;
     92        width: 100%;
     93}
     94
     95/* Cover Image */
     96
     97.wp-block-cover-image.aligncenter {
     98        display: flex;
     99}
     100
     101
     102/* File */
     103
     104.wp-block-file .wp-block-file__button {
     105        background-color: #24890d;
     106        border: 0;
     107        border-radius: 2px;
     108        color: #fff;
     109        font-size: 12px;
     110        font-weight: 700;
     111        line-height: 15px;
     112        padding: 10px 30px 11px;
     113        text-transform: uppercase;
     114        vertical-align: bottom;
     115}
     116
     117.wp-block-file .wp-block-file__button:hover,
     118.wp-block-file .wp-block-file__button:focus {
     119        background-color: #41a62a;
     120}
     121
     122.wp-block-file .wp-block-file__button:active {
     123        background-color: #55d737;
     124}
     125
     126/*--------------------------------------------------------------
     1273.0 Blocks - Formatting
     128--------------------------------------------------------------*/
     129
     130/* Code */
     131
     132.wp-block-code {
     133        border: 0;
     134        padding: 0;
     135}
     136
     137/* Pullquote */
     138
     139.wp-block-pullquote {
     140        border: 0;
     141        margin: 0;
     142}
     143
     144.wp-block-pullquote cite {
     145        color: #2b2b2b;
     146        font-size: 16px;
     147        font-weight: 400;
     148        margin-top: 0;
     149        text-transform: none;
     150}
     151
     152/* Table */
     153
     154.wp-block-table {
     155        overflow-x: visible;
     156}
     157
     158.wp-block-table th,
     159.wp-block-table td {
     160        border-color: rgba(0, 0, 0, 0.1);
     161        border-width: 0 1px 1px 0;
     162}
     163
     164/*--------------------------------------------------------------
     1654.0 Blocks - Layout Elements
     166--------------------------------------------------------------*/
     167
     168/* Buttons */
     169
     170.wp-block-button .wp-block-button__link {
     171        background-color: #24890d;
     172        border: 0;
     173        border-radius: 2px;
     174        color: #fff;
     175        font-size: 12px;
     176        font-weight: 700;
     177        line-height: 15px;
     178        padding: 10px 30px 11px;
     179        text-transform: uppercase;
     180        vertical-align: bottom;
     181}
     182
     183.wp-block-button .wp-block-button__link:hover,
     184.wp-block-button .wp-block-button__link:focus {
     185        background-color: #41a62a;
     186}
     187
     188.wp-block-button .wp-block-button__link:active {
     189        background-color: #55d737;
     190}
     191
     192/* Separator */
     193
     194.wp-block-separator {
     195        border: 0;
     196        max-width: 100px;
     197}
     198
     199.wp-block-separator.is-style-wide {
     200        max-width: 100%;
     201}
     202
     203/*--------------------------------------------------------------
     2045.0 Blocks - Widgets
     205--------------------------------------------------------------*/
     206
     207/* Comments */
     208
     209.wp-block-latest-comments {
     210        margin: 0;
     211        padding: 0;
     212}
     213
     214.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     215.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     216        margin-left: 60px;
     217}
     218
     219.wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar {
     220        border-radius: 0;
     221        border: 1px solid rgba(0, 0, 0, 0.1);
     222        padding: 2px;
     223}
     224
     225.wp-block-latest-comments__comment,
     226.wp-block-latest-comments__comment-excerpt,
     227.wp-block-latest-comments__comment-excerpt p {
     228        font-size: 16px;
     229}
     230
     231.wp-block-latest-comments__comment-meta a {
     232        color: #2b2b2b;
     233        font-weight: 900;
     234        text-decoration: none;
     235}
     236
     237.wp-block-latest-comments_comment-meta a:hover,
     238.wp-block-latest-comments_comment-meta a:focus {
     239        color: #41a62a;
     240}
     241
     242.wp-block-latest-comments__comment-excerpt p:last-child {
     243}
     244
     245.wp-block-latest-comments__comment-date {
     246        text-transform: uppercase;
     247}
     248
     249.wp-block-latest-comments .wp-block-latest-comments__comment {
     250        border-top: 1px solid rgba(0, 0, 0, 0.1);
     251        margin-bottom: 24px;
     252        padding-top: 24px;
     253}
     254
     255/*--------------------------------------------------------------
     2566.0 Blocks - Colors
     257--------------------------------------------------------------*/
     258
     259.has-green-color {
     260        color: #24890d;
     261}
     262
     263.has-green-background-color {
     264        background-color: #24890d;
     265}
     266
     267.has-black-color {
     268        color: #000;
     269}
     270
     271.has-black-background-color {
     272        background-color: #000;
     273}
     274
     275.has-dark-gray-color {
     276        color: #2b2b2b;
     277}
     278
     279.has-dark-gray-background-color {
     280        background-color: #2b2b2b;
     281}
     282
     283.has-medium-gray-color {
     284        color: #767676;
     285}
     286
     287.has-medium-gray-background-color {
     288        background-color: #767676;
     289}
     290
     291.has-light-gray-color {
     292        color: #f5f5f5;
     293}
     294
     295.has-light-gray-background-color {
     296        background-color: #f5f5f5;
     297}
     298
     299.has-white-color {
     300        color: #fff;
     301}
     302
     303.has-white-background-color {
     304        background-color: #fff;
     305}

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

  • 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_theme_file_uri( '/css/blocks.css' ), array( 'twentyfourteen-style' ), '1.0' );
     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.