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.
Built from https://develop.svn.wordpress.org/branches/5.7@50469


git-svn-id: http://core.svn.wordpress.org/branches/5.7@50080 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2021-03-02 12:52:03 +00:00
parent 11ce2fe256
commit e0058af83d
9 changed files with 252 additions and 209 deletions

View File

@ -748,6 +748,11 @@ a:hover {
border: 3px solid #28303d;
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.wp-block-columns:not(.alignwide):not(.alignfull) {
clear: both;
}
@ -3080,7 +3085,7 @@ a {
color: #000;
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
color: #000;
}
@ -3088,7 +3093,7 @@ a {
color: #39414d;
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
color: #39414d;
}
@ -3096,7 +3101,7 @@ a {
color: #28303d;
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
color: #28303d;
}
@ -3104,7 +3109,7 @@ a {
color: #d1e4dd;
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
color: #d1e4dd;
}
@ -3112,7 +3117,7 @@ a {
color: #d1dfe4;
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
color: #d1dfe4;
}
@ -3120,7 +3125,7 @@ a {
color: #d1d1e4;
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
color: #d1d1e4;
}
@ -3128,7 +3133,7 @@ a {
color: #e4d1d1;
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
color: #e4d1d1;
}
@ -3136,7 +3141,7 @@ a {
color: #e4dad1;
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
color: #e4dad1;
}
@ -3144,7 +3149,7 @@ a {
color: #eeeadd;
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
color: #eeeadd;
}
@ -3152,7 +3157,7 @@ a {
color: #fff;
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
color: #fff;
}
@ -3171,7 +3176,7 @@ a {
background-color: #000;
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
background-color: #000;
}
@ -3179,7 +3184,7 @@ a {
background-color: #28303d;
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
background-color: #28303d;
}
@ -3187,7 +3192,7 @@ a {
background-color: #39414d;
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
background-color: #39414d;
}
@ -3195,7 +3200,7 @@ a {
background-color: #f0f0f0;
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
background-color: #f0f0f0;
}
@ -3203,7 +3208,7 @@ a {
background-color: #d1e4dd;
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
background-color: #d1e4dd;
}
@ -3211,7 +3216,7 @@ a {
background-color: #d1dfe4;
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
background-color: #d1dfe4;
}
@ -3219,7 +3224,7 @@ a {
background-color: #d1d1e4;
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
background-color: #d1d1e4;
}
@ -3227,7 +3232,7 @@ a {
background-color: #e4d1d1;
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
background-color: #e4d1d1;
}
@ -3235,7 +3240,7 @@ a {
background-color: #e4dad1;
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
background-color: #e4dad1;
}
@ -3243,7 +3248,7 @@ a {
background-color: #eeeadd;
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
background-color: #eeeadd;
}
@ -3251,47 +3256,47 @@ a {
background-color: #fff;
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
background-color: #fff;
}
.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
color: #28303d;
}

View File

@ -2818,6 +2818,8 @@ input[type=reset]:disabled {
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover-image {
@ -2831,6 +2833,8 @@ input[type=reset]:disabled {
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover:not(.alignwide):not(.alignfull),
@ -3076,6 +3080,11 @@ input[type=reset]:disabled {
border: 3px solid #28303d;
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.wp-block-file a.wp-block-file__button:active,
.wp-block-file a.wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:hover {
@ -7465,7 +7474,7 @@ h1.page-title {
color: #000;
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
color: #000;
}
@ -7473,7 +7482,7 @@ h1.page-title {
color: #39414d;
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
color: #39414d;
}
@ -7481,7 +7490,7 @@ h1.page-title {
color: #28303d;
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
color: #28303d;
}
@ -7489,7 +7498,7 @@ h1.page-title {
color: #d1e4dd;
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
color: #d1e4dd;
}
@ -7497,7 +7506,7 @@ h1.page-title {
color: #d1dfe4;
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
color: #d1dfe4;
}
@ -7505,7 +7514,7 @@ h1.page-title {
color: #d1d1e4;
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
color: #d1d1e4;
}
@ -7513,7 +7522,7 @@ h1.page-title {
color: #e4d1d1;
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
color: #e4d1d1;
}
@ -7521,7 +7530,7 @@ h1.page-title {
color: #e4dad1;
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
color: #e4dad1;
}
@ -7529,7 +7538,7 @@ h1.page-title {
color: #eeeadd;
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
color: #eeeadd;
}
@ -7537,7 +7546,7 @@ h1.page-title {
color: #fff;
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
color: #fff;
}
@ -7556,7 +7565,7 @@ h1.page-title {
background-color: #000;
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
background-color: #000;
}
@ -7564,7 +7573,7 @@ h1.page-title {
background-color: #28303d;
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
background-color: #28303d;
}
@ -7572,7 +7581,7 @@ h1.page-title {
background-color: #39414d;
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
background-color: #39414d;
}
@ -7580,7 +7589,7 @@ h1.page-title {
background-color: #f0f0f0;
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
background-color: #f0f0f0;
}
@ -7588,7 +7597,7 @@ h1.page-title {
background-color: #d1e4dd;
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
background-color: #d1e4dd;
}
@ -7596,7 +7605,7 @@ h1.page-title {
background-color: #d1dfe4;
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
background-color: #d1dfe4;
}
@ -7604,7 +7613,7 @@ h1.page-title {
background-color: #d1d1e4;
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
background-color: #d1d1e4;
}
@ -7612,7 +7621,7 @@ h1.page-title {
background-color: #e4d1d1;
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
background-color: #e4d1d1;
}
@ -7620,7 +7629,7 @@ h1.page-title {
background-color: #e4dad1;
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
background-color: #e4dad1;
}
@ -7628,7 +7637,7 @@ h1.page-title {
background-color: #eeeadd;
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
background-color: #eeeadd;
}
@ -7636,47 +7645,47 @@ h1.page-title {
background-color: #fff;
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
background-color: #fff;
}
.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container] {
color: #28303d;
}
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
color: #28303d;
}

View File

@ -808,6 +808,11 @@ a:hover {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.wp-block-columns:not(.alignwide):not(.alignfull) {
clear: both;
}
@ -2334,7 +2339,7 @@ a {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
@ -2343,7 +2348,7 @@ a {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
@ -2352,7 +2357,7 @@ a {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
@ -2361,7 +2366,7 @@ a {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
@ -2370,7 +2375,7 @@ a {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
@ -2379,7 +2384,7 @@ a {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
@ -2388,7 +2393,7 @@ a {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
@ -2397,7 +2402,7 @@ a {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
@ -2406,7 +2411,7 @@ a {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
@ -2415,7 +2420,7 @@ a {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
@ -2435,7 +2440,7 @@ a {
background-color: var(--global--color-black);
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
@ -2444,7 +2449,7 @@ a {
background-color: var(--global--color-dark-gray);
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
@ -2453,7 +2458,7 @@ a {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
@ -2462,7 +2467,7 @@ a {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
@ -2471,7 +2476,7 @@ a {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
@ -2480,7 +2485,7 @@ a {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
@ -2489,7 +2494,7 @@ a {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
@ -2498,7 +2503,7 @@ a {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
@ -2507,7 +2512,7 @@ a {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
@ -2516,7 +2521,7 @@ a {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
@ -2525,42 +2530,42 @@ a {
background-color: var(--global--color-white);
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
}

View File

@ -69,4 +69,9 @@
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
// The background color class is used just for the overlay, and does not need to be applied to the inner container.
&[class*="-background-color"][class] .wp-block-cover__inner-container {
background-color: unset;
}
}

View File

@ -108,4 +108,9 @@
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
&[class*="-background-color"][class] .wp-block-cover__inner-container {
background-color: unset;
}
}

View File

@ -2,7 +2,7 @@
.has-black-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-black, #000000);
color: var(--local--color-primary);
}
@ -11,7 +11,7 @@
.has-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-gray, #000000);
color: var(--local--color-primary);
}
@ -20,7 +20,7 @@
.has-dark-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-dark-gray, #000000);
color: var(--local--color-primary);
}
@ -29,7 +29,7 @@
.has-green-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-green, #FFFFFF);
color: var(--local--color-primary);
}
@ -38,7 +38,7 @@
.has-blue-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-blue, #FFFFFF);
color: var(--local--color-primary);
}
@ -47,7 +47,7 @@
.has-purple-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-purple, #FFFFFF);
color: var(--local--color-primary);
}
@ -56,7 +56,7 @@
.has-red-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-red, #FFFFFF);
color: var(--local--color-primary);
}
@ -65,7 +65,7 @@
.has-orange-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-orange, #FFFFFF);
color: var(--local--color-primary);
}
@ -74,7 +74,7 @@
.has-yellow-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-yellow, #FFFFFF);
color: var(--local--color-primary);
}
@ -83,7 +83,7 @@
.has-white-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-white, #FFFFFF);
color: var(--local--color-primary);
}
@ -107,7 +107,7 @@
.has-black-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-black, #000000);
background-color: var(--local--color-background);
}
@ -116,7 +116,7 @@
.has-dark-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-dark-gray, #000000);
background-color: var(--local--color-background);
}
@ -125,7 +125,7 @@
.has-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-gray, #000000);
background-color: var(--local--color-background);
}
@ -134,7 +134,7 @@
.has-light-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-light-gray, #FFFFFF);
background-color: var(--local--color-background);
}
@ -143,7 +143,7 @@
.has-green-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-green, #FFFFFF);
background-color: var(--local--color-background);
}
@ -152,7 +152,7 @@
.has-blue-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-blue, #FFFFFF);
background-color: var(--local--color-background);
}
@ -161,7 +161,7 @@
.has-purple-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-purple, #FFFFFF);
background-color: var(--local--color-background);
}
@ -170,7 +170,7 @@
.has-red-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-red, #FFFFFF);
background-color: var(--local--color-background);
}
@ -179,7 +179,7 @@
.has-orange-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-orange, #FFFFFF);
background-color: var(--local--color-background);
}
@ -188,7 +188,7 @@
.has-yellow-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-yellow, #FFFFFF);
background-color: var(--local--color-background);
}
@ -197,7 +197,7 @@
.has-white-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-background: var(--global--color-white, #FFFFFF);
background-color: var(--local--color-background);
}
@ -210,7 +210,7 @@
&.has-gray-background-color[class],
&.has-dark-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-background, #FFFFFF);
// Reverse the local foreground color in darkmode
.is-dark-theme & {
@ -228,7 +228,7 @@
&.has-yellow-background-color[class],
&.has-white-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
> [class*="__inner-container"] {
--local--color-primary: var(--global--color-primary, #000000);
// Reverse the local foreground color in darkmode
.is-dark-theme & {

View File

@ -2020,6 +2020,8 @@ input[type=reset]:disabled,
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover:not(.alignwide):not(.alignfull),
@ -2155,6 +2157,11 @@ input[type=reset]:disabled,
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.wp-block-file a.wp-block-file__button:active,
.wp-block-file a.wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:hover {
@ -5537,7 +5544,7 @@ h1.page-title {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
@ -5546,7 +5553,7 @@ h1.page-title {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
@ -5555,7 +5562,7 @@ h1.page-title {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
@ -5564,7 +5571,7 @@ h1.page-title {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
@ -5573,7 +5580,7 @@ h1.page-title {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
@ -5582,7 +5589,7 @@ h1.page-title {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
@ -5591,7 +5598,7 @@ h1.page-title {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
@ -5600,7 +5607,7 @@ h1.page-title {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
@ -5609,7 +5616,7 @@ h1.page-title {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
@ -5618,7 +5625,7 @@ h1.page-title {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
@ -5638,7 +5645,7 @@ h1.page-title {
background-color: var(--global--color-black);
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
@ -5647,7 +5654,7 @@ h1.page-title {
background-color: var(--global--color-dark-gray);
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
@ -5656,7 +5663,7 @@ h1.page-title {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
@ -5665,7 +5672,7 @@ h1.page-title {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
@ -5674,7 +5681,7 @@ h1.page-title {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
@ -5683,7 +5690,7 @@ h1.page-title {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
@ -5692,7 +5699,7 @@ h1.page-title {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
@ -5701,7 +5708,7 @@ h1.page-title {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
@ -5710,7 +5717,7 @@ h1.page-title {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
@ -5719,7 +5726,7 @@ h1.page-title {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
@ -5728,42 +5735,42 @@ h1.page-title {
background-color: var(--global--color-white);
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
}

View File

@ -2030,6 +2030,8 @@ input[type=reset]:disabled,
/* Treating H2 separately to account for legacy /core styles */
/* Block Styles */
/* The background color class is used just for the overlay, and does not need to be applied to the inner container. */
}
.wp-block-cover:not(.alignwide):not(.alignfull),
@ -2165,6 +2167,11 @@ input[type=reset]:disabled,
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container,
.wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container {
background-color: unset;
}
.wp-block-file a.wp-block-file__button:active,
.wp-block-file a.wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:hover {
@ -5573,7 +5580,7 @@ h1.page-title {
color: var(--global--color-black);
}
.has-black-color[class] [class*=__inner-container] {
.has-black-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
@ -5582,7 +5589,7 @@ h1.page-title {
color: var(--global--color-gray);
}
.has-gray-color[class] [class*=__inner-container] {
.has-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
@ -5591,7 +5598,7 @@ h1.page-title {
color: var(--global--color-dark-gray);
}
.has-dark-gray-color[class] [class*=__inner-container] {
.has-dark-gray-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
@ -5600,7 +5607,7 @@ h1.page-title {
color: var(--global--color-green);
}
.has-green-color[class] [class*=__inner-container] {
.has-green-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
@ -5609,7 +5616,7 @@ h1.page-title {
color: var(--global--color-blue);
}
.has-blue-color[class] [class*=__inner-container] {
.has-blue-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
@ -5618,7 +5625,7 @@ h1.page-title {
color: var(--global--color-purple);
}
.has-purple-color[class] [class*=__inner-container] {
.has-purple-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
@ -5627,7 +5634,7 @@ h1.page-title {
color: var(--global--color-red);
}
.has-red-color[class] [class*=__inner-container] {
.has-red-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
@ -5636,7 +5643,7 @@ h1.page-title {
color: var(--global--color-orange);
}
.has-orange-color[class] [class*=__inner-container] {
.has-orange-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
@ -5645,7 +5652,7 @@ h1.page-title {
color: var(--global--color-yellow);
}
.has-yellow-color[class] [class*=__inner-container] {
.has-yellow-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
@ -5654,7 +5661,7 @@ h1.page-title {
color: var(--global--color-white);
}
.has-white-color[class] [class*=__inner-container] {
.has-white-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
@ -5674,7 +5681,7 @@ h1.page-title {
background-color: var(--global--color-black);
}
.has-black-background-color[class] [class*=__inner-container] {
.has-black-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
}
@ -5683,7 +5690,7 @@ h1.page-title {
background-color: var(--global--color-dark-gray);
}
.has-dark-gray-background-color[class] [class*=__inner-container] {
.has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
@ -5692,7 +5699,7 @@ h1.page-title {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
.has-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
@ -5701,7 +5708,7 @@ h1.page-title {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
.has-light-gray-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
@ -5710,7 +5717,7 @@ h1.page-title {
background-color: var(--global--color-green);
}
.has-green-background-color[class] [class*=__inner-container] {
.has-green-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
@ -5719,7 +5726,7 @@ h1.page-title {
background-color: var(--global--color-blue);
}
.has-blue-background-color[class] [class*=__inner-container] {
.has-blue-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
@ -5728,7 +5735,7 @@ h1.page-title {
background-color: var(--global--color-purple);
}
.has-purple-background-color[class] [class*=__inner-container] {
.has-purple-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
@ -5737,7 +5744,7 @@ h1.page-title {
background-color: var(--global--color-red);
}
.has-red-background-color[class] [class*=__inner-container] {
.has-red-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
@ -5746,7 +5753,7 @@ h1.page-title {
background-color: var(--global--color-orange);
}
.has-orange-background-color[class] [class*=__inner-container] {
.has-orange-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
@ -5755,7 +5762,7 @@ h1.page-title {
background-color: var(--global--color-yellow);
}
.has-yellow-background-color[class] [class*=__inner-container] {
.has-yellow-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
@ -5764,42 +5771,42 @@ h1.page-title {
background-color: var(--global--color-white);
}
.has-white-background-color[class] [class*=__inner-container] {
.has-white-background-color[class] > [class*=__inner-container] {
--local--color-background: var(--global--color-white, #fff);
background-color: var(--local--color-background);
}
.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
}

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.7-RC1-50468';
$wp_version = '5.7-RC1-50469';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.