WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
03/01/2021 11:24:13 PM (4 years ago)
Author:
ryelle
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.
Fixes #52676.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r49987 r50466  
    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.