WordPress.org
Get WordPress

Make WordPress Core

Ticket #45042: 45042.patch

File 45042.patch, 18.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 - Embeds
     157.0 Blocks - Custom Colors
     16--------------------------------------------------------------*/
     17
     18/*--------------------------------------------------------------
     191.0 General Block Styles
     20--------------------------------------------------------------*/
     21
     22[class^="wp-block-"] figcaption,
     23[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
     24        font-size: 12px;
     25        font-style: italic;
     26        line-height: 1.5;
     27        margin: 9px 0 0;
     28}
     29
     30[class^="wp-block-"] .alignleft {
     31        margin: 7px 24px 7px 0;
     32}
     33
     34[class^="wp-block-"] .alignright {
     35        margin: 7px 0 7px 24px;
     36}
     37
     38/*--------------------------------------------------------------
     392.0 Blocks - Common Blocks
     40--------------------------------------------------------------*/
     41
     42/* Paragraph */
     43
     44p.has-drop-cap:not(:focus)::first-letter {
     45        font-size: 5em;
     46}
     47
     48/* Image */
     49
     50.wp-block-image {
     51        margin-bottom: 24px;
     52}
     53
     54/* Gallery */
     55
     56.wp-block-gallery {
     57        margin-bottom: 24px;
     58}
     59
     60.wp-block-gallery .blocks-gallery-image figcaption,
     61.wp-block-gallery .blocks-gallery-item figcaption {
     62        left: 0;
     63        right: 0;
     64        width: auto;
     65}
     66
     67/* Quote */
     68
     69.wp-block-quote:not(.is-large):not(.is-style-large) {
     70        border-left: 0;
     71        padding-left: 0;
     72}
     73
     74.wp-block-quote cite {
     75        color: #2b2b2b;
     76        font-size: 16px;
     77        font-weight: 400;
     78}
     79
     80.wp-block-quote.alignleft cite,
     81.wp-block-quote.alignright cite {
     82        display: inline-block;
     83        margin-bottom: 17px;
     84        margin-top: 0;
     85}
     86
     87/* Audio */
     88
     89.wp-block-audio audio {
     90        display: block;
     91        width: 100%;
     92}
     93
     94/* Cover Image */
     95
     96.wp-block-cover-image.aligncenter {
     97        display: flex;
     98}
     99
     100
     101/* File */
     102
     103.wp-block-file .wp-block-file__button {
     104        background-color: #24890d;
     105        border: 0;
     106        border-radius: 2px;
     107        color: #fff;
     108        font-size: 12px;
     109        font-weight: 700;
     110        line-height: 15px;
     111        padding: 10px 30px 11px;
     112        text-transform: uppercase;
     113        vertical-align: bottom;
     114}
     115
     116.wp-block-file .wp-block-file__button:hover,
     117.wp-block-file .wp-block-file__button:focus {
     118        background-color: #41a62a;
     119}
     120
     121.wp-block-file .wp-block-file__button:active {
     122        background-color: #55d737;
     123}
     124
     125/*--------------------------------------------------------------
     1263.0 Blocks - Formatting
     127--------------------------------------------------------------*/
     128
     129/* Code */
     130
     131.wp-block-code {
     132        border: 0;
     133        padding: 0;
     134}
     135
     136/* Pullquote */
     137
     138.wp-block-pullquote {
     139        border: 0;
     140        margin: 0;
     141}
     142
     143.wp-block-pullquote cite {
     144        color: #2b2b2b;
     145        font-size: 16px;
     146        font-weight: 400;
     147        margin-top: 0;
     148        text-transform: none;
     149}
     150
     151/* Table */
     152
     153.wp-block-table {
     154        overflow-x: visible;
     155}
     156
     157.wp-block-table th,
     158.wp-block-table td {
     159        border-color: rgba(0, 0, 0, 0.1);
     160        border-width: 0 1px 1px 0;
     161}
     162
     163/*--------------------------------------------------------------
     1644.0 Blocks - Layout Elements
     165--------------------------------------------------------------*/
     166
     167/* Buttons */
     168
     169.wp-block-button .wp-block-button__link {
     170        background-color: #24890d;
     171        border: 0;
     172        border-radius: 2px;
     173        color: #fff;
     174        font-size: 12px;
     175        font-weight: 700;
     176        line-height: 15px;
     177        padding: 10px 30px 11px;
     178        text-transform: uppercase;
     179        vertical-align: bottom;
     180}
     181
     182.wp-block-button .wp-block-button__link:hover,
     183.wp-block-button .wp-block-button__link:focus {
     184        background-color: #41a62a;
     185}
     186
     187.wp-block-button .wp-block-button__link:active {
     188        background-color: #55d737;
     189}
     190
     191/* Separator */
     192
     193.wp-block-separator {
     194        border: 0;
     195        max-width: 100px;
     196}
     197
     198.wp-block-separator.is-style-wide {
     199        max-width: 100%;
     200}
     201
     202/*--------------------------------------------------------------
     2035.0 Blocks - Widgets
     204--------------------------------------------------------------*/
     205
     206/* Comments */
     207
     208.wp-block-latest-comments {
     209        margin: 0;
     210        padding: 0;
     211}
     212
     213.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     214.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     215        margin-left: 60px;
     216}
     217
     218.wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar {
     219        border-radius: 0;
     220        border: 1px solid rgba(0, 0, 0, 0.1);
     221        padding: 2px;
     222}
     223
     224.wp-block-latest-comments__comment,
     225.wp-block-latest-comments__comment-excerpt,
     226.wp-block-latest-comments__comment-excerpt p {
     227        font-size: 16px;
     228}
     229
     230.wp-block-latest-comments__comment-meta a {
     231        color: #2b2b2b;
     232        font-weight: 900;
     233        text-decoration: none;
     234}
     235
     236.wp-block-latest-comments_comment-meta a:hover,
     237.wp-block-latest-comments_comment-meta a:focus {
     238        color: #41a62a;
     239}
     240
     241.wp-block-latest-comments__comment-excerpt p:last-child {
     242}
     243
     244.wp-block-latest-comments__comment-date {
     245        text-transform: uppercase;
     246}
     247
     248.wp-block-latest-comments .wp-block-latest-comments__comment {
     249        border-top: 1px solid rgba(0, 0, 0, 0.1);
     250        margin-bottom: 24px;
     251        padding-top: 24px;
     252}
     253
     254/*--------------------------------------------------------------
     2556.0 Blocks - Embeds
     256--------------------------------------------------------------*/
     257
     258/*--------------------------------------------------------------
     2597.0 Blocks - Custom Colors
     260--------------------------------------------------------------*/

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

  • 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
    7379        // Add RSS feed links to <head> for posts and comments.
    7480        add_theme_support( 'automatic-feed-links' );
    7581
    … …  
    239245        // Load our main stylesheet.
    240246        wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );
    241247
     248        // Theme block stylesheet.
     249        wp_enqueue_style( 'twentyfourteen-block-style', get_theme_file_uri( '/css/blocks.css' ), array( 'twentyfourteen-style' ), '1.0' );
     250
    242251        // Load the Internet Explorer specific stylesheet.
    243252        wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style' ), '20131205' );
    244253        wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );
    … …  
    302311}
    303312add_filter( 'wp_resource_hints', 'twentyfourteen_resource_hints', 10, 2 );
    304313
     314/**
     315 * Enqueue editor styles for Gutenberg
     316 *
     317 * @since Twenty Fourteen 2.3
     318 */
     319function twentyfourteen_block_editor_styles() {
     320        // Block styles.
     321        wp_enqueue_style( 'twentyfourteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     322        // Add custom fonts.
     323        wp_enqueue_style( 'twentyfourteen-fonts', twentyfourteen_font_url(), array(), null );
     324}
     325add_action( 'enqueue_block_editor_assets', 'twentyfourteen_block_editor_styles' );
     326
    305327if ( ! function_exists( 'twentyfourteen_the_attached_image' ) ) :
    306328/**
    307329 * Print the attached image with a link to the next attached image.