WordPress.org
Get WordPress

Make WordPress Core

Changeset 46714


Ignore:
Timestamp:
11/12/2019 01:44:51 AM (7 years ago)
Author:
SergeyBiryukov
Message:

Bundled Themes: Update Twenty Twenty.

  • Add a11y-friendly default text-colors when selecting a background-color.
  • Remove margins for the group block when a background-color is set.
  • Excluding pullquote block from width resize rules.

This brings Twenty Twenty in sync with GitHub. For a full list of changes since [46711], see ​https://github.com/WordPress/twentytwenty/compare/ab5fa23...162edc0.

Reviewed by azaozz, SergeyBiryukov.
Props allancole, karmatosed.
See #48110, #48386, #48450, #48505.
Merges [46713] to the 5.3 branch.
Fixes #48557.

Location:
branches/5.3
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • branches/5.3

  • branches/5.3/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

    r46712 r46714  
    163163/* CUSTOM COLORS */
    164164
    165 .has-accent-color {
     165:root .has-accent-color {
    166166        color: #cd2653;
    167167}
    168168
    169 .has-accent-background-color {
     169:root .has-accent-background-color {
    170170        background-color: #cd2653;
    171 }
    172 
    173 .has-secondary-color {
     171        color: #fff;
     172}
     173
     174:root .has-primary-color {
     175        color: #000;
     176}
     177
     178:root .has-primary-background-color {
     179        background-color: #000;
     180        color: #f5efe0;
     181}
     182
     183:root .has-secondary-color {
    174184        color: #6d6d6d;
    175185}
    176186
    177 .has-secondary-background-color {
     187:root .has-secondary-background-color {
    178188        background-color: #6d6d6d;
    179 }
    180 
    181 .has-subtle-background-color {
     189        color: #fff;
     190}
     191
     192:root .has-subtle-background-color {
    182193        color: #dcd7ca;
    183194}
    184195
    185 .has-subtle-background-background-color {
     196:root .has-subtle-background-background-color {
    186197        background-color: #dcd7ca;
    187 }
    188 
    189 .has-background-color {
    190         color: #6d6d6d;
    191 }
    192 
    193 .has-background-background-color {
    194         background-color: #6d6d6d;
     198        color: #000;
     199}
     200
     201:root .has-background-color {
     202        color: #f5efe0;
     203}
     204
     205:root .has-background-background-color {
     206        background-color: #f5efe0;
     207        color: #000;
    195208}
    196209
    … …  
    199212.has-black-background-color {
    200213        background-color: #000;
     214        color: #fff;
    201215}
    202216
    203217.has-white-background-color {
    204218        background-color: #fff;
     219        color: #000;
    205220}
    206221

  • branches/5.3/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css

    r46712 r46714  
    163163/* CUSTOM COLORS */
    164164
    165 .has-accent-color {
     165:root .has-accent-color {
    166166        color: #cd2653;
    167167}
    168168
    169 .has-accent-background-color {
     169:root .has-accent-background-color {
    170170        background-color: #cd2653;
    171 }
    172 
    173 .has-secondary-color {
     171        color: #fff;
     172}
     173
     174:root .has-primary-color {
     175        color: #000;
     176}
     177
     178:root .has-primary-background-color {
     179        background-color: #000;
     180        color: #f5efe0;
     181}
     182
     183:root .has-secondary-color {
    174184        color: #6d6d6d;
    175185}
    176186
    177 .has-secondary-background-color {
     187:root .has-secondary-background-color {
    178188        background-color: #6d6d6d;
    179 }
    180 
    181 .has-subtle-background-color {
     189        color: #fff;
     190}
     191
     192:root .has-subtle-background-color {
    182193        color: #dcd7ca;
    183194}
    184195
    185 .has-subtle-background-background-color {
     196:root .has-subtle-background-background-color {
    186197        background-color: #dcd7ca;
    187 }
    188 
    189 .has-background-color {
    190         color: #6d6d6d;
    191 }
    192 
    193 .has-background-background-color {
    194         background-color: #6d6d6d;
     198        color: #000;
     199}
     200
     201:root .has-background-color {
     202        color: #f5efe0;
     203}
     204
     205:root .has-background-background-color {
     206        background-color: #f5efe0;
     207        color: #000;
    195208}
    196209
    … …  
    199212.has-black-background-color {
    200213        background-color: #000;
     214        color: #fff;
    201215}
    202216
    203217.has-white-background-color {
    204218        background-color: #fff;
     219        color: #000;
    205220}
    206221

  • branches/5.3/src/wp-content/themes/twentytwenty/style-rtl.css

    r46712 r46714  
    26492649:root .has-accent-background-color {
    26502650        background-color: #cd2653;
     2651        color: #fff;
    26512652}
    26522653
    … …  
    26572658:root .has-primary-background-color {
    26582659        background-color: #000;
     2660        color: #f5efe0;
    26592661}
    26602662
    … …  
    26652667:root .has-secondary-background-color {
    26662668        background-color: #6d6d6d;
     2669        color: #fff;
    26672670}
    26682671
    … …  
    26732676:root .has-subtle-background-background-color {
    26742677        background-color: #dcd7ca;
     2678        color: #000;
    26752679}
    26762680
    … …  
    26812685:root .has-background-background-color {
    26822686        background-color: #f5efe0;
     2687        color: #000;
    26832688}
    26842689
    … …  
    30493054.wp-block-group.has-background {
    30503055        padding: 2rem;
     3056        margin-bottom: 0;
     3057        margin-top: 0;
    30513058}
    30523059
    … …  
    44824489        [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
    44834490        [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
    4484         [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     4491        [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft:not(.wp-block-pullquote),
    44854492        [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
    44864493        [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
    … …  
    45004507        [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
    45014508        [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
    4502         [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     4509        [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright:not(.wp-block-pullquote),
    45034510        [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
    45044511        [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
    … …  
    50225029        .wp-block-group.has-background {
    50235030                padding: 4rem;
     5031                margin-top: 0;
     5032                margin-bottom: 0;
    50245033        }
    50255034
    … …  
    51315140        }
    51325141
    5133         .entry-content > .alignwide,
    5134         .entry-content > .alignfull {
     5142        .entry-content > .alignwide:not(.wp-block-group),
     5143        .entry-content > .alignfull:not(.wp-block-group) {
    51355144                margin-bottom: 6rem;
    51365145                margin-top: 6rem;
    … …  
    56225631        .entry-content > .wp-block-group.alignfull.has-background {
    56235632                padding: 8rem 4rem;
     5633                margin-bottom: 0;
     5634                margin-top: 0;
    56245635        }
    56255636
    … …  
    56895700        }
    56905701
    5691         .entry-content > .alignwide,
    5692         .entry-content > .alignfull {
     5702        .entry-content > .alignwide:not(.wp-block-group),
     5703        .entry-content > .alignfull:not(.wp-block-group) {
    56935704                margin-bottom: 8rem;
    56945705                margin-top: 8rem;
    … …  
    58425853        .entry-content > .wp-block-group.alignfull.has-background {
    58435854                padding: 8rem 6rem;
     5855                margin-bottom: 0;
     5856                margin-top: 0;
    58445857        }
    58455858
    … …  
    59926005        /* BLOCK: PULLQUOTE */
    59936006
    5994         .wp-block-pullquote.alignleft::before,
    5995         .wp-block-pullquote.alignright::before {
    5996                 position: absolute;
    5997                 top: -0.4rem;
    5998         }
    5999 
    60006007        .wp-block-pullquote.is-style-solid-color.alignleft::before,
    60016008        .wp-block-pullquote.is-style-solid-color.alignright::before {
    60026009                top: 0;
    60036010        }
    6004 
    6005         .wp-block-pullquote.alignleft::before {
    6006                 left: calc(100% + 1.5rem);
    6007         }
    6008 
    6009         .wp-block-pullquote.alignright::before {
    6010                 right: calc(100% + 1.5rem);
    6011         }
    6012 }
     6011}

  • branches/5.3/src/wp-content/themes/twentytwenty/style.css

    r46712 r46714  
    26612661:root .has-accent-background-color {
    26622662        background-color: #cd2653;
     2663        color: #fff;
    26632664}
    26642665
    … …  
    26692670:root .has-primary-background-color {
    26702671        background-color: #000;
     2672        color: #f5efe0;
    26712673}
    26722674
    … …  
    26772679:root .has-secondary-background-color {
    26782680        background-color: #6d6d6d;
     2681        color: #fff;
    26792682}
    26802683
    … …  
    26852688:root .has-subtle-background-background-color {
    26862689        background-color: #dcd7ca;
     2690        color: #000;
    26872691}
    26882692
    … …  
    26932697:root .has-background-background-color {
    26942698        background-color: #f5efe0;
     2699        color: #000;
    26952700}
    26962701
    … …  
    30633068.wp-block-group.has-background {
    30643069        padding: 2rem;
     3070        margin-bottom: 0;
     3071        margin-top: 0;
    30653072}
    30663073
    … …  
    45084515        [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
    45094516        [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
    4510         [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     4517        [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft:not(.wp-block-pullquote),
    45114518        [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
    45124519        [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
    … …  
    45304537        [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
    45314538        [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
    4532         [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     4539        [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright:not(.wp-block-pullquote),
    45334540        [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
    45344541        [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
    … …  
    50565063        .wp-block-group.has-background {
    50575064                padding: 4rem;
     5065                margin-top: 0;
     5066                margin-bottom: 0;
    50585067        }
    50595068
    … …  
    51695178        }
    51705179
    5171         .entry-content > .alignwide,
    5172         .entry-content > .alignfull {
     5180        .entry-content > .alignwide:not(.wp-block-group),
     5181        .entry-content > .alignfull:not(.wp-block-group) {
    51735182                margin-bottom: 6rem;
    51745183                margin-top: 6rem;
    … …  
    56605669        .entry-content > .wp-block-group.alignfull.has-background {
    56615670                padding: 8rem 4rem;
     5671                margin-bottom: 0;
     5672                margin-top: 0;
    56625673        }
    56635674
    … …  
    57275738        }
    57285739
    5729         .entry-content > .alignwide,
    5730         .entry-content > .alignfull {
     5740        .entry-content > .alignwide:not(.wp-block-group),
     5741        .entry-content > .alignfull:not(.wp-block-group) {
    57315742                margin-bottom: 8rem;
    57325743                margin-top: 8rem;
    … …  
    58805891        .entry-content > .wp-block-group.alignfull.has-background {
    58815892                padding: 8rem 6rem;
     5893                margin-bottom: 0;
     5894                margin-top: 0;
    58825895        }
    58835896
    … …  
    60386051        /* BLOCK: PULLQUOTE */
    60396052
    6040         .wp-block-pullquote.alignleft::before,
    6041         .wp-block-pullquote.alignright::before {
    6042                 position: absolute;
    6043                 top: -0.4rem;
    6044         }
    6045 
    60466053        .wp-block-pullquote.is-style-solid-color.alignleft::before,
    60476054        .wp-block-pullquote.is-style-solid-color.alignright::before {
    60486055                top: 0;
    60496056        }
    6050 
    6051         .wp-block-pullquote.alignleft::before {
    6052                 right: calc(100% + 1.5rem);
    6053         }
    6054 
    6055         .wp-block-pullquote.alignright::before {
    6056                 left: calc(100% + 1.5rem);
    6057         }
    6058 }
     6057}
Note: See TracChangeset for help on using the changeset viewer.