Seedlet: Allow all blocks with a link color to override the text colo…

…r value set by custom background colors (#2275) * Try to increase link color consistency * Remove commented code * Rebuild after rebase
Automattic · Jul 27, 2020 · a12ef79 · a12ef79
1 parent 8139e04
commit a12ef79
Show file tree

Hide file tree

Showing 12 changed files with 121 additions and 71 deletions.
diff --git a/seedlet/assets/css/ie.css b/seedlet/assets/css/ie.css
@@ -1520,17 +1520,21 @@ a:focus {
 }
 
 a:active {
-	color: undefined;
-}
-
-p.has-background.has-link-color:not(.has-background-background-color) a {
 	color: #000000;
 }
 
 .has-link-color a {
 	border-bottom: 1px solid #000000;
 }
 
+.has-background:not(.has-background-background-color) .has-link-color a {
+	color: #000000;
+}
+
+.has-background:not(.has-background-background-color).has-link-color a {
+	color: #000000;
+}
+
 *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
@@ -2196,6 +2200,30 @@ object {
 	color: currentColor;
 }
 
+.wp-block-cover .wp-block-cover__inner-container .has-link-color a {
+	color: #000000;
+}
+
+.wp-block-cover .wp-block-cover-image-text .has-link-color a {
+	color: #000000;
+}
+
+.wp-block-cover .wp-block-cover-text .has-link-color a {
+	color: #000000;
+}
+
+.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a {
+	color: #000000;
+}
+
+.wp-block-cover-image .wp-block-cover-image-text .has-link-color a {
+	color: #000000;
+}
+
+.wp-block-cover-image .wp-block-cover-text .has-link-color a {
+	color: #000000;
+}
+
 .wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container {
 	color: #FAFBF6;
 }
@@ -2909,10 +2937,6 @@ dd {
 	margin-bottom: 0;
 }
 
-.wp-block-media-text[class*="background-color"]:not(.has-background-background-color) .wp-block-media-text__content a, .wp-block-media-text[style*="background-color"] .wp-block-media-text__content a {
-	color: currentColor;
-}
-
 @media only screen and (min-width: 482px) {
 	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
 		padding-top: 30px;
@@ -2997,6 +3021,10 @@ p.has-background {
 	padding: 20px;
 }
 
+p.has-text-color a {
+	color: #000000;
+}
+
 .a8c-posts-list__listing {
 	list-style: none;
 	margin: 0;

diff --git a/seedlet/assets/css/style-editor.css b/seedlet/assets/css/style-editor.css
@@ -303,26 +303,27 @@ body {
 	font-size: var(--global--font-size-root);
 }
 
-a {
+.wp-block a {
 	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--wp--style--color--link, var(--global--color-primary));
 	text-decoration: none;
 }
 
-a:hover, a:focus {
+.wp-block a:hover, .wp-block a:focus {
 	color: var(--global--color-primary-hover);
 }
 
-a:active {
+.wp-block a:active {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
-p.has-background.has-link-color:not(.has-background-background-color) a {
-	color: var(--wp--style--color--link, var(--global--color-primary));
+.has-link-color .wp-block a {
+	border-bottom: 1px solid var(--wp--style--color--link);
 }
 
-.has-link-color a {
-	border-bottom: 1px solid var(--wp--style--color--link);
+.has-background:not(.has-background-background-color) .has-link-color a,
+.has-background:not(.has-background-background-color).has-link-color a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
 button,
@@ -484,6 +485,17 @@ div[data-type="core/button"] {
 	color: currentColor;
 }
 
+.wp-block-cover .wp-block-cover__inner-container .has-link-color a,
+.wp-block-cover .wp-block-cover-image-text .has-link-color a,
+.wp-block-cover .wp-block-cover-text .has-link-color a,
+.wp-block-cover .block-editor-block-list__block .has-link-color a,
+.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a,
+.wp-block-cover-image .wp-block-cover-image-text .has-link-color a,
+.wp-block-cover-image .wp-block-cover-text .has-link-color a,
+.wp-block-cover-image .block-editor-block-list__block .has-link-color a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
 .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,
@@ -774,10 +786,6 @@ dt {
 	padding-left: var(--global--spacing-horizontal);
 }
 
-.wp-block-media-text[style*="background-color"]:not(.has-background-background-color) a {
-	color: currentColor;
-}
-
 .wp-block-navigation .wp-block-navigation__container {
 	background: var(--global--color-background);
 	padding: 0;
@@ -813,10 +821,6 @@ p.has-background {
 	padding: var(--global--spacing-unit);
 }
 
-p.has-background:not(.has-background-background-color) a {
-	color: currentColor;
-}
-
 .a8c-posts-list {
 	padding-left: 0;
 }

diff --git a/seedlet/assets/sass/base/_editor.scss b/seedlet/assets/sass/base/_editor.scss
@@ -17,7 +17,7 @@ body {
 }
 
 // Links styles
-a {
+.wp-block a {
 	border-bottom: 1px solid var(--global--color-secondary);
 	color: var( --wp--style--color--link, var(--global--color-primary) );
 	text-decoration: none;
@@ -31,18 +31,21 @@ a {
 		color: var( --wp--style--color--link, var(--global--color-primary) );
 	}
 
-	// Enforce the custom link color even if a custom background color has been set.
-	// The extra specificity here is required to override the background color styles.
-	p.has-background.has-link-color:not(.has-background-background-color) & {
-		color: var( --wp--style--color--link, var(--global--color-primary) );
-	}
-
 	// If a custom link color has been assigned,
 	// switch the color of the bottom border too. 
 	.has-link-color & {
 		border-bottom: 1px solid var(--wp--style--color--link);
 	}
 }
+// Enforce the custom link color even if a custom background color has been set.
+// The extra specificity here is required to override the background color styles.
+.has-background:not(.has-background-background-color) {
+	// Target both current level and nested block.
+	.has-link-color a,
+	&.has-link-color a {
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
+}
 
 button,
 a {

diff --git a/seedlet/assets/sass/base/_reset.scss b/seedlet/assets/sass/base/_reset.scss
@@ -90,12 +90,6 @@ a {
 	}
 
 	&:active {
-		color: var(--wp--style--color--link);
-	}
-
-	// Enforce the custom link color even if a custom background color has been set.
-	// The extra specificity here is required to override the background color styles.
-	p.has-background.has-link-color:not(.has-background-background-color) & {
 		color: var( --wp--style--color--link, var(--global--color-primary) );
 	}
 
@@ -105,6 +99,15 @@ a {
 		border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) );
 	}
 }
+// Enforce the custom link color even if a custom background color has been set.
+// The extra specificity here is required to override the background color styles.
+.has-background:not(.has-background-background-color) {
+	// Target both current level and nested block.
+	.has-link-color a,
+	&.has-link-color a {
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
+}
 
 // Focus styles
 *:focus {

diff --git a/seedlet/assets/sass/blocks/cover/_editor.scss b/seedlet/assets/sass/blocks/cover/_editor.scss
@@ -15,6 +15,9 @@
 		a {
 			color: currentColor;
 		}
+		.has-link-color a {
+			color: var( --wp--style--color--link, var(--global--color-primary) );
+		}
 	}
 
 	// Default & custom background-color

diff --git a/seedlet/assets/sass/blocks/cover/_style.scss b/seedlet/assets/sass/blocks/cover/_style.scss
@@ -16,6 +16,9 @@
 		a {
 			color: currentColor;
 		}
+		.has-link-color a {
+			color: var( --wp--style--color--link, var(--global--color-primary) );
+		}
 	}
 
 	/* default & custom background-color */

diff --git a/seedlet/assets/sass/blocks/media-text/_editor.scss b/seedlet/assets/sass/blocks/media-text/_editor.scss
@@ -3,10 +3,4 @@
 		padding-right: var(--global--spacing-horizontal);
 		padding-left: var(--global--spacing-horizontal);
 	}
-
-	&[style*="background-color"]:not(.has-background-background-color) {
-		a {
-			color: currentColor;
-		}
-	}
 }
diff --git a/seedlet/assets/sass/blocks/media-text/_style.scss b/seedlet/assets/sass/blocks/media-text/_style.scss
@@ -26,15 +26,6 @@
 		}
 	}
 
-	&[class*="background-color"]:not(.has-background-background-color),
-	&[style*="background-color"] {
-		.wp-block-media-text__content {
-			a {
-				color: currentColor;
-			}
-		}
-	}
-
 	/**
 	 * Block Options
 	 */

diff --git a/seedlet/assets/sass/blocks/paragraph/_editor.scss b/seedlet/assets/sass/blocks/paragraph/_editor.scss
@@ -3,9 +3,5 @@ p {
 
 	&.has-background {
 		padding: var(--global--spacing-unit);
-
-		&:not(.has-background-background-color) a {
-			color: currentColor;
-		}
 	}
 }
diff --git a/seedlet/assets/sass/blocks/paragraph/_style.scss b/seedlet/assets/sass/blocks/paragraph/_style.scss
@@ -6,4 +6,9 @@ p {
 	&.has-background {
 		padding: var(--global--spacing-unit);
 	}
+
+	// Override `color: inherit` from Core styles.
+	&.has-text-color a {
+		color: var( --wp--style--color--link, var(--global--color-primary) );
+	}
 }
diff --git a/seedlet/style-rtl.css b/seedlet/style-rtl.css
@@ -983,17 +983,18 @@ a:hover, a:focus {
 }
 
 a:active {
-	color: var(--wp--style--color--link);
-}
-
-p.has-background.has-link-color:not(.has-background-background-color) a {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
 .has-link-color a {
 	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
 }
 
+.has-background:not(.has-background-background-color) .has-link-color a,
+.has-background:not(.has-background-background-color).has-link-color a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
 *:focus {
 	outline-width: 1px;
 	outline-style: dotted;
@@ -1391,6 +1392,15 @@ object {
 	color: currentColor;
 }
 
+.wp-block-cover .wp-block-cover__inner-container .has-link-color a,
+.wp-block-cover .wp-block-cover-image-text .has-link-color a,
+.wp-block-cover .wp-block-cover-text .has-link-color a,
+.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a,
+.wp-block-cover-image .wp-block-cover-image-text .has-link-color a,
+.wp-block-cover-image .wp-block-cover-text .has-link-color a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
 .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,
@@ -1883,10 +1893,6 @@ dd {
 	margin-bottom: 0;
 }
 
-.wp-block-media-text[class*="background-color"]:not(.has-background-background-color) .wp-block-media-text__content a, .wp-block-media-text[style*="background-color"] .wp-block-media-text__content a {
-	color: currentColor;
-}
-
 @media only screen and (min-width: 482px) {
 	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
 		padding-top: var(--global--spacing-vertical);
@@ -1967,6 +1973,10 @@ p.has-background {
 	padding: var(--global--spacing-unit);
 }
 
+p.has-text-color a {
+	color: var(--wp--style--color--link, var(--global--color-primary));
+}
+
 .a8c-posts-list__listing {
 	list-style: none;
 	margin: 0;