WordPress.org
Get WordPress

Make WordPress Core

Ticket #45039: 45039.patch

File 45039.patch, 17.5 KB (added by laurelfulford, 8 years ago)

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

     
     1/*
     2Theme Name: Twenty Eleven
     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
     20figure[class^="wp-block-"] {
     21        margin-left: 0;
     22        margin-right: 0;
     23}
     24
     25/* Captions */
     26
     27[class^="wp-block-"] figcaption {
     28        color: #666;
     29        font-family: Georgia, serif;
     30        font-size: 12px;
     31        margin-bottom: 1.625em;
     32        max-width: 96%;
     33        max-width: calc( 100% - 18px );
     34        padding: 3px 0 5px 40px;
     35        position: relative;
     36        text-align: left;
     37}
     38
     39[class^="wp-block-"] figcaption:before {
     40        color: #666;
     41        content: '\2014';
     42        font-size: 14px;
     43        font-style: normal;
     44        font-weight: bold;
     45        margin-right: 5px;
     46        position: absolute;
     47        left: 10px;
     48        top: 0;
     49}
     50
     51/*--------------------------------------------------------------
     522.0 Blocks - Common Blocks
     53--------------------------------------------------------------*/
     54
     55/* Paragraph */
     56
     57p.has-drop-cap:not(:focus)::first-letter {
     58        font-size: 5em;
     59        margin-top: 0.1em;
     60}
     61
     62/* Gallery */
     63
     64.wp-block-gallery {
     65        margin-bottom: 1.625em;
     66}
     67
     68.wp-block-gallery figcaption {
     69        margin-bottom: 0;
     70}
     71
     72.wp-block-gallery .blocks-gallery-item img {
     73        border: 0;
     74        padding: 0;
     75}
     76
     77/* Quote */
     78
     79.wp-block-quote {
     80        margin: 0 3em;
     81}
     82
     83.wp-block-quote:not(.is-large):not(.is-style-large) {
     84        border-left: 0;
     85        padding-left: 0;
     86}
     87
     88.wp-block-quote cite {
     89        color: #666;
     90        font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
     91        font-weight: 300;
     92        letter-spacing: 0.05em;
     93        text-transform: uppercase;
     94}
     95
     96/* Audio */
     97
     98.wp-block-audio audio {
     99        display: block;
     100        width: 100%;
     101}
     102
     103/* Cover Image */
     104
     105.wp-block-cover-image.aligncenter {
     106        clear: both;
     107        display: flex;
     108}
     109
     110/* File */
     111
     112.wp-block-file .wp-block-file__button {
     113        background: #222;
     114        border: none;
     115        -moz-border-radius: 3px;
     116        border-radius: 3px;
     117        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     118        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     119        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     120        color: #eee;
     121        cursor: pointer;
     122        font-size: 15px;
     123        padding: 5px 42px 5px 22px;
     124        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     125}
     126
     127.wp-block-file .wp-block-file__button:active {
     128        background: #1982d1;
     129        color: #bfddf3;
     130}
     131
     132/*--------------------------------------------------------------
     1333.0 Blocks - Formatting
     134--------------------------------------------------------------*/
     135
     136/* Code */
     137
     138.wp-block-code {
     139        background-color: transparent;
     140        border: 0;
     141        padding: 0;
     142}
     143
     144/* Pullquote */
     145
     146.wp-block-pullquote__citation,
     147.wp-block-pullquote cite,
     148.wp-block-pullquote footer {
     149        color: #141412;
     150}
     151
     152/* Table */
     153
     154.wp-block-table {
     155        border-bottom: 1px solid #ddd;
     156        border-collapse: collapse;
     157        border-spacing: 0;
     158        width: 100%;
     159}
     160
     161.wp-block-table th {
     162        border: 0;
     163        font-weight: bold;
     164        padding: 6px 10px 6px 0;
     165        text-transform: uppercase;
     166}
     167
     168.wp-block-table td {
     169        border: 0;
     170        border-top: 1px solid #ddd;
     171        padding: 6px 10px 6px 0;
     172}
     173
     174/*--------------------------------------------------------------
     1754.0 Blocks - Layout Elements
     176--------------------------------------------------------------*/
     177
     178/* Buttons */
     179
     180.wp-block-button .wp-block-button__link {
     181        background: #222;
     182        border: none;
     183        -moz-border-radius: 3px;
     184        border-radius: 3px;
     185        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     186        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     187        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     188        color: #eee;
     189        cursor: pointer;
     190        font-size: 15px;
     191        margin: 20px 0;
     192        padding: 5px 42px 5px 22px;
     193        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     194}
     195
     196.wp-block-button .wp-block-button__link:active {
     197        background: #1982d1;
     198        color: #bfddf3;
     199}
     200
     201/* Separator */
     202
     203.wp-block-separator {
     204        border: 0;
     205        max-width: 100px;
     206}
     207
     208.wp-block-separator.is-style-wide {
     209        max-width: 100%;
     210}
     211
     212/*--------------------------------------------------------------
     2135.0 Blocks - Widgets
     214--------------------------------------------------------------*/
     215
     216/* Comments */
     217
     218.wp-block-latest-comments {
     219        margin: 0;
     220        padding: 0;
     221}
     222
     223.wp-block-latest-comments .avatar,
     224.wp-block-latest-comments__comment-avatar {
     225        -moz-border-radius: 3px;
     226        border-radius: 3px;
     227        -webkit-box-shadow: 0 1px 2px #ccc;
     228        -moz-box-shadow: 0 1px 2px #ccc;
     229        box-shadow: 0 1px 2px #ccc;
     230        left: -70px;
     231        padding: 0;
     232        position: absolute;
     233        top: 0;
     234}
     235
     236.wp-block-latest-comments__comment,
     237.wp-block-latest-comments__comment-excerpt,
     238.wp-block-latest-comments__comment-excerpt p {
     239        font-size: 15px;
     240}
     241
     242.wp-block-latest-comments__comment-excerpt p:last-child {
     243        margin-bottom: 0;
     244}
     245
     246.wp-block-latest-comments__comment-meta,
     247.wp-block-latest-comments__comment-date {
     248        color: #666;
     249        font-size: 12px;
     250        line-height: 2.2em;
     251}
     252
     253.wp-block-latest-comments__comment-meta a {
     254        font-weight: bold;
     255}
     256
     257.wp-block-latest-comments .wp-block-latest-comments__comment {
     258        background: #f6f6f6;
     259        border: 1px solid #ddd;
     260        -moz-border-radius: 3px;
     261        border-radius: 3px;
     262        margin: 0 0 1.625em 70px;
     263        padding: 1.5em;
     264        position: relative;
     265}
     266
     267.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     268.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     269        margin-left: 0;
     270}
     271
     272.wp-block-latest-comments .wp-block-latest-comments__comment:before {
     273        content: url(../images/comment-arrow.png);
     274        left: -21px;
     275        position: absolute;
     276}

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

     
     1/*
     2Theme Name: Twenty Eleven
     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: "Helvetica Neue", Helvetica, Arial, sans-serif;
     25        font-size: 15px;
     26        font-size: 300;
     27        line-height: 1.625;
     28}
     29
     30.edit-post-visual-editor .editor-block-list__block {
     31        color: #333;
     32}
     33
     34.editor-post-title__block .editor-post-title__input {
     35        color: #000;
     36        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     37        font-size: 36px;
     38        line-height: 48px;
     39}
     40
     41.edit-post-visual-editor h1,
     42.wp-block-freeform.block-library-rich-text__tinymce h1,
     43.edit-post-visual-editor h2,
     44.wp-block-freeform.block-library-rich-text__tinymce h2 {
     45        font-size: 15px;
     46        margin: 0 0 0.8125em;
     47}
     48
     49.edit-post-visual-editor h3,
     50.wp-block-freeform.block-library-rich-text__tinymce h3 {
     51        font-size: 10px;
     52        font-weight: 300;
     53        letter-spacing: 0.1em;
     54        line-height: 2.6em;
     55        text-transform: uppercase;
     56}
     57
     58.edit-post-visual-editor h4,
     59.wp-block-freeform.block-library-rich-text__tinymce h4,
     60.edit-post-visual-editor h5,
     61.wp-block-freeform.block-library-rich-text__tinymce h5,
     62.edit-post-visual-editor h6,
     63.wp-block-freeform.block-library-rich-text__tinymce h6 {
     64        font-size: 15px;
     65        font-weight: 300;
     66        line-height: 1.625;
     67}
     68
     69/*--------------------------------------------------------------
     702.0 General Block Styles
     71--------------------------------------------------------------*/
     72
     73/* Main column width */
     74
     75body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block,
     76body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender,
     77body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {
     78        max-width: 614px;
     79}
     80
     81body.gutenberg-editor-page .edit-post-visual-editor .wp-block-columns .editor-block-list__block {
     82        width: auto;
     83}
     84
     85/* Link styles */
     86
     87.edit-post-visual-editor a,
     88.editor-block-list__block a,
     89.wp-block-freeform.block-library-rich-text__tinymce a {
     90        color: #1982d1;
     91}
     92
     93/* List styles */
     94
     95.edit-post-visual-editor ul:not(.wp-block-gallery),
     96.editor-block-list__block ul:not(.wp-block-gallery),
     97.block-library-list ul,
     98.edit-post-visual-editor ol,
     99.editor-block-list__block ol,
     100.block-library-list ol {
     101        margin: 0 0 1.6em 1.3333em;
     102        padding: 0;
     103}
     104
     105.block-library-list .editor-rich-text__tinymce {
     106        padding: 0;
     107}
     108
     109.edit-post-visual-editor ul:not(.wp-block-gallery),
     110.edit-post-visual-editor .editor-block-list__block ul:not(.wp-block-gallery),
     111.block-library-list ul {
     112        list-style-type: square;
     113}
     114
     115.edit-post-visual-editor ol,
     116.editor-block-list__block ol,
     117.block-library-list ol {
     118        list-style: decimal;
     119}
     120
     121.edit-post-visual-editor ol ol,
     122.editor-block-list__block ol ol,
     123.block-library-list ol ol {
     124        list-style: upper-alpha;
     125}
     126
     127.edit-post-visual-editor ol ol ol,
     128.editor-block-list__block ol ol ol,
     129.block-library-list ol ol ol {
     130        list-style: lower-roman;
     131}
     132
     133.edit-post-visual-editor ol ol ol ol,
     134.editor-block-list__block ol ol ol ol,
     135.block-library-list ol ol ol ol {
     136        list-style: lower-alpha;
     137}
     138
     139.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
     140.editor-block-list__block ul:not(.wp-block-gallery) li > ul,
     141.block-library-list li > ul,
     142.edit-post-visual-editor li > ol,
     143.editor-block-list__block li > ol,
     144.block-library-list li > ol,
     145.wp-block-freeform.block-library-rich-text__tinymce li,
     146.editor-block-list__block li {
     147        margin-bottom: 0;
     148}
     149
     150/* Captions */
     151
     152[class^="wp-block-"] figcaption {
     153        color: #666;
     154        font-family: Georgia, serif;
     155        font-size: 12px;
     156        margin-bottom: 1.625em;
     157        max-width: 96%;
     158        max-width: calc( 100% - 18px );
     159        padding: 3px 0 5px 40px;
     160        position: relative;
     161        text-align: left;
     162}
     163
     164[class^="wp-block-"]:not(.wp-block-gallery) figcaption:before {
     165        color: #666;
     166        content: '\2014';
     167        font-size: 14px;
     168        font-style: normal;
     169        font-weight: bold;
     170        margin-right: 5px;
     171        position: absolute;
     172        left: 10px;
     173        top: 0;
     174}
     175
     176/* Quote */
     177
     178.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     179        border: 0;
     180        font-style: italic;
     181        margin: 0 3em;
     182        padding: 0;
     183}
     184
     185.wp-block-freeform.block-library-rich-text__tinymce blockquote p {
     186        font-family: Georgia, "Bitstream Charter", serif;
     187        font-size: 15px;
     188        font-weight: normal;
     189}
     190
     191.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
     192        color: #666;
     193        font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
     194        font-weight: 300;
     195        letter-spacing: 0.05em;
     196        text-transform: uppercase;
     197}
     198
     199/* Code */
     200
     201.wp-block-freeform.block-library-rich-text__tinymce code {
     202        background: transparent;
     203}
     204
     205/*--------------------------------------------------------------
     2063.0 Blocks - Common Blocks
     207--------------------------------------------------------------*/
     208
     209/* Paragraph */
     210
     211p.has-drop-cap:not(:focus)::first-letter {
     212        font-size: 5em;
     213        margin-top: 0.1em;
     214}
     215
     216/* Gallery */
     217
     218.wp-block-gallery {
     219        margin-bottom: 1.625em;
     220}
     221
     222.wp-block-gallery figcaption {
     223        margin-bottom: 0;
     224        max-width: 100%;
     225}
     226
     227.wp-block-gallery .blocks-gallery-item img {
     228        border: 0;
     229        padding: 0;
     230}
     231
     232/* Quote */
     233
     234.wp-block-quote {
     235        font-family: Georgia, "Bitstream Charter", serif;
     236        font-style: italic;
     237        font-weight: normal;
     238        margin: 0 3em;
     239        padding: 0;
     240}
     241
     242.wp-block-quote:not(.is-large):not(.is-style-large) {
     243        border-left: 0;
     244        padding-left: 0;
     245}
     246
     247.wp-block-quote .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body {
     248        color: #666;
     249        font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
     250        font-weight: 300;
     251        letter-spacing: 0.05em;
     252        text-transform: uppercase;
     253}
     254
     255/* Cover Image */
     256
     257.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text {
     258        font-size: 30px;
     259        line-height: 37.5px;
     260}
     261
     262/* File */
     263
     264.wp-block-file .wp-block-file__textlink {
     265        color: #1982d1;
     266}
     267
     268.wp-block-file .wp-block-file__button {
     269        background: #222;
     270        border: none;
     271        -moz-border-radius: 3px;
     272        border-radius: 3px;
     273        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     274        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     275        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     276        color: #eee;
     277        cursor: pointer;
     278        font-size: 15px;
     279        line-height: 24px;
     280        padding: 5px 42px 5px 22px;
     281        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     282}
     283
     284/*--------------------------------------------------------------
     2854.0 Blocks - Formatting
     286--------------------------------------------------------------*/
     287
     288/* Code */
     289
     290.wp-block-code {
     291        background: transparent;
     292        border: 0;
     293        padding: 0;
     294}
     295
     296/* Custom HTML */
     297
     298.wp-block-html .CodeMirror-lines pre {
     299        background-color: inherit;
     300        border: inherit;
     301        font-size: inherit;
     302        line-height: inherit;
     303        margin: inherit;
     304        padding: inherit;
     305}
     306
     307/* Pullquote */
     308
     309.edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p {
     310        font-family: Georgia, "Bitstream Charter", serif;
     311        font-style: italic;
     312        font-weight: normal;
     313}
     314
     315/* Table */
     316
     317.editor-block-list__block .wp-block-table th,
     318.editor-block-list__block .wp-block-table td {
     319        padding: 0;
     320}
     321
     322
     323/*--------------------------------------------------------------
     3245.0 Blocks - Layout Elements
     325--------------------------------------------------------------*/
     326
     327/* Buttons */
     328
     329.wp-block-button .wp-block-button__link {
     330        background: #222;
     331        border: none;
     332        -moz-border-radius: 3px;
     333        border-radius: 3px;
     334        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     335        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     336        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     337        color: #eee;
     338        cursor: pointer;
     339        font-size: 15px;
     340        line-height: 24px;
     341        margin: 20px 0;
     342        padding: 5px 42px 5px 22px;
     343        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     344}
     345
     346/*--------------------------------------------------------------
     3476.0 Blocks - Widgets
     348--------------------------------------------------------------*/
     349
     350/* Comments */
     351
     352.editor-block-list__block ol.wp-block-latest-comments {
     353        margin: 0;
     354        padding: 0;
     355}
     356
     357.wp-block-latest-comments .avatar,
     358.wp-block-latest-comments__comment-avatar {
     359        -moz-border-radius: 3px;
     360        border-radius: 3px;
     361        -webkit-box-shadow: 0 1px 2px #ccc;
     362        -moz-box-shadow: 0 1px 2px #ccc;
     363        box-shadow: 0 1px 2px #ccc;
     364        left: -70px;
     365        padding: 0;
     366        position: absolute;
     367        top: 0;
     368}
     369
     370.wp-block-latest-comments__comment,
     371.wp-block-latest-comments__comment-excerpt,
     372.wp-block-latest-comments__comment-excerpt p {
     373        font-size: 15px;
     374}
     375
     376.wp-block-latest-comments__comment-excerpt p:last-child {
     377        margin-bottom: 0;
     378}
     379
     380.wp-block-latest-comments__comment-meta,
     381.wp-block-latest-comments__comment-date {
     382        color: #666;
     383        font-size: 12px;
     384        line-height: 2.2em;
     385}
     386
     387.wp-block-latest-comments__comment-meta a {
     388        font-weight: bold;
     389}
     390
     391.wp-block-latest-comments .wp-block-latest-comments__comment {
     392        background: #f6f6f6;
     393        border: 1px solid #ddd;
     394        -moz-border-radius: 3px;
     395        border-radius: 3px;
     396        margin: 0 0 1.625em 70px;
     397        padding: 1.5em;
     398        position: relative;
     399}
     400
     401.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
     402.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
     403        margin-left: 0;
     404}
     405
     406.wp-block-latest-comments .wp-block-latest-comments__comment:before {
     407        content: url(../images/comment-arrow.png);
     408        left: -21px;
     409        position: absolute;
     410}

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

     
    8282        // This theme styles the visual editor with editor-style.css to match the theme style.
    8383        add_editor_style();
    8484
     85        // Load regular editor styles into the new block-based editor.
     86        add_theme_support( 'editor-styles' );
     87
     88        // Load default block styles.
     89        add_theme_support( 'wp-block-styles' );
     90
    8591        // Load up our theme options page and related code.
    8692        require( get_template_directory() . '/inc/theme-options.php' );
    8793
    … …  
    232238}
    233239endif; // twentyeleven_setup
    234240
     241/**
     242 * Enqueue scripts and styles for front end.
     243 *
     244 * @since Twenty Eleven 2.9
     245 */
     246function twentyeleven_scripts_styles() {
     247        // Theme block stylesheet.
     248        wp_enqueue_style( 'twentyeleven-block-style', get_theme_file_uri( '/css/blocks.css' ), array(), '1.0' );
     249}
     250add_action( 'wp_enqueue_scripts', 'twentyeleven_scripts_styles' );
     251
     252/**
     253 * Enqueue editor styles for Gutenberg
     254 *
     255 * @since Twenty Eleven 2.9
     256 */
     257function twentyeleven_block_editor_styles() {
     258        // Block styles.
     259        wp_enqueue_style( 'twentyeleven-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' );
     260}
     261add_action( 'enqueue_block_editor_assets', 'twentyeleven_block_editor_styles' );
     262
    235263if ( ! function_exists( 'twentyeleven_header_style' ) ) :
    236264/**
    237265 * Styles the header image and text displayed on the blog.