From e0058af83dc0781d3cb14756e2c3e9115eb3104d Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov.ru@gmail.com>
Date: Tue, 2 Mar 2021 12:52:03 +0000
Subject: [PATCH] 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
---
 .../twentytwentyone/assets/css/ie-editor.css  | 67 +++++++-------
 .../themes/twentytwentyone/assets/css/ie.css  | 71 ++++++++-------
 .../assets/css/style-editor.css               | 87 +++++++++---------
 .../assets/sass/05-blocks/cover/_editor.scss  |  5 ++
 .../assets/sass/05-blocks/cover/_style.scss   |  5 ++
 .../sass/07-utilities/color-palette.scss      | 46 +++++-----
 .../themes/twentytwentyone/style-rtl.css      | 89 ++++++++++---------
 wp-content/themes/twentytwentyone/style.css   | 89 ++++++++++---------
 wp-includes/version.php                       |  2 +-
 9 files changed, 252 insertions(+), 209 deletions(-)

diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
index 95b274bbf7..abb204bbe5 100644
--- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
+++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
@@ -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;
 }
 
diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css
index c44222f5f8..c2a61489eb 100644
--- a/wp-content/themes/twentytwentyone/assets/css/ie.css
+++ b/wp-content/themes/twentytwentyone/assets/css/ie.css
@@ -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;
 }
 
diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css
index a281aa9f93..cc95adf131 100644
--- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css
+++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css
@@ -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);
 }
 
diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss
index 9be38c1876..b0c5b9a5e9 100644
--- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss
+++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss
@@ -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;
+	}
 }
diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss
index bc66c0ae8b..7114cfd47c 100644
--- a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss
+++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss
@@ -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;
+	}
 }
diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
index b681bdb352..c5ede483b6 100644
--- a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
+++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
@@ -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 & {
diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css
index 172d5b9742..3c046cd98b 100644
--- a/wp-content/themes/twentytwentyone/style-rtl.css
+++ b/wp-content/themes/twentytwentyone/style-rtl.css
@@ -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);
 }
 
diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css
index f9e37c165d..0f28be35c1 100644
--- a/wp-content/themes/twentytwentyone/style.css
+++ b/wp-content/themes/twentytwentyone/style.css
@@ -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);
 }
 
diff --git a/wp-includes/version.php b/wp-includes/version.php
index c8aa4cc257..2542f48fca 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -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.