WordPress.org

Make WordPress Core

Changeset 44402 for trunk


Ignore:
Timestamp:
01/05/2019 09:15:43 PM (10 months ago)
Author:
laurelfulford
Message:

Twenty Seventeen: Improve selectors for block editor custom colors.

Twenty Seventeen's original styles for the block editor custom colors had some issues: they weren't being applied to the button blocks due to lack of specificity, and when applied to paragraph blocks, there was no padding in the editor. This update makes sure the colors and related styles work as expected.

Fixes #45426.

Location:
trunk/src/wp-content/themes/twentyseventeen/assets/css
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/assets/css/blocks.css

    r44381 r44402  
    77>>> TABLE OF CONTENTS:
    88----------------------------------------------------------------
    9 1.0 Blocks - Common Blocks
    10 2.0 Blocks - Formatting
    11 3.0 Blocks - Layout Elements
    12 4.0 Blocks - Widgets
     91.0 General Block Styles
     102.0 Blocks - Common Blocks
     113.0 Blocks - Formatting
     124.0 Blocks - Layout Elements
     135.0 Blocks - Widgets
     146.0 Blocks - Colors
    1315--------------------------------------------------------------*/
    1416
     
    188190
    189191.wp-block-button .wp-block-button__link {
    190     background-color: #222;
    191192    -webkit-box-shadow: none;
    192193    box-shadow: none;
    193     color: #fff;
    194194    display: inline-block;
    195195    font-size: 14px;
     
    204204}
    205205
    206 .wp-block-button .wp-block-button__link:hover,
    207 .wp-block-button .wp-block-button__link:focus {
     206.entry-content .wp-block-button__link {
     207    background-color: #222;
     208    color: #fff;
     209}
     210
     211.entry-content .is-style-outline .wp-block-button__link:not(.has-background) {
     212    background-color: transparent;
     213}
     214
     215.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
     216    color: #222;
     217}
     218
     219.colors-dark .wp-block-button__link {
     220    background-color: #fff;
     221    color: #000;
     222}
     223
     224.entry-content .wp-block-button__link:hover,
     225.entry-content .wp-block-button__link:focus,
     226.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
     227.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
    208228    background-color: #767676;
    209229    -webkit-box-shadow: none;
    210230    box-shadow: none;
     231    color: #fff;
     232}
     233
     234.colors-dark .entry-content .wp-block-button__link:hover,
     235.colors-dark .entry-content .wp-block-button__link:focus,
     236.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
     237.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
     238    background-color: #bbb;
     239    color: #000;
     240}
     241
     242.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
     243    color: #fff;
     244}
     245
     246.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
     247.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
     248    color: #222;
     249}
     250
     251.colors-custom .entry-content .wp-block-button__link,
     252.colors-custom .entry-content .wp-block-button__link:hover,
     253.colors-custom .entry-content .wp-block-button__link:focus,
     254.colors-dark .entry-content .wp-block-button__link,
     255.colors-dark .entry-content .wp-block-button__link:hover,
     256.colors-dark .entry-content .wp-block-button__link:focus {
     257    -webkit-box-shadow: none;
     258    box-shadow: none;
     259}
     260
     261.colors-custom .entry-content .wp-block-button__link:hover,
     262.colors-custom .entry-content .wp-block-button__link:focus {
     263    color: #fff;
    211264}
    212265
     
    294347    font-size: 0.875rem;
    295348}
     349
     350/*--------------------------------------------------------------
     3516.0 Blocks - Colors
     352--------------------------------------------------------------*/
     353
     354.entry-content .has-pale-pink-color {
     355    color: #f78da7;
     356}
     357
     358.entry-content .has-pale-pink-background-color,
     359.wp-block-button.is-style-outline .has-pale-pink-background-color:link {
     360    background-color: #f78da7;
     361}
     362
     363.entry-content .has-vivid-red-color {
     364    color: #cf2e2e;
     365}
     366
     367.entry-content .has-vivid-red-background-color,
     368.wp-block-button.is-style-outline .has-vivid-red-background-color:link {
     369    background-color: #cf2e2e;
     370}
     371
     372.entry-content .has-luminous-vivid-orange-color {
     373    color: #ff6900;
     374}
     375
     376.entry-content .has-luminous-vivid-orange-background-color,
     377.wp-block-button.is-style-outline .has-luminous-vivid-orange-background-color:link {
     378    background-color: #ff6900;
     379}
     380
     381.entry-content .has-luminous-vivid-amber-color {
     382    color: #fcb900;
     383}
     384
     385.entry-content .has-luminous-vivid-amber-background-color,
     386.wp-block-button.is-style-outline .has-luminous-vivid-amber-background-color:link {
     387    background-color: #fcb900;
     388}
     389
     390.entry-content .has-light-green-cyan-color {
     391    color: #7bdcb5;
     392}
     393
     394.entry-content .has-light-green-cyan-background-color,
     395.wp-block-button.is-style-outline .has-light-green-cyan-background-color:link {
     396    background-color: #7bdcb5;
     397}
     398
     399.entry-content .has-vivid-green-cyan-color {
     400    color: #00d084;
     401}
     402
     403.entry-content .has-vivid-green-cyan-background-color,
     404.wp-block-button.is-style-outline .has-vivid-green-cyan-background-color:link {
     405    background-color: #00d084;
     406}
     407
     408.entry-content .has-pale-cyan-blue-color {
     409    color: #8ed1fc;
     410}
     411
     412.entry-content .has-pale-cyan-blue-background-color,
     413.wp-block-button.is-style-outline .has-pale-cyan-blue-background-color:link {
     414    background-color: #8ed1fc;
     415}
     416
     417.entry-content .has-vivid-cyan-blue-color {
     418    color: #0693e3;
     419}
     420
     421.entry-content .has-vivid-cyan-blue-background-color,
     422.wp-block-button.is-style-outline .has-vivid-cyan-blue-background-color:link {
     423    background-color: #0693e3;
     424}
     425
     426.entry-content .has-very-light-gray-color {
     427    color: #eee;
     428}
     429
     430.entry-content .has-very-light-gray-background-color,
     431.wp-block-button.is-style-outline .has-very-light-gray-background-color:link {
     432    background-color: #eee;
     433}
     434
     435.entry-content .has-cyan-bluish-gray-color {
     436    color: #abb8c3;
     437}
     438
     439.entry-content .has-cyan-bluish-gray-background-color,
     440.wp-block-button.is-style-outline .has-cyan-bluish-gray-background-color:link {
     441    background-color: #abb8c3;
     442}
     443
     444.entry-content .has-very-dark-gray-color {
     445    color: #313131;
     446}
     447
     448.entry-content .has-very-dark-gray-background-color,
     449.wp-block-button.is-style-outline .has-very-dark-gray-background-color:link {
     450    background-color: #313131;
     451}
  • trunk/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css

    r44381 r44402  
    493493}
    494494
     495.wp-block-paragraph.has-background {
     496    padding: 20px 30px;
     497}
     498
    495499/* Gallery */
    496500
     
    708712
    709713.wp-block-button .wp-block-button__link {
    710     background-color: #222;
    711714    -webkit-box-shadow: none;
    712715    box-shadow: none;
    713     color: #fff;
    714716    display: inline-block;
    715717    font-size: 14px;
     
    724726}
    725727
     728.wp-block-button__link {
     729    background-color: #222;
     730    color: #fff;
     731}
     732
     733.is-style-outline .wp-block-button__link {
     734    color: #222;
     735}
     736
    726737/* Media & Text */
    727738
Note: See TracChangeset for help on using the changeset viewer.