Make WordPress Core


Ignore:
Timestamp:
01/20/2021 05:49:28 AM (4 years ago)
Author:
SergeyBiryukov
Message:

Twenty Twenty-One: Clean up Button styles.

This change restructures the Button element styles for better a11y and expected color behaviors. Here what has changed:

  • The button-style() mixin is now the single source or truth for how Button should look site-wide.
    • Button Block, File Block, and Search form Blocks all rely on this one mixin.
    • The same styles is also applied to the <button> element which appears in widgets, the 404 search form and comments form.
  • Improves expected button styles for various conditions and contexts as follows:
    • User color palette selections for Buttons are retained regardless of a parent block’s color settings or dark-mode.
    • Supports both Default/Filled styles and Outline styles.
    • More consistent :hover and :active styles.
    • :focus styles are now always visible and legible.
  • Adds a --local-color color variable to scope color relationships to nested blocks.
  • Reduces selectors in style.css output.
  • 1:1 experience between editor and front end button styles.
  • Properly supports Dark-mode.

Props allancole, poena, scruffian, megphillips91.
Fixes #51927.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss

    r49574 r49987  
    2828    &:not(.is-style-outline) {
    2929
    30         .wp-block-button__link {
     30        .wp-block-button__link:not(:hover):not(:active) {
    3131
    32             &:active {
    33                 color: var(--button--color-text-active) !important;
    34                 background: transparent !important;
    35                 border-color: var(--button--color-background);
     32            // Text colors
     33            &:not(.has-text-color) {
     34                color: var(--global--color-background);
     35
     36                // Nested
     37                .has-background & {
     38                    color: var(--local--color-background, var(--global--color-background));
     39
     40                    &.has-background {
     41                        color: var(--global--color-primary);
     42                    }
     43                }
    3644            }
    3745
    38             &:hover {
    39                 color: var(--button--color-text-hover) !important;
    40                 background: transparent !important;
    41                 border-color: var(--button--color-background);
     46            // Background-colors
     47            &:not(.has-background) {
     48                background-color: var(--global--color-primary);
     49
     50                // Nested
     51                .has-background & {
     52                    background-color: var(--local--color-primary, var(--global--color-primary));
     53                }
    4254            }
     55        }
     56
     57        // Hover Button color should match parent element foreground color
     58        .wp-block-button__link:hover,
     59        .wp-block-button__link:active {
     60            border-color: currentColor !important;
     61            background-color: transparent !important;
     62            color: inherit !important;
     63        }
     64       
     65        // Remove :focus styles in the editor
     66        .wp-block-button__link:focus {
     67            outline-offset: inherit;
     68            outline: inherit;
    4369        }
    4470    }
     
    4773    &.is-style-outline {
    4874
    49         .wp-block-button__link {
    50             color: var(--button--color-background);
    51             background: transparent;
    52             border: var(--button--border-width) solid currentColor;
    53             padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     75        .wp-block-button__link:not(:hover):not(:active) {
    5476
    55             &:active,
    56             &:hover {
    57                 background-color: var(--button--color-background);
    58                 color: var(--button--color-text);
    59                 border-color: var(--button--color-background);
     77            // Border colors
     78            &:not(.has-text-color),
     79            &:not(.has-background),
     80            &.has-background {
     81                border-color: currentColor;
     82            }
     83
     84            // Text colors
     85            &:not(.has-text-color) {
     86                color: var(--global--color-primary);
     87
     88                // Nested
     89                .has-background & {
     90                    color: var(--local--color-primary, var(--global--color-primary));
     91                }
    6092            }
    6193
    6294            &.has-background {
    63                 border-color: var(--button--color-background);
    64 
    65                 &:active,
    66                 &:hover {
    67                     background-color: var(--button--color-background) !important;
     95                // Nested
     96                .has-background &:not(.has-text-color) {
     97                    color: inherit;
    6898                }
    6999            }
    70100
    71             &.has-background:not(.has-text-color) {
    72                 color: var(--global--color-dark-gray);
     101            // Background-colors
     102            &:not(.has-background) {
     103                background-color: transparent;
     104            }
     105        }
     106
     107        // Hover Button color should match default button style
     108        .wp-block-button__link:hover,
     109        .wp-block-button__link:active {
     110
     111            background-color: var(--global--color-primary) !important;
     112            border-color: transparent !important;
     113            color: var(--global--color-background) !important;
     114
     115            .has-background & {
     116                background-color: var(--local--color-primary, var(--global--color-primary)) !important;
     117                color: var(--local--color-background, var(--global--color-background)) !important;
    73118            }
    74119
    75             &.has-background.has-gray-background-color:not(.has-text-color),
    76             &.has-background.has-dark-gray-background-color:not(.has-text-color),
    77             &.has-background.has-black-background-color:not(.has-text-color) {
    78                 color: var(--global--color-white);
     120            .has-text-color & {
     121                color: var(--local--color-background, var(--global--color-background)) !important;
    79122            }
     123        }
    80124
    81             .is-dark-theme & {
    82 
    83                 &:not(.has-text-color) {
    84 
    85                     &.has-background.has-white-background-color,
    86                     &.has-background.has-green-background-color,
    87                     &.has-background.has-blue-background-color,
    88                     &.has-background.has-purple-background-color,
    89                     &.has-background.has-red-background-color,
    90                     &.has-background.has-orange-background-color,
    91                     &.has-background.has-yellow-background-color {
    92                         color: var(--global--color-dark-gray);
    93                     }
    94                 }
    95             }
    96 
    97             &.has-text-color {
    98                 border-color: currentColor;
    99 
    100                 &:active,
    101                 &:hover {
    102                     color: var(--button--color-text) !important;
    103                     border-color: var(--button--color-background);
    104                 }
    105             }
     125        // Remove :focus styles in the editor
     126        .wp-block-button__link:focus {
     127            outline-offset: inherit;
     128            outline: inherit;
    106129        }
    107130    }
Note: See TracChangeset for help on using the changeset viewer.