WordPress.org

Make WordPress Core

Changeset 44425 for branches/5.0


Ignore:
Timestamp:
01/07/2019 03:55:06 PM (10 months ago)
Author:
SergeyBiryukov
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.

Props laurelfulford.
Merges [44402] to the 5.0 branch.
Fixes #45426.

Location:
branches/5.0
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0

  • branches/5.0/src/wp-content/themes/twentyseventeen/assets/css/blocks.css

    r44213 r44425  
    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-border-radius: 2px;
    192193    border-radius: 2px;
    193194    -webkit-box-shadow: none;
    194195    box-shadow: none;
    195     color: #fff;
    196196    display: inline-block;
    197197    font-size: 14px;
     
    206206}
    207207
    208 .wp-block-button .wp-block-button__link:hover,
    209 .wp-block-button .wp-block-button__link:focus {
     208.entry-content .wp-block-button__link {
     209    background-color: #222;
     210    color: #fff;
     211}
     212
     213.entry-content .is-style-outline .wp-block-button__link:not(.has-background) {
     214    background-color: transparent;
     215}
     216
     217.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
     218    color: #222;
     219}
     220
     221.colors-dark .wp-block-button__link {
     222    background-color: #fff;
     223    color: #000;
     224}
     225
     226.entry-content .wp-block-button__link:hover,
     227.entry-content .wp-block-button__link:focus,
     228.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
     229.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
    210230    background-color: #767676;
    211231    -webkit-box-shadow: none;
    212232    box-shadow: none;
     233    color: #fff;
     234}
     235
     236.colors-dark .entry-content .wp-block-button__link:hover,
     237.colors-dark .entry-content .wp-block-button__link:focus,
     238.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
     239.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus {
     240    background-color: #bbb;
     241    color: #000;
     242}
     243
     244.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
     245    color: #fff;
     246}
     247
     248.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
     249.colors-dark .entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
     250    color: #222;
     251}
     252
     253.colors-custom .entry-content .wp-block-button__link,
     254.colors-custom .entry-content .wp-block-button__link:hover,
     255.colors-custom .entry-content .wp-block-button__link:focus,
     256.colors-dark .entry-content .wp-block-button__link,
     257.colors-dark .entry-content .wp-block-button__link:hover,
     258.colors-dark .entry-content .wp-block-button__link:focus {
     259    -webkit-box-shadow: none;
     260    box-shadow: none;
     261}
     262
     263.colors-custom .entry-content .wp-block-button__link:hover,
     264.colors-custom .entry-content .wp-block-button__link:focus {
     265    color: #fff;
    213266}
    214267
     
    296349    font-size: 0.875rem;
    297350}
     351
     352/*--------------------------------------------------------------
     3536.0 Blocks - Colors
     354--------------------------------------------------------------*/
     355
     356.entry-content .has-pale-pink-color {
     357    color: #f78da7;
     358}
     359
     360.entry-content .has-pale-pink-background-color,
     361.wp-block-button.is-style-outline .has-pale-pink-background-color:link {
     362    background-color: #f78da7;
     363}
     364
     365.entry-content .has-vivid-red-color {
     366    color: #cf2e2e;
     367}
     368
     369.entry-content .has-vivid-red-background-color,
     370.wp-block-button.is-style-outline .has-vivid-red-background-color:link {
     371    background-color: #cf2e2e;
     372}
     373
     374.entry-content .has-luminous-vivid-orange-color {
     375    color: #ff6900;
     376}
     377
     378.entry-content .has-luminous-vivid-orange-background-color,
     379.wp-block-button.is-style-outline .has-luminous-vivid-orange-background-color:link {
     380    background-color: #ff6900;
     381}
     382
     383.entry-content .has-luminous-vivid-amber-color {
     384    color: #fcb900;
     385}
     386
     387.entry-content .has-luminous-vivid-amber-background-color,
     388.wp-block-button.is-style-outline .has-luminous-vivid-amber-background-color:link {
     389    background-color: #fcb900;
     390}
     391
     392.entry-content .has-light-green-cyan-color {
     393    color: #7bdcb5;
     394}
     395
     396.entry-content .has-light-green-cyan-background-color,
     397.wp-block-button.is-style-outline .has-light-green-cyan-background-color:link {
     398    background-color: #7bdcb5;
     399}
     400
     401.entry-content .has-vivid-green-cyan-color {
     402    color: #00d084;
     403}
     404
     405.entry-content .has-vivid-green-cyan-background-color,
     406.wp-block-button.is-style-outline .has-vivid-green-cyan-background-color:link {
     407    background-color: #00d084;
     408}
     409
     410.entry-content .has-pale-cyan-blue-color {
     411    color: #8ed1fc;
     412}
     413
     414.entry-content .has-pale-cyan-blue-background-color,
     415.wp-block-button.is-style-outline .has-pale-cyan-blue-background-color:link {
     416    background-color: #8ed1fc;
     417}
     418
     419.entry-content .has-vivid-cyan-blue-color {
     420    color: #0693e3;
     421}
     422
     423.entry-content .has-vivid-cyan-blue-background-color,
     424.wp-block-button.is-style-outline .has-vivid-cyan-blue-background-color:link {
     425    background-color: #0693e3;
     426}
     427
     428.entry-content .has-very-light-gray-color {
     429    color: #eee;
     430}
     431
     432.entry-content .has-very-light-gray-background-color,
     433.wp-block-button.is-style-outline .has-very-light-gray-background-color:link {
     434    background-color: #eee;
     435}
     436
     437.entry-content .has-cyan-bluish-gray-color {
     438    color: #abb8c3;
     439}
     440
     441.entry-content .has-cyan-bluish-gray-background-color,
     442.wp-block-button.is-style-outline .has-cyan-bluish-gray-background-color:link {
     443    background-color: #abb8c3;
     444}
     445
     446.entry-content .has-very-dark-gray-color {
     447    color: #313131;
     448}
     449
     450.entry-content .has-very-dark-gray-background-color,
     451.wp-block-button.is-style-outline .has-very-dark-gray-background-color:link {
     452    background-color: #313131;
     453}
  • branches/5.0/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css

    r44235 r44425  
    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-border-radius: 2px;
    712715    border-radius: 2px;
    713716    -webkit-box-shadow: none;
    714717    box-shadow: none;
    715     color: #fff;
    716718    display: inline-block;
    717719    font-size: 14px;
     
    726728}
    727729
     730.wp-block-button__link {
     731    background-color: #222;
     732    color: #fff;
     733}
     734
     735.is-style-outline .wp-block-button__link {
     736    color: #222;
     737}
     738
    728739/* Media & Text */
    729740
Note: See TracChangeset for help on using the changeset viewer.