WordPress.org
Get WordPress

Make WordPress Core

Ticket #45041: 45041.patch

File 45041.patch, 16.4 KB (added by laurelfulford, 8 years ago)

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

     
     1/*
     2Theme Name: Twenty Thirteen
     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
     14--------------------------------------------------------------*/
     15
     16/*--------------------------------------------------------------
     171.0 General Block Styles
     18--------------------------------------------------------------*/
     19
     20/* Captions */
     21
     22[class^="wp-block-"] figcaption,
     23[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
     24        color: #220e10;
     25        font-size: 18px;
     26        font-style: italic;
     27        font-weight: 300;
     28        line-height: 1.5;
     29        margin: 0 0 24px;
     30}
     31
     32/*--------------------------------------------------------------
     332.0 Blocks - Common Blocks
     34--------------------------------------------------------------*/
     35
     36/* Paragraph */
     37
     38p.has-drop-cap:not(:focus)::first-letter {
     39        font-size: 5em;
     40}
     41
     42/* Gallery */
     43
     44.wp-block-gallery {
     45        margin-bottom: 24px;
     46}
     47
     48.wp-block-gallery figcaption {
     49        margin-bottom: 0;
     50}
     51
     52/* Quote */
     53
     54.wp-block-quote {
     55        margin: 24px 40px;
     56        padding: 0;
     57}
     58
     59.wp-block-quote:not(.is-large):not(.is-style-large) {
     60        border-left: 0;
     61        padding-left: 0;
     62}
     63
     64.wp-block-quote cite {
     65        color: inherit;
     66        font-size: 16px;
     67        font-style: italic;
     68}
     69
     70/* Audio */
     71
     72.wp-block-audio audio {
     73        display: block;
     74        width: 100%;
     75}
     76
     77/* Cover Image */
     78
     79.wp-block-cover-image.aligncenter {
     80        clear: both;
     81        display: flex;
     82}
     83
     84/* File */
     85
     86.wp-block-file .wp-block-file__button {
     87        background: #e05d22; /* Old browsers */
     88        background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
     89        background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
     90        border: none;
     91        border-bottom: 3px solid #b93207;
     92        border-radius: 2px;
     93        color: #fff;
     94        display: inline-block;
     95        font-size: 16px;
     96        padding: 11px 24px 10px;
     97        text-decoration: none;
     98}
     99
     100.wp-block-file .wp-block-file__button:hover,
     101.wp-block-file .wp-block-file__button:focus {
     102        background: #ed6a31; /* Old browsers */
     103        background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
     104        background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
     105        color: #fff;
     106        outline: none;
     107}
     108
     109.wp-block-file .wp-block-file__button:active {
     110        background: #d94412; /* Old browsers */
     111        background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
     112        background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
     113        border: none;
     114        border-top: 3px solid #b93207;
     115        padding: 10px 24px 11px;
     116}
     117
     118/*--------------------------------------------------------------
     1193.0 Blocks - Formatting
     120--------------------------------------------------------------*/
     121
     122/* Code */
     123
     124.wp-block-code {
     125        background-color: transparent;
     126        border: 0;
     127        padding: 0;
     128}
     129
     130/* Pullquote */
     131
     132.wp-block-pullquote {
     133        border: 0;
     134        padding: 0.5em 0;
     135}
     136
     137.wp-block-pullquote__citation,
     138.wp-block-pullquote cite,
     139.wp-block-pullquote footer {
     140        color: #141412;
     141}
     142
     143/* Table */
     144
     145.wp-block-table {
     146        border-bottom: 1px solid #ededed;
     147        border-collapse: collapse;
     148        border-spacing: 0;
     149        font-size: 14px;
     150        line-height: 2;
     151        margin: 0 0 20px;
     152        width: 100%;
     153}
     154
     155.wp-block-table th {
     156        border: 0;
     157        font-weight: bold;
     158        text-transform: uppercase;
     159}
     160
     161.wp-block-table td {
     162        border: 0;
     163        border-top: 1px solid #ededed;
     164}
     165
     166/*--------------------------------------------------------------
     1674.0 Blocks - Layout Elements
     168--------------------------------------------------------------*/
     169
     170/* Buttons */
     171
     172.wp-block-button .wp-block-button__link {
     173        background: #e05d22; /* Old browsers */
     174        background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
     175        background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
     176        border: none;
     177        border-bottom: 3px solid #b93207;
     178        border-radius: 2px;
     179        color: #fff;
     180        display: inline-block;
     181        font-size: 16px;
     182        padding: 11px 24px 10px;
     183        text-decoration: none;
     184}
     185
     186.wp-block-button .wp-block-button__link:hover,
     187.wp-block-button .wp-block-button__link:focus {
     188        background: #ed6a31; /* Old browsers */
     189        background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
     190        background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
     191        color: #fff;
     192        outline: none;
     193}
     194
     195.wp-block-button .wp-block-button__link:active {
     196        background: #d94412; /* Old browsers */
     197        background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
     198        background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
     199        border: none;
     200        border-top: 3px solid #b93207;
     201        padding: 10px 24px 11px;
     202}
     203
     204/* Separator */
     205
     206.wp-block-separator {
     207        border: 0;
     208        max-width: 100px;
     209}
     210
     211.wp-block-separator.is-style-wide {
     212        max-width: 100%;
     213}
     214
     215/*--------------------------------------------------------------
     2165.0 Blocks - Widgets
     217--------------------------------------------------------------*/
     218
     219/* Comments */
     220
     221.wp-block-latest-comments {
     222        margin: 0;
     223        padding: 0;
     224}
     225
     226.wp-block-latest-comments .avatar,
     227.wp-block-latest-comments__comment-avatar {
     228        border-radius: 0;
     229}
     230
     231.wp-block-latest-comments__comment,
     232.wp-block-latest-comments__comment-excerpt,
     233.wp-block-latest-comments__comment-excerpt p {
     234        font-size: 16px;
     235}
     236
     237.wp-block-latest-comments__comment-excerpt p:last-child {
     238        margin-bottom: 0;
     239}
     240
     241.wp-block-latest-comments__comment-date {
     242        font-size: 16px;
     243}
     244
     245.wp-block-latest-comments .wp-block-latest-comments__comment {
     246        background: url(../images/dotted-line.png) repeat-x left top;
     247        margin-bottom: 0;
     248        padding: 24px 0;
     249}

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

     
     1/*
     2Theme Name: Twenty Thirteen
     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        font-family: "Source Sans Pro", Helvetica, sans-serif;
     25        font-size: 16px;
     26        font-weight: 400;
     27        line-height: 1.5;
     28}
     29
     30.edit-post-visual-editor .editor-block-list__block {
     31        color: #141412;
     32}
     33
     34.editor-post-title__block .editor-post-title__input {
     35        font-family: Bitter, Georgia, serif;
     36        font-size: 48px;
     37        font-weight: 300;
     38        line-height: 1.0909090909;
     39        margin-bottom: 12px;
     40        margin: 0 0 12px 0;
     41}
     42
     43/*--------------------------------------------------------------
     442.0 General Block Styles
     45--------------------------------------------------------------*/
     46
     47/* Main column width */
     48
     49body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
     50body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
     51body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
     52        width: 634px;
     53}
     54
     55body.gutenberg-editor-page .edit-post-visual-editor .wp-block-columns .editor-block-list__block {
     56        width: auto;
     57}
     58
     59/* Link styles */
     60
     61.edit-post-visual-editor a,
     62.editor-block-list__block a,
     63.wp-block-freeform.block-library-rich-text__tinymce a {
     64        color: #bc360a;
     65
     66}
     67
     68/* List styles */
     69
     70.edit-post-visual-editor ul:not(.wp-block-gallery),
     71.editor-block-list__block ul:not(.wp-block-gallery),
     72.block-library-list ul,
     73.edit-post-visual-editor ol,
     74.editor-block-list__block ol,
     75.block-library-list ol {
     76        margin: 16px 0;
     77        padding: 0 0 0 40px;
     78}
     79
     80.block-library-list .editor-rich-text__tinymce {
     81        padding: 0 0 0 40px;
     82}
     83
     84.edit-post-visual-editor ul:not(.wp-block-gallery),
     85.edit-post-visual-editor .editor-block-list__block ul:not(.wp-block-gallery),
     86.block-library-list ul {
     87        list-style-type: square;
     88}
     89
     90.edit-post-visual-editor ol,
     91.editor-block-list__block ol,
     92.block-library-list ol {
     93        list-style: decimal;
     94}
     95
     96.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
     97.editor-block-list__block ul:not(.wp-block-gallery) li > ul,
     98.block-library-list li > ul,
     99.edit-post-visual-editor li > ol,
     100.editor-block-list__block li > ol,
     101.block-library-list li > ol {
     102        margin: 0;
     103}
     104
     105.edit-post-visual-editor ul:not(.wp-block-gallery) li,
     106.editor-block-list__block ul:not(.wp-block-gallery) li,
     107.edit-post-visual-editor ol li,
     108.editor-block-list__block ol li,
     109.block-library-list li {
     110        margin-bottom: 0;
     111}
     112
     113/* Quote */
     114
     115.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     116        border-left: 0;
     117        font-style: italic;
     118        margin: 24px 40px;
     119        padding-left: 0;
     120}
     121
     122.wp-block-freeform.block-library-rich-text__tinymce blockquote p {
     123        font-size: 24px;
     124        font-weight: 300;
     125}
     126
     127/* Code */
     128
     129.wp-block-freeform.block-library-rich-text__tinymce code {
     130        background: transparent;
     131}
     132
     133/* Captions */
     134
     135[class^="wp-block-"] figcaption,
     136[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
     137        color: #220e10;
     138        font-size: 18px;
     139        font-style: italic;
     140        font-weight: 300;
     141        line-height: 1.5;
     142        margin: 0 0 24px;
     143}
     144
     145/*--------------------------------------------------------------
     1463.0 Blocks - Common Blocks
     147--------------------------------------------------------------*/
     148
     149/* Paragraph */
     150
     151p.has-drop-cap:not(:focus)::first-letter {
     152        font-size: 5em;
     153}
     154
     155/* Gallery */
     156
     157.edit-post-visual-editor .wp-block-gallery {
     158        margin-bottom: 24px;
     159        padding: 0;
     160}
     161
     162.wp-block-gallery figcaption,
     163.wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body {
     164        color: #fff;
     165        font-size: 13px;
     166        margin-bottom: 0;
     167}
     168
     169/* Quote */
     170
     171.wp-block-quote {
     172        font-style: italic;
     173        margin: 24px 40px;
     174        padding: 0;
     175}
     176
     177.editor-block-list__block .wp-block-quote p {
     178        font-size: 24px;
     179        font-weight: 300;
     180}
     181
     182.wp-block-quote:not(.is-large):not(.is-style-large) {
     183        border-left: 0;
     184        padding-left: 0;
     185}
     186
     187.wp-block-quote .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body {
     188        color: inherit;
     189        font-size: 16px;
     190        font-style: italic;
     191        text-transform: uppercase;
     192}
     193
     194/* Cover Image */
     195
     196.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text {
     197        font-size: 32px;
     198        line-height: 1.25;
     199}
     200
     201/* File */
     202
     203.wp-block-file .wp-block-file__textlink {
     204        color: #bc360a;
     205}
     206
     207.wp-block-file .wp-block-file__button {
     208        background: #e05d22; /* Old browsers */
     209        background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
     210        background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
     211        border: none;
     212        border-bottom: 3px solid #b93207;
     213        border-radius: 2px;
     214        color: #fff;
     215        display: inline-block;
     216        font-size: 16px;
     217        line-height: 24px;
     218        padding: 11px 24px 10px;
     219        text-decoration: none;
     220}
     221
     222/*--------------------------------------------------------------
     2234.0 Blocks - Formatting
     224--------------------------------------------------------------*/
     225
     226/* Code */
     227
     228.wp-block-code {
     229        border: 0;
     230        padding: 0;
     231}
     232
     233/* Custom HTML */
     234
     235.wp-block-html .CodeMirror-lines pre {
     236        background-color: inherit;
     237        border: inherit;
     238        font-size: inherit;
     239        line-height: inherit;
     240        margin: inherit;
     241        padding: inherit;
     242}
     243
     244/* Pullquote */
     245
     246.edit-post-visual-editor .wp-block-pullquote {
     247        border: 0;
     248        padding: 0.5em 0;
     249}
     250
     251.edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p {
     252        font-weight: 300;
     253}
     254
     255.edit-post-visual-editor .wp-block-pullquote__citation,
     256.edit-post-visual-editor .wp-block-pullquote cite,
     257.edit-post-visual-editor .wp-block-pullquote footer {
     258        color: #141412;
     259        font-size: 16px;
     260}
     261
     262/* Table */
     263
     264.wp-block-table {
     265        border-bottom: 1px solid #ededed;
     266        border-collapse: collapse;
     267        border-spacing: 0;
     268        font-size: 14px;
     269        line-height: 2;
     270        margin: 0 0 20px;
     271        width: 100%;
     272}
     273
     274.wp-block-table th {
     275        border: 0;
     276        font-weight: bold;
     277        text-transform: uppercase;
     278}
     279
     280.editor-block-list__block .wp-block-table td {
     281        border: 0;
     282        border-top: 1px solid #ededed;
     283        padding: 0;
     284}
     285
     286
     287/*--------------------------------------------------------------
     2885.0 Blocks - Layout Elements
     289--------------------------------------------------------------*/
     290
     291/* Buttons */
     292
     293.wp-block-button .wp-block-button__link {
     294        background: #e05d22; /* Old browsers */
     295        background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
     296        background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
     297        border: none;
     298        border-bottom: 3px solid #b93207;
     299        border-radius: 2px;
     300        color: #fff;
     301        display: inline-block;
     302        font-size: 16px;
     303        line-height: 24px;
     304        padding: 11px 24px 10px;
     305        text-decoration: none;
     306}
     307
     308/* Separator */
     309
     310.editor-block-list__block hr.wp-block-separator {
     311        margin-left: auto;
     312        margin-right: auto;
     313}
     314
     315/*--------------------------------------------------------------
     3166.0 Blocks - Widgets
     317--------------------------------------------------------------*/
     318
     319/* Comments */
     320
     321.editor-block-list__block .wp-block-latest-comments {
     322        margin: 0;
     323        padding: 0;
     324}
     325
     326.wp-block-latest-comments .avatar,
     327.wp-block-latest-comments__comment-avatar {
     328        border-radius: 0;
     329}
     330
     331.wp-block-latest-comments__comment,
     332.wp-block-latest-comments__comment-excerpt,
     333.wp-block-latest-comments__comment-excerpt p {
     334        font-size: 16px;
     335}
     336
     337.wp-block-latest-comments__comment-excerpt p:last-child {
     338        margin-bottom: 0;
     339}
     340
     341.wp-block-latest-comments__comment-date {
     342        font-size: 16px;
     343}
     344
     345.wp-block-latest-comments .wp-block-latest-comments__comment {
     346        background: url(../images/dotted-line.png) repeat-x left top;
     347        margin-bottom: 0;
     348        padding: 24px 0;
     349}

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

     
    7474         */
    7575        add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentythirteen_fonts_url() ) );
    7676
     77        // Load regular editor styles into the new block-based editor.
     78        add_theme_support( 'editor-styles' );
     79
     80        // Load default block styles.
     81        add_theme_support( 'wp-block-styles' );
     82
    7783        // Adds RSS feed links to <head> for posts and comments.
    7884        add_theme_support( 'automatic-feed-links' );
    7985
    … …  
    184190        // Loads our main stylesheet.
    185191        wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
    186192
     193        // Theme block stylesheet.
     194        wp_enqueue_style( 'twentythirteen-block-style', get_theme_file_uri( '/css/blocks.css' ), array( 'twentythirteen-style' ), '1.0' );
     195
    187196        // Loads the Internet Explorer specific stylesheet.
    188197        wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
    189198        wp_style_add_data( 'twentythirteen-ie', 'conditional', 'lt IE 9' );
    … …  
    216225add_filter( 'wp_resource_hints', 'twentythirteen_resource_hints', 10, 2 );
    217226
    218227/**
     228 * Enqueue editor styles for Gutenberg
     229 *
     230 * @since Twenty Thirteen 2.5
     231 */
     232function twentythirteen_block_editor_styles() {
     233        // Block styles.
     234        wp_enqueue_style( 'twentythirteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     235        // Add custom fonts.
     236        wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null );
     237}
     238add_action( 'enqueue_block_editor_assets', 'twentythirteen_block_editor_styles' );
     239
     240/**
    219241 * Filter the page title.
    220242 *
    221243 * Creates a nicely formatted and more specific title element text for output