WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
03/02/2021 12:50:05 PM (5 years ago)
Author:
SergeyBiryukov
Message:

Twenty Twenty-One: Correct inner container background color for Cover Blocks.

Adjust the background color palette rules so they don't show up on inner containers when they're not supposed to:

  • When an inner container block is present, it only applies them to direct children of the block with the background color assigned.
  • Since the background color should only be applied to the Cover block's overlay, not to the inner container, it opts that specific block out of this rule.

Props dianeco, kjellr, paaljoachim.
Reviewed by ryelle, SergeyBiryukov.
Merges [50466] to the 5.7 branch.
Fixes #52676.

Location:
branches/5.7
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • branches/5.7

  • branches/5.7/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss

    r49987 r50469  
    33.has-black-color[class] {
    44        // Localize CSS-variables to limit relationship scope
    5         [class*="__inner-container"] {
     5        > [class*="__inner-container"] {
    66                --local--color-primary: var(--global--color-black, #000000);
    77                color: var(--local--color-primary);
    … …  
    1212.has-gray-color[class] {
    1313        // Localize CSS-variables to limit relationship scope
    14         [class*="__inner-container"] {
     14        > [class*="__inner-container"] {
    1515                --local--color-primary: var(--global--color-gray, #000000);
    1616                color: var(--local--color-primary);
    … …  
    2121.has-dark-gray-color[class] {
    2222        // Localize CSS-variables to limit relationship scope
    23         [class*="__inner-container"] {
     23        > [class*="__inner-container"] {
    2424                --local--color-primary: var(--global--color-dark-gray, #000000);
    2525                color: var(--local--color-primary);
    … …  
    3030.has-green-color[class] {
    3131        // Localize CSS-variables to limit relationship scope
    32         [class*="__inner-container"] {
     32        > [class*="__inner-container"] {
    3333                --local--color-primary: var(--global--color-green, #FFFFFF);
    3434                color: var(--local--color-primary);
    … …  
    3939.has-blue-color[class] {
    4040        // Localize CSS-variables to limit relationship scope
    41         [class*="__inner-container"] {
     41        > [class*="__inner-container"] {
    4242                --local--color-primary: var(--global--color-blue, #FFFFFF);
    4343                color: var(--local--color-primary);
    … …  
    4848.has-purple-color[class] {
    4949        // Localize CSS-variables to limit relationship scope
    50         [class*="__inner-container"] {
     50        > [class*="__inner-container"] {
    5151                --local--color-primary: var(--global--color-purple, #FFFFFF);
    5252                color: var(--local--color-primary);
    … …  
    5757.has-red-color[class] {
    5858        // Localize CSS-variables to limit relationship scope
    59         [class*="__inner-container"] {
     59        > [class*="__inner-container"] {
    6060                --local--color-primary: var(--global--color-red, #FFFFFF);
    6161                color: var(--local--color-primary);
    … …  
    6666.has-orange-color[class] {
    6767        // Localize CSS-variables to limit relationship scope
    68         [class*="__inner-container"] {
     68        > [class*="__inner-container"] {
    6969                --local--color-primary: var(--global--color-orange, #FFFFFF);
    7070                color: var(--local--color-primary);
    … …  
    7575.has-yellow-color[class] {
    7676        // Localize CSS-variables to limit relationship scope
    77         [class*="__inner-container"] {
     77        > [class*="__inner-container"] {
    7878                --local--color-primary: var(--global--color-yellow, #FFFFFF);
    7979                color: var(--local--color-primary);
    … …  
    8484.has-white-color[class] {
    8585        // Localize CSS-variables to limit relationship scope
    86         [class*="__inner-container"] {
     86        > [class*="__inner-container"] {
    8787                --local--color-primary: var(--global--color-white, #FFFFFF);
    8888                color: var(--local--color-primary);
    … …  
    108108.has-black-background-color[class] {
    109109        // Localize CSS-variables to limit relationship scope
    110         [class*="__inner-container"] {
     110        > [class*="__inner-container"] {
    111111                --local--color-background: var(--global--color-black, #000000);
    112112                background-color: var(--local--color-background);
    … …  
    117117.has-dark-gray-background-color[class] {
    118118        // Localize CSS-variables to limit relationship scope
    119         [class*="__inner-container"] {
     119        > [class*="__inner-container"] {
    120120                --local--color-background: var(--global--color-dark-gray, #000000);
    121121                background-color: var(--local--color-background);
    … …  
    126126.has-gray-background-color[class] {
    127127        // Localize CSS-variables to limit relationship scope
    128         [class*="__inner-container"] {
     128        > [class*="__inner-container"] {
    129129                --local--color-background: var(--global--color-gray, #000000);
    130130                background-color: var(--local--color-background);
    … …  
    135135.has-light-gray-background-color[class] {
    136136        // Localize CSS-variables to limit relationship scope
    137         [class*="__inner-container"] {
     137        > [class*="__inner-container"] {
    138138                --local--color-background: var(--global--color-light-gray, #FFFFFF);
    139139                background-color: var(--local--color-background);
    … …  
    144144.has-green-background-color[class] {
    145145        // Localize CSS-variables to limit relationship scope
    146         [class*="__inner-container"] {
     146        > [class*="__inner-container"] {
    147147                --local--color-background: var(--global--color-green, #FFFFFF);
    148148                background-color: var(--local--color-background);
    … …  
    153153.has-blue-background-color[class] {
    154154        // Localize CSS-variables to limit relationship scope
    155         [class*="__inner-container"] {
     155        > [class*="__inner-container"] {
    156156                --local--color-background: var(--global--color-blue, #FFFFFF);
    157157                background-color: var(--local--color-background);
    … …  
    162162.has-purple-background-color[class] {
    163163        // Localize CSS-variables to limit relationship scope
    164         [class*="__inner-container"] {
     164        > [class*="__inner-container"] {
    165165                --local--color-background: var(--global--color-purple, #FFFFFF);
    166166                background-color: var(--local--color-background);
    … …  
    171171.has-red-background-color[class] {
    172172        // Localize CSS-variables to limit relationship scope
    173         [class*="__inner-container"] {
     173        > [class*="__inner-container"] {
    174174                --local--color-background: var(--global--color-red, #FFFFFF);
    175175                background-color: var(--local--color-background);
    … …  
    180180.has-orange-background-color[class] {
    181181        // Localize CSS-variables to limit relationship scope
    182         [class*="__inner-container"] {
     182        > [class*="__inner-container"] {
    183183                --local--color-background: var(--global--color-orange, #FFFFFF);
    184184                background-color: var(--local--color-background);
    … …  
    189189.has-yellow-background-color[class] {
    190190        // Localize CSS-variables to limit relationship scope
    191         [class*="__inner-container"] {
     191        > [class*="__inner-container"] {
    192192                --local--color-background: var(--global--color-yellow, #FFFFFF);
    193193                background-color: var(--local--color-background);
    … …  
    198198.has-white-background-color[class] {
    199199        // Localize CSS-variables to limit relationship scope
    200         [class*="__inner-container"] {
     200        > [class*="__inner-container"] {
    201201                --local--color-background: var(--global--color-white, #FFFFFF);
    202202                background-color: var(--local--color-background);
    … …  
    211211        &.has-dark-gray-background-color[class] {
    212212                // Localize CSS-variables to limit relationship scope
    213                 [class*="__inner-container"] {
     213                > [class*="__inner-container"] {
    214214                        --local--color-primary: var(--global--color-background, #FFFFFF);
    215215                        // Reverse the local foreground color in darkmode
    … …  
    229229        &.has-white-background-color[class] {
    230230                // Localize CSS-variables to limit relationship scope
    231                 [class*="__inner-container"] {
     231                > [class*="__inner-container"] {
    232232                        --local--color-primary: var(--global--color-primary, #000000);
    233233                        // Reverse the local foreground color in darkmode
Note: See TracChangeset for help on using the changeset viewer.