WordPress.org
Get WordPress

Make WordPress Core

Changeset 44381 for trunk


Ignore:
Timestamp:
01/02/2019 03:52:07 AM (5 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.