WordPress.org
Get WordPress

Make WordPress Core

Changeset 44381


Ignore:
Timestamp:
01/02/2019 03:52:07 AM (8 years ago)
Author:
laurelfulford
Message:

Bundled Themes: Make sure button blocks respect settings.

When the original block editor styles were added to the existing default themes, the button blocks were styled to match how each theme styled the button tag.

However, the styles should respect the block editor's default style, "Rounded", and allow switching to the other styles, like "Outlined" and "Square".

Fixes #45541.

Location:
trunk/src/wp-content/themes
Files:
14 edited

Legend:

Unmodified
Added
Removed

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

    r44313 r44381  
    233233
    234234.wp-block-button .wp-block-button__link {
    235         border: none;
    236         -moz-border-radius: 3px;
    237         border-radius: 3px;
    238235        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    239236        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    … …  
    243240        margin: 20px 0;
    244241        padding: 5px 22px;
     242        text-decoration: none;
    245243        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    246244}
    247245
    248 .wp-block-button__link {
     246.is-style-outline .wp-block-button__link:not(.has-text-color) {
     247        color: #222;
     248        text-shadow: none;
     249}
     250
     251.wp-block-button__link,
     252.wp-block-button .wp-block-button__link:hover,
     253.wp-block-button .is-style-outline .wp-block-button__link:hover {
    249254        background: #222;
    250255        color: #eee;

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

    r44313 r44381  
    372372
    373373.wp-block-button .wp-block-button__link {
    374         background: #222;
    375         border: none;
    376         -moz-border-radius: 3px;
    377         border-radius: 3px;
    378374        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    379375        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    380376        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    381         color: #eee;
    382377        cursor: pointer;
    383378        font-size: 15px;
    … …  
    386381        padding: 5px 22px;
    387382        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
     383}
     384
     385.wp-block-button__link {
     386        background: #222;
     387        color: #eee;
     388}
     389
     390.is-style-outline .wp-block-button__link {
     391        color: #222;
     392}
     393
     394.wp-block-button__link.has-text-color {
     395        text-shadow: none;
    388396}
    389397

  • trunk/src/wp-content/themes/twentyfifteen/css/blocks.css

    r44313 r44381  
    385385
    386386.wp-block-button .wp-block-button__link {
    387         border: 0;
    388         border-radius: 0;
    389387        cursor: pointer;
    390388        font-family: "Noto Sans", sans-serif;
    … …  
    398396}
    399397
     398.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link {
     399        border: 0;
     400}
     401
     402.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
     403        border-bottom: 2px solid;
     404}
     405
    400406.wp-block-button__link {
    401407        background-color: #333;
    … …  
    403409}
    404410
     411.is-style-outline .wp-block-button__link:not(.has-text-color) {
     412        color: #333;
     413}
     414
    405415.wp-block-button__link:hover,
    406 .wp-block-button__link:focus {
     416.wp-block-button__link:focus,
     417.is-style-outline .wp-block-button__link:hover,
     418.is-style-outline .wp-block-button__link:focus {
    407419        background-color: #707070;
    408420        background-color: rgba(51, 51, 51, 0.7);

  • trunk/src/wp-content/themes/twentyfifteen/css/editor-blocks.css

    r44313 r44381  
    709709
    710710.wp-block-button .wp-block-button__link {
    711         background-color: #333;
    712         border: 0;
    713         border-radius: 0;
    714         color: #fff;
    715711        cursor: pointer;
    716712        font-family: "Noto Sans", sans-serif;
    … …  
    723719}
    724720
     721.wp-block-button__link {
     722        background-color: #333;
     723        color: #fff;
     724}
     725
     726.is-style-outline .wp-block-button__link {
     727        color: #333;
     728}
     729
    725730@media screen and (min-width: 46.25em) {
    726731        .wp-block-button .wp-block-button__link {

  • trunk/src/wp-content/themes/twentyfourteen/css/blocks.css

    r44378 r44381  
    140140        background-color: #24890d;
    141141        border: 0;
    142         border-radius: 2px;
    143142        color: #fff;
    144143        font-size: 12px;
    … …  
    222221
    223222.wp-block-button .wp-block-button__link {
    224         border: 0;
    225         border-radius: 2px;
    226223        font-size: 12px;
    227224        font-weight: 700;
    … …  
    238235}
    239236
     237.is-style-outline .wp-block-button__link:not(.has-text-color) {
     238        color: #24890d;
     239}
     240
    240241.wp-block-button__link:hover,
    241 .wp-block-button__link:focus {
     242.wp-block-button__link:focus,
     243.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
     244.is-style-outline .wp-block-button__link:not(.has-text-color):focus {
    242245        background-color: #41a62a;
    243246        color: #fff;

  • trunk/src/wp-content/themes/twentyfourteen/css/editor-blocks.css

    r44313 r44381  
    390390
    391391.wp-block-button .wp-block-button__link {
    392         background-color: #24890d;
    393         border: 0;
    394         border-radius: 2px;
    395         color: #fff;
    396392        font-size: 12px;
    397393        font-weight: 700;
    … …  
    401397}
    402398
     399.wp-block-button__link {
     400        background-color: #24890d;
     401        color: #fff;
     402}
     403
     404.is-style-outline .wp-block-button__link {
     405        color: #24890d;
     406}
     407
    403408.editor-block-list__block .wp-block-button .mce-content-body {
    404409        line-height: normal;

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

    r44313 r44381  
    189189.wp-block-button .wp-block-button__link {
    190190        background-color: #222;
    191         -webkit-border-radius: 2px;
    192         border-radius: 2px;
    193191        -webkit-box-shadow: none;
    194192        box-shadow: none;

  • trunk/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css

    r44313 r44381  
    709709.wp-block-button .wp-block-button__link {
    710710        background-color: #222;
    711         -webkit-border-radius: 2px;
    712         border-radius: 2px;
    713711        -webkit-box-shadow: none;
    714712        box-shadow: none;

  • trunk/src/wp-content/themes/twentysixteen/css/blocks.css

    r44313 r44381  
    233233
    234234.wp-block-button .wp-block-button__link {
    235         border: 0;
    236         border-radius: 2px;
     235        box-shadow: none;
    237236        font-family: Montserrat, "Helvetica Neue", sans-serif;
    238237        font-weight: 700;
    239238        letter-spacing: 0.046875em;
    240239        line-height: 1;
    241         padding: 0.84375em 0.875em 0.78125em;
     240        padding: 0.84375em 1.3125em 0.78125em;
    242241        text-transform: uppercase;
    243242}
    … …  
    248247}
    249248
     249.entry-content .is-style-outline .wp-block-button__link:not(.has-background) {
     250        background: transparent;
     251}
     252
     253.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
     254        color: #1a1a1a;
     255}
     256
    250257.entry-content .wp-block-button__link:hover,
    251 .entry-content .wp-block-button__link:focus {
     258.entry-content .wp-block-button__link:focus,
     259.entry-content .is-style-outline .wp-block-button__link:not(.has-background):hover,
     260.entry-content .is-style-outline .wp-block-button__link:not(.has-background):focus,
     261.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
     262.entry-content .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
    252263        background: #007acc;
    253264        color: #fff;

  • trunk/src/wp-content/themes/twentysixteen/css/editor-blocks.css

    r44313 r44381  
    544544
    545545.wp-block-button .wp-block-button__link {
    546         background: #1a1a1a;
    547         border: 0;
    548         border-radius: 2px;
    549         color: #fff;
    550546        font-family: Montserrat, "Helvetica Neue", sans-serif;
    551547        font-weight: 700;
    552548        letter-spacing: 0.046875em;
    553549        line-height: 1;
    554         padding: 0.84375em 0.875em 0.78125em;
     550        padding: 0.84375em 1.3125em 0.78125em;
    555551        text-transform: uppercase;
     552}
     553
     554.wp-block-button__link {
     555        background: #1a1a1a;
     556        color: #fff;
     557}
     558
     559.is-style-outline .wp-block-button__link {
     560        color: #1a1a1a;
    556561}
    557562

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

    r44313 r44381  
    202202        background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
    203203        border: none;
     204        border-radius: 2px;
    204205        border-bottom: 3px solid #b93207;
    205         border-radius: 2px;
    206206        color: #fff;
    207207        display: inline-block;
    … …  
    337337
    338338.wp-block-button .wp-block-button__link {
    339         border: none;
    340339        border-bottom: 3px solid #b93207;
    341         border-radius: 2px;
    342340        display: inline-block;
    343341        font-size: 16px;
    … …  
    351349}
    352350
    353 .entry-content .wp-block-button__link:not(.has-background) {
     351.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
    354352        background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
    355353        background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
    … …  
    357355
    358356.entry-content .wp-block-button__link:hover,
    359 .entry-content .wp-block-button__link:focus {
     357.entry-content .wp-block-button__link:focus,
     358.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
     359.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus {
    360360        background: #ed6a31;
    361361        color: #fff;
    362362}
    363363
     364.wp-block-button.is-style-outline .wp-block-button__link {
     365        background-color: inherit;
     366        border-color: inherit;
     367        border-width: 2px;
     368}
     369
     370.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
     371        color: #ed6a31;
     372}
     373
    364374.entry-content .wp-block-button__link:not(.has-background):hover,
    365 .entry-content .wp-block-button__link:not(.has-background):hover {
     375.entry-content .wp-block-button__link:not(.has-background):hover,
     376.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
    366377        background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
    367378        background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */

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

    r44313 r44381  
    258258        border: none;
    259259        border-bottom: 3px solid #b93207;
    260         border-radius: 2px;
    261260        color: #fff;
    262261        display: inline-block;
    … …  
    327326
    328327.wp-block-button .wp-block-button__link {
    329         background: #e05d22;
    330         border: none;
    331         border-bottom: 3px solid #b93207;
    332         border-radius: 2px;
    333         color: #fff;
    334328        display: inline-block;
    335329        font-size: 16px;
    … …  
    339333}
    340334
    341 .wp-block-button__link:not(.has-background) {
     335.wp-block-button__link {
     336        background: #e05d22;
     337        border-bottom: 3px solid #b93207;
     338        color: #fff;
     339}
     340
     341.is-style-outline .wp-block-button__link {
     342        border-width: 2px;
     343        color: #e05d22;
     344}
     345
     346.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
    342347        background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
    343348        background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */

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

    r44313 r44381  
    247247.wp-block-button .wp-block-button__link {
    248248        border: 1px solid #d2d2d2;
    249         border-radius: 3px;
    250249        font-family: inherit;
    251250        font-size: 11px;
    … …  
    263262}
    264263
     264.wp-block-button.is-style-outline .wp-block-button__link,
     265.wp-block-button.is-style-outline .wp-block-button__link:visited {
     266        background-color: inherit;
     267        border-color: inherit;
     268}
     269
    265270.entry-content .wp-block-button__link:hover,
    266271.entry-content .wp-block-button__link:visited:hover,
    … …  
    275280}
    276281
    277 .wp-block-button__link:not(.has-background) {
     282.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
    278283        background-repeat: repeat-x;
    279284        background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);

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

    r44313 r44381  
    235235}
    236236
    237 .wp-block-file .wp-block-file__button,
    238 .wp-block-button .wp-block-file__button:hover {
     237.wp-block-file .wp-block-file__button {
    239238        background-color: #e6e6e6;
    240239        background-repeat: repeat-x;
    … …  
    343342.wp-block-button .wp-block-button__link {
    344343        border: 1px solid #d2d2d2;
    345         border-radius: 3px;
    346344        font-family: inherit;
    347345        font-size: 11px;
    … …  
    359357}
    360358
    361 .wp-block-button .wp-block-button__link:not(.has-background) {
     359.wp-block-button.is-style-outline .wp-block-button__link {
     360        background-color: inherit;
     361        border-color: inherit;
     362}
     363
     364.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
    362365        background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
    363366        background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
Note: See TracChangeset for help on using the changeset viewer.