WordPress.org
Get WordPress

Make WordPress Core

Ticket #45040: 45040.patch

File 45040.patch, 18.5 KB (added by laurelfulford, 6 years ago)

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

     
     1/*
     2Theme Name: Twenty Twelve
     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: #757575;
     25        font-size: 12px;
     26        font-size: 0.857142857rem;
     27        line-height: 2;
     28        font-style: italic;
     29        text-align: left;
     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        margin-top: 0.1em;
     41}
     42
     43/* Gallery */
     44
     45.wp-block-gallery {
     46        margin-bottom: 24px;
     47        margin-bottom: 1.714285714rem;
     48}
     49
     50.wp-block-gallery .blocks-gallery-image figcaption,
     51.wp-block-gallery .blocks-gallery-item figcaption {
     52        left: 0;
     53        right: 0;
     54        width: auto;
     55}
     56
     57/* Quote */
     58
     59.wp-block-quote:not(.is-large):not(.is-style-large) {
     60        border-left: 0;
     61        padding: 1.714285714rem;
     62        padding: 24px;
     63}
     64
     65.wp-block-quote {
     66        padding: 1.714285714rem;
     67        padding: 24px;
     68}
     69
     70.wp-block-quote cite {
     71        color: inherit;
     72        font-size: inherit;
     73        font-style: italic;
     74}
     75
     76/* Audio */
     77
     78.wp-block-audio audio {
     79        display: block;
     80        width: 100%;
     81}
     82
     83/* File */
     84
     85.wp-block-file .wp-block-file__button {
     86        background-color: #e6e6e6;
     87        background-repeat: repeat-x;
     88        background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
     89        background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
     90        background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
     91        background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
     92        background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
     93        border: 1px solid #d2d2d2;
     94        border-radius: 3px;
     95        box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
     96        color: #7c7c7c;
     97        font-family: inherit;
     98        font-size: 11px;
     99        font-size: 0.785714286rem;
     100        font-weight: normal;
     101        line-height: 1.428571429;
     102        padding: 6px 10px;
     103        padding: 0.428571429rem 0.714285714rem;
     104}
     105
     106.wp-block-file .wp-block-file__button:hover,
     107.wp-block-file .wp-block-file__button:focus {
     108        background-color: #ebebeb;
     109        background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
     110        background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
     111        background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
     112        background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
     113        background-image: linear-gradient(top, #f9f9f9, #ebebeb);
     114        background-repeat: repeat-x;
     115        color: #5e5e5e;
     116}
     117
     118.wp-block-file .wp-block-file__button:focus {
     119        background-color: #e1e1e1;
     120        background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
     121        background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
     122        background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
     123        background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
     124        background-image: linear-gradient(top, #ebebeb, #e1e1e1);
     125        background-repeat: repeat-x;
     126        border-color: transparent;
     127        box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
     128        color: #757575;
     129}
     130
     131/* Video */
     132
     133.wp-block-video video:not(:last-child) {
     134        margin-bottom: 0;
     135}
     136
     137/*--------------------------------------------------------------
     1383.0 Blocks - Formatting
     139--------------------------------------------------------------*/
     140
     141/* Code */
     142
     143pre.wp-block-code {
     144        border: 0;
     145        padding: 0;
     146}
     147
     148/* Pullquote */
     149
     150.wp-block-pullquote__citation,
     151.wp-block-pullquote cite,
     152.wp-block-pullquote footer {
     153        font-size: 14px;
     154        text-transform: none;
     155}
     156
     157/* Table */
     158
     159.wp-block-table {
     160        border-bottom: 1px solid #ededed;
     161        border-collapse: collapse;
     162        border-spacing: 0;
     163        font-size: 14px;
     164        line-height: 2;
     165        margin: 0 0 20px;
     166        width: 100%;
     167}
     168
     169.wp-block-table th {
     170        border: 0;
     171        font-weight: bold;
     172        padding: 6px 10px 6px 0;
     173        text-transform: uppercase;
     174}
     175
     176.wp-block-table td {
     177        border: 0;
     178        border-top: 1px solid #ededed;
     179        padding: 6px 10px 6px 0;
     180}
     181
     182/*--------------------------------------------------------------
     1834.0 Blocks - Layout Elements
     184--------------------------------------------------------------*/
     185
     186/* Buttons */
     187
     188.wp-block-button .wp-block-button__link,
     189.wp-block-button .wp-block-button__link:visited {
     190        background-color: #e6e6e6;
     191        background-repeat: repeat-x;
     192        background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
     193        background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
     194        background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
     195        background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
     196        background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
     197        border: 1px solid #d2d2d2;
     198        border-radius: 3px;
     199        box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
     200        color: #7c7c7c;
     201        font-family: inherit;
     202        font-size: 11px;
     203        font-size: 0.785714286rem;
     204        font-weight: normal;
     205        line-height: 1.428571429;
     206        padding: 6px 10px;
     207        padding: 0.428571429rem 0.714285714rem;
     208}
     209
     210.wp-block-button .wp-block-button__link:hover,
     211.wp-block-button .wp-block-button__link:focus {
     212        background-color: #ebebeb;
     213        background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
     214        background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
     215        background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
     216        background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
     217        background-image: linear-gradient(top, #f9f9f9, #ebebeb);
     218        background-repeat: repeat-x;
     219        color: #5e5e5e;
     220}
     221
     222.wp-block-button .wp-block-button__link:active {
     223        background-color: #e1e1e1;
     224        background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
     225        background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
     226        background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
     227        background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
     228        background-image: linear-gradient(top, #ebebeb, #e1e1e1);
     229        background-repeat: repeat-x;
     230        border-color: transparent;
     231        box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
     232        color: #757575;
     233}
     234
     235/* Separator */
     236
     237.wp-block-separator {
     238        border: 0;
     239}
     240
     241/*--------------------------------------------------------------
     2425.0 Blocks - Widgets
     243--------------------------------------------------------------*/
     244
     245/* Comments */
     246
     247.wp-block-latest-comments {
     248        margin: 0;
     249        padding: 0;
     250}
     251
     252.wp-block-latest-comments .avatar,
     253.wp-block-latest-comments__comment-avatar {
     254        border-radius: 0;
     255        box-shadow: none;
     256}
     257
     258.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     259.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     260        margin-left: 60px;
     261}
     262
     263.wp-block-latest-comments__comment,
     264.wp-block-latest-comments__comment-excerpt,
     265.wp-block-latest-comments__comment-excerpt p {
     266        font-size: 14px;
     267}
     268
     269.wp-block-latest-comments__comment-excerpt p:last-child {
     270        margin-bottom: 0;
     271}
     272
     273.wp-block-latest-comments__comment-date {
     274        color: #5e5e5e;
     275}
     276
     277.wp-block-latest-comments .wp-block-latest-comments__comment {
     278        margin: 0;
     279        padding: 24px 0;
     280        padding: 1.714285714rem 0 0;
     281}
     282
     283.wp-block-latest-comments article {
     284        margin-bottom: 0;
     285}
     286

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

     
     1/*
     2Theme Name: Twenty Twelve
     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-size: 14px;
     25}
     26
     27.edit-post-visual-editor .editor-block-list__block {
     28        color: #444;
     29}
     30
     31.editor-post-title__block .editor-post-title__input {
     32        font-family: "Open Sans", Helvetica, Arial, sans-serif;
     33        font-size: 20px;
     34        font-weight: 400;
     35}
     36
     37@media screen and (min-width: 600px) {
     38        .editor-post-title__block .editor-post-title__input {
     39                font-size: 22px;
     40        }
     41}
     42
     43.wp-block-freeform.block-library-rich-text__tinymce h1 {
     44        font-size: 21px;
     45}
     46
     47.wp-block-freeform.block-library-rich-text__tinymce h2 {
     48        font-size: 18px;
     49}
     50
     51.wp-block-freeform.block-library-rich-text__tinymce h3 {
     52        font-size: 16px;
     53}
     54
     55.wp-block-freeform.block-library-rich-text__tinymce h4 {
     56        font-size: 14px;
     57}
     58
     59.wp-block-freeform.block-library-rich-text__tinymce h5 {
     60        font-size: 13px;
     61}
     62
     63.wp-block-freeform.block-library-rich-text__tinymce h6 {
     64        font-size: 12px;
     65}
     66
     67/*--------------------------------------------------------------
     682.0 General Block Styles
     69--------------------------------------------------------------*/
     70
     71/* Main column width */
     72
     73body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
     74body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
     75body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
     76        width: 655px;
     77}
     78
     79body.gutenberg-editor-page .edit-post-visual-editor .wp-block-columns .editor-block-list__block {
     80        width: auto;
     81}
     82
     83/* Link styles */
     84
     85.edit-post-visual-editor a,
     86.editor-block-list__block a,
     87.wp-block-freeform.block-library-rich-text__tinymce a {
     88        color: #21759b;
     89}
     90
     91/* List styles */
     92
     93.wp-block-freeform.block-library-rich-text__tinymce ol,
     94.wp-block-freeform.block-library-rich-text__tinymce ul:not(.wp-block-gallery),
     95.block-library-list .editor-rich-text__tinymce ol,
     96.block-library-list .editor-rich-text__tinymce ul:not(.wp-block-gallery) {
     97        padding-left: 0;
     98}
     99
     100/* Quote styles */
     101
     102.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     103        border-left: 0;
     104        font-style: italic;
     105        padding: 24px;
     106}
     107
     108/* Table styles */
     109
     110.wp-block-freeform.block-library-rich-text__tinymce th {
     111        font-size: 11px;
     112}
     113
     114.wp-block-freeform.block-library-rich-text__tinymce td {
     115        font-size: 12px;
     116}
     117
     118/* Code styles */
     119
     120.wp-block-freeform.block-library-rich-text__tinymce code {
     121        background-color: transparent;
     122        font-size: 12px;
     123}
     124
     125/* Pre styles */
     126
     127.wp-block-freeform.block-library-rich-text__tinymce pre {
     128        font-size: 12px;
     129}
     130
     131/* Captions */
     132
     133[class^="wp-block-"] figcaption,
     134[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
     135        color: #757575;
     136        font-size: 12px;
     137        line-height: 2;
     138        font-style: italic;
     139        text-align: left;
     140}
     141
     142/* Definition Lists */
     143
     144.wp-block-freeform.block-library-rich-text__tinymce dt {
     145        margin-bottom: 0;
     146}
     147
     148/*--------------------------------------------------------------
     1493.0 Blocks - Common Blocks
     150--------------------------------------------------------------*/
     151
     152/* Paragraph */
     153
     154p.has-drop-cap:not(:focus)::first-letter {
     155        font-size: 5em;
     156        margin-top: 0.1em;
     157}
     158
     159/* Gallery */
     160
     161.wp-block-gallery {
     162        margin-bottom: 24px;
     163}
     164
     165.wp-block-gallery figcaption,
     166.wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body {
     167        color: #fff;
     168}
     169
     170/* Quote */
     171
     172.wp-block-quote,
     173.wp-block-quote:not(.is-large):not(.is-style-large) {
     174        padding: 24px;
     175}
     176
     177.wp-block-quote p {
     178        font-style: italic;
     179}
     180
     181.wp-block-quote:not(.is-large):not(.is-style-large) {
     182        border-left: 0;
     183}
     184
     185.wp-block-quote .wp-block-quote__citation {
     186        color: inherit;
     187        font-size: inherit;
     188        font-style: italic;
     189}
     190
     191/* Cover Image */
     192
     193.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p {
     194        font-size: 28px;
     195}
     196
     197/* File */
     198
     199.wp-block-file .wp-block-file__textlink {
     200        color: #21759b;
     201        text-decoration: underline;
     202}
     203
     204.wp-block-file .wp-block-file__button,
     205.wp-block-button .wp-block-button__link:hover {
     206        background-color: #e6e6e6;
     207        background-repeat: repeat-x;
     208        background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
     209        background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
     210        background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
     211        background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
     212        background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
     213        border: 1px solid #d2d2d2;
     214        border-radius: 3px;
     215        box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
     216        color: #7c7c7c;
     217        font-family: inherit;
     218        font-size: 11px;
     219        font-weight: normal;
     220        line-height: 1.428571429;
     221        padding: 6px 10px;
     222}
     223
     224/*--------------------------------------------------------------
     2254.0 Blocks - Formatting
     226--------------------------------------------------------------*/
     227
     228/* Verse */
     229
     230.editor-block-list__block .wp-block-verse pre {
     231        font-size: 12px;
     232}
     233
     234/* Code */
     235
     236.wp-block-code {
     237        border: 0;
     238        font-size: 12px;
     239        line-height: 2;
     240        padding: 0;
     241}
     242
     243/* Custom HTML */
     244
     245.wp-block-html .CodeMirror-lines pre {
     246        background-color: inherit;
     247        border: inherit;
     248        font-size: inherit;
     249        line-height: inherit;
     250        margin: inherit;
     251        padding: inherit;
     252}
     253
     254.wp-block-html .CodeMirror-sizer {
     255        line-height: 1.7;
     256}
     257
     258/* Preformatted */
     259
     260.editor-block-list__block .wp-block-preformatted pre {
     261        font-size: 12px;
     262}
     263
     264/* Pullquote */
     265
     266.wp-block-pullquote {
     267        font-style: italic;
     268}
     269
     270.edit-post-visual-editor .wp-block-pullquote {
     271        margin: 0;
     272}
     273
     274.wp-block-pullquote .wp-block-pullquote__citation,
     275.wp-block-pullquote cite {
     276        font-size: 14px;
     277        text-transform: none;
     278}
     279
     280/* Table */
     281
     282.wp-block-table {
     283        border-bottom: 1px solid #ededed;
     284        border-collapse: collapse;
     285        border-spacing: 0;
     286        font-size: 14px;
     287        line-height: 2;
     288        margin: 0 0 20px;
     289        width: 100%;
     290}
     291
     292.editor-block-list__block .wp-block-table th {
     293        border: 0;
     294        font-size: 11px;
     295        font-weight: bold;
     296        text-transform: uppercase;
     297}
     298
     299.editor-block-list__block .wp-block-table td {
     300        border: 0;
     301        border-top: 1px solid #ededed;
     302        font-size: 12px;
     303        padding: 0;
     304}
     305
     306
     307/*--------------------------------------------------------------
     3085.0 Blocks - Layout Elements
     309--------------------------------------------------------------*/
     310
     311/* Buttons */
     312
     313.wp-block-button .wp-block-button__link,
     314.wp-block-button .wp-block-button__link:hover {
     315        background-color: #e6e6e6;
     316        background-repeat: repeat-x;
     317        background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
     318        background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
     319        background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
     320        background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
     321        background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
     322        border: 1px solid #d2d2d2;
     323        border-radius: 3px;
     324        box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
     325        color: #7c7c7c;
     326        font-family: inherit;
     327        font-size: 11px;
     328        font-weight: normal;
     329        line-height: 1.428571429;
     330        padding: 6px 10px;
     331}
     332
     333/* Separator */
     334
     335.editor-block-list__block hr.wp-block-separator {
     336        margin-left: auto;
     337        margin-right: auto;
     338}
     339
     340/*--------------------------------------------------------------
     3416.0 Blocks - Widgets
     342--------------------------------------------------------------*/
     343
     344/* Comments */
     345
     346.editor-block-list__block .wp-block-latest-comments {
     347        margin: 0;
     348        padding: 0;
     349}
     350
     351.wp-block-latest-comments .avatar,
     352.wp-block-latest-comments__comment-avatar {
     353        border-radius: 0;
     354        box-shadow: none;
     355}
     356
     357.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     358.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     359        margin-left: 60px;
     360}
     361
     362.wp-block-latest-comments__comment,
     363.wp-block-latest-comments__comment-excerpt,
     364.wp-block-latest-comments__comment-excerpt p {
     365        font-size: 14px;
     366}
     367
     368.wp-block-latest-comments__comment-excerpt p:last-child {
     369        margin-bottom: 0;
     370}
     371
     372.wp-block-latest-comments__comment-date {
     373        color: #5e5e5e;
     374}
     375
     376.wp-block-latest-comments .wp-block-latest-comments__comment {
     377        margin: 0;
     378        padding: 24px 0;
     379}
     380
     381.wp-block-latest-comments article {
     382        border-bottom: 4px double #ededed;
     383        padding-bottom: 2em;
     384}

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

     
    5454        // This theme styles the visual editor with editor-style.css to match the theme style.
    5555        add_editor_style();
    5656
     57        // Load regular editor styles into the new block-based editor.
     58        add_theme_support( 'editor-styles' );
     59
     60        // Load default block styles.
     61        add_theme_support( 'wp-block-styles' );
     62
    5763        // Adds RSS feed links to <head> for posts and comments.
    5864        add_theme_support( 'automatic-feed-links' );
    5965
    … …  
    151157        // Loads our main stylesheet.
    152158        wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
    153159
     160        // Theme block stylesheet.
     161        wp_enqueue_style( 'twentytwelve-block-style', get_theme_file_uri( '/css/blocks.css' ), array( 'twentytwelve-style' ), '1.0' );
     162
    154163        // Loads the Internet Explorer specific stylesheet.
    155164        wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
    156165        $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
    … …  
    158167add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
    159168
    160169/**
     170 * Enqueue editor styles for Gutenberg
     171 *
     172 * @since Twenty Twelve 2.6
     173 */
     174function twentytwelve_block_editor_styles() {
     175        // Block styles.
     176        wp_enqueue_style( 'twentytwelve-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     177        // Add custom fonts.
     178        wp_enqueue_style( 'twentytwelve-fonts', twentytwelve_get_font_url(), array(), null );
     179}
     180add_action( 'enqueue_block_editor_assets', 'twentytwelve_block_editor_styles' );
     181
     182/**
    161183 * Add preconnect for Google Fonts.
    162184 *
    163185 * @since Twenty Twelve 2.2