Varia: Make sure elements inside cover block is always visible

varia/sass/blocks/cover/_editor.scss

@@ -9,13 +9,23 @@
 	.wp-block-cover-image-text,
 	.wp-block-cover-text,
 	.block-editor-block-list__block {
-		color: #{map-deep-get($config-cover, "color", "foreground")};
+		color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
 
 		a {
 			color: currentColor;
 		}
 	}
 
+	/* default & custom background-color */
+	&:not([class*='background-color']){
+		.wp-block-cover__inner-container,
+		.wp-block-cover-image-text,
+		.wp-block-cover-text,
+		.block-editor-block-list__block {
+			color: #{map-deep-get($config-cover, "color", "foreground")};
+		}
+	}
+
 	/* Treating H2 separately to account for legacy /core styles */
 	h2 {
 		font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h2")) + 0em);

varia/sass/blocks/cover/_style.scss

@@ -8,7 +8,7 @@
 	.wp-block-cover__inner-container,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {
-		color: #{map-deep-get($config-cover, "color", "foreground")};
+		color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
 		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 
@@ -17,6 +17,15 @@
 		}
 	}
 
+	/* default & custom background-color */
+	&:not([class*='background-color']){
+		.wp-block-cover__inner-container,
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
+			color: #{map-deep-get($config-cover, "color", "foreground")};
+		}
+	}
+
 	/* Treating H2 separately to account for legacy /core styles */
 	h2 {
 		font-size: #{map-deep-get($config-heading, "font", "size", "h2")};
@@ -41,7 +50,7 @@
 
 	.wp-block-cover__inner-container {
 
-		width: calc(100% - #{ 2 * map-deep-get($config-global, "spacing", "vertical") };
+		width: calc(100% - #{ 2 * map-deep-get($config-global, "spacing", "vertical") });
 
 		& > * {
 			margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };

varia/style-editor.css

@@ -287,6 +287,7 @@ object {
 	background-color: black;
 	color: white;
 	min-height: 480px;
+	/* default & custom background-color */
 	/* Treating H2 separately to account for legacy /core styles */
 }
 
@@ -298,7 +299,7 @@ object {
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text,
 .wp-block-cover-image .block-editor-block-list__block {
-	color: white;
+	color: currentColor;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
@@ -312,6 +313,17 @@ object {
 	color: currentColor;
 }
 
+.wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-text,
+.wp-block-cover:not([class*='background-color']) .block-editor-block-list__block,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text,
+.wp-block-cover-image:not([class*='background-color']) .block-editor-block-list__block {
+	color: white;
+}
+
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
 	font-size: 2.48832em;

varia/style-rtl.css

@@ -1189,6 +1189,7 @@ input.has-focus[type="submit"],
 	background-color: black;
 	min-height: 480px;
 	margin: inherit;
+	/* default & custom background-color */
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
 	 * Block Options
@@ -1201,7 +1202,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: currentColor;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -1215,6 +1216,15 @@ input.has-focus[type="submit"],
 	color: currentColor;
 }
 
+.wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-text,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text {
+	color: white;
+}
+
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
 	font-size: 2.48832rem;

varia/style.css

@@ -1189,6 +1189,7 @@ input.has-focus[type="submit"],
 	background-color: black;
 	min-height: 480px;
 	margin: inherit;
+	/* default & custom background-color */
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
 	 * Block Options
@@ -1201,7 +1202,7 @@ input.has-focus[type="submit"],
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: currentColor;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
@@ -1215,6 +1216,15 @@ input.has-focus[type="submit"],
 	color: currentColor;
 }
 
+.wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover:not([class*='background-color']) .wp-block-cover-text,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover__inner-container,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-image-text,
+.wp-block-cover-image:not([class*='background-color']) .wp-block-cover-text {
+	color: white;
+}
+
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
 	font-size: 2.48832rem;