Varia: Improve color annotations and Gutenberg 5.4.2 support.

- Add support for table block and associated options
- Improve color annotations for tabel block
- Cleanup button, cover, and utility styles
- Recompile style sheet

varia/inc/wpcom-colors.php

@@ -47,6 +47,8 @@ add_color_rule( 'bg', '#ffffff', array(
 			.wp-block-gallery .blocks-gallery-image figcaption,
 			.wp-block-gallery .blocks-gallery-item figcaption,
 			.wp-block-pullquote.is-style-solid-color,
+			table.is-style-stripes tbody tr:nth-child(odd),
+			.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
 			body .widget_eu_cookie_law_widget #eu-cookie-law input.accept,
 			body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus,
 			body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover,
@@ -322,7 +324,9 @@ add_color_rule( 'txt', '#444444', array(
 			hr.wp-block-separator', 'border-bottom-color', 0.8 ),
 
 	// Background-color
-	array( 'body .widget_eu_cookie_law_widget #eu-cookie-law.negative', 'background-color' ),
+	array( 'table.is-style-stripes tbody tr:nth-child(odd),
+			.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
+			body .widget_eu_cookie_law_widget #eu-cookie-law.negative', 'background-color' ),
 
 	// Background-color
 	array( 'body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept.has-focus,

varia/inc/wpcom-editor-colors.php

@@ -31,6 +31,8 @@ add_editor_color_rule( 'bg', '#ffffff', array(
 			#editor .editor-styles-wrapper .wp-block-button__link.has-focus,
 			#editor .editor-styles-wrapper .wp-block-button__link:focus,
 			#editor .editor-styles-wrapper .wp-block-button__link:hover,
+			#editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
+			#editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
 			#editor .editor-styles-wrapper .wp-block-cover,
 			#editor .editor-styles-wrapper .wp-block-cover-image,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .block-editor-block-list__block,
@@ -191,6 +193,10 @@ add_editor_color_rule( 'txt', '#444444', array(
 	array( '#editor .editor-styles-wrapper .wp-block-pullquote,
 			#editor .editor-styles-wrapper .wp-block-separator', 'border-bottom-color', 0.8 ),
 
+	// Background-color
+	array( '#editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
+			#editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd)', 'background-color' ),
+
 	/**
 	 * Utility Classes
 	 */

varia/sass/blocks/button/_editor.scss

@@ -20,14 +20,14 @@
 	&.is-style-outline,
 	.is-style-outline & {
 
-		color: #{map-deep-get($config-button, "color", "background")};
 		background: transparent;
 		border: 2px solid currentcolor;
 
 		&:hover,
 		&:focus,
 		&.has-focus {
-			color: #{map-deep-get($config-button, "color", "background-hover")};
+			color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			background: transparent;
 		}
 	}
 

varia/sass/blocks/button/_style.scss

@@ -19,11 +19,18 @@ input[type="submit"],
 	&.is-style-outline.wp-block-button__link,
 	&.is-style-outline .wp-block-button__link {
 
-		color: #{map-deep-get($config-button, "color", "background")};
-		background: transparent;
+		color: inherit;
 		border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
 		padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
 
+		&:not(.has-background-color) {
+			background: transparent;
+		}
+
+		&:not(.has-text-color) {
+			color: #{map-deep-get($config-button, "color", "background")};
+		}
+
 		&:active {
 			color: #{map-deep-get($config-button, "color", "background")};
 		}

varia/sass/blocks/cover/_style.scss

@@ -9,7 +9,7 @@
 	.wp-block-cover__inner-container,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {
-		color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
+		color: currentColor;
 		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
 
@@ -19,15 +19,6 @@
 		}
 	}
 
-	/* 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")};

varia/sass/blocks/table/_editor.scss

@@ -9,4 +9,9 @@ table,
 	th {
 		padding: calc( 0.5 * #{map-deep-get($config-global, "spacing", "unit")} );
 	}
+
+	&.is-style-stripes tbody tr:nth-child(odd) {
+		background-color: #{map-deep-get($config-global, "color", "border", "light")};
+		color: #{map-deep-get($config-global, "color", "foreground", "default")};
+	}
 }

varia/sass/blocks/table/_style.scss

@@ -14,4 +14,9 @@ table,
 		border: 1px solid;
 		word-break: break-all;
 	}
+
+	&.is-style-stripes tbody tr:nth-child(odd) {
+		background-color: #{map-deep-get($config-global, "color", "border", "light")};
+		color: #{map-deep-get($config-global, "color", "foreground", "default")};
+	}
 }

varia/sass/blocks/utilities/_editor.scss

@@ -15,89 +15,93 @@
 // Gutenberg text color options
 .has-text-color {}
 
+.wp-block .has-primary-color,
 .has-primary-color {
 	color: #{map-deep-get($config-global, "color", "primary", "default")};
 }
 
+.wp-block .has-secondary-color,
 .has-secondary-color {
 	color: #{map-deep-get($config-global, "color", "secondary", "default")};
 }
 
+.wp-block .has-foreground-color,
 .has-foreground-color {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
+.wp-block .has-foreground-light-color,
 .has-foreground-light-color {
 	color: #{map-deep-get($config-global, "color", "foreground", "light")};
 }
 
+.wp-block .has-foreground-dark-color,
 .has-foreground-dark-color {
 	color: #{map-deep-get($config-global, "color", "foreground", "dark")};
 }
 
+.wp-block .has-background-light-color,
 .has-background-light-color {
 	color: #{map-deep-get($config-global, "color", "background", "light")};
 }
 
+.wp-block .has-background-dark-color,
 .has-background-dark-color {
 	color: #{map-deep-get($config-global, "color", "background", "dark")};
 }
 
+.wp-block .has-background-color,
 .has-background-color {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 // Gutenberg background-color options
 .has-background {
-	&:not(.has-background-background-color) a,
+	&:not(.has-background-background-color) a:not(.wp-block-button__link),
+	a:not(.wp-block-button__link),
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
 }
 
+.wp-block .has-primary-background-color,
 .has-primary-background-color {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
-}
-
-.has-primary-background-color {
-	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
+.wp-block .has-secondary-background-color,
 .has-secondary-background-color {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
+.wp-block .has-foreground-background-color,
 .has-foreground-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
+.wp-block .has-foreground-light-background-color,
 .has-foreground-light-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
+.wp-block .has-foreground-dark-background-color,
 .has-foreground-dark-background-color {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
+.wp-block .has-background-light-background-color,
 .has-background-light-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "light")};
-	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
+.wp-block .has-background-dark-background-color,
 .has-background-dark-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
-	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
+.wp-block .has-background-background-color,
 .has-background-background-color {
 	background-color: #{map-deep-get($config-global, "color", "background", "default")};
-	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 // Gutenberg Font-size utility classes

varia/sass/blocks/utilities/_style.scss

@@ -136,56 +136,58 @@
 	color: #{map-deep-get($config-global, "color", "background", "dark")};
 }
 
+.has-background-dim,
 .has-background-color {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
 // Gutenberg background-color options
 .has-background {
-	&:not(.has-background-background-color) a,
+	&:not(.has-background-background-color) a:not(.wp-block-button__link),
+	a:not(.wp-block-button__link),
 	p, h1, h2, h3, h4, h5, h6 {
 		color: currentColor;
 	}
 }
 
-.has-primary-background-color {
+.has-primary-background-color,
+.has-primary-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-secondary-background-color {
+.has-secondary-background-color,
+.has-secondary-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "secondary", "default")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-background-color {
+.has-foreground-background-color,
+.has-foreground-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "default")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-light-background-color {
+.has-foreground-light-background-color,
+.has-foreground-light-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "light")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-foreground-dark-background-color {
+.has-foreground-dark-background-color,
+.has-foreground-dark-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "foreground", "dark")};
-	color: #{map-deep-get($config-global, "color", "background", "default")};
 }
 
-.has-background-light-background-color {
+.has-background-light-background-color,
+.has-background-light-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "light")};
-	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-background-dark-background-color {
+.has-background-dark-background-color,
+.has-background-dark-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "dark")};
-	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
-.has-background-background-color {
+.has-background-background-color,
+.has-background-background-color.has-background-dim {
 	background-color: #{map-deep-get($config-global, "color", "background", "default")};
-	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 }
 
 // Gutenberg Font-size options

varia/style-editor.css

@@ -550,7 +550,6 @@ object {
 
 .wp-block-button__link.is-style-outline,
 .is-style-outline .wp-block-button__link {
-	color: blue;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
@@ -560,6 +559,7 @@ object {
 .is-style-outline .wp-block-button__link:focus,
 .is-style-outline .wp-block-button__link.has-focus {
 	color: indigo;
+	background: transparent;
 }
 
 .wp-block-button__link.is-style-squared,
@@ -1021,6 +1021,11 @@ table th,
 	padding: calc( 0.5 * 16px);
 }
 
+table.is-style-stripes tbody tr:nth-child(odd),
+.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
+	background-color: #FAFAFA;
+}
+
 /**
  * Editor Post Title
  * - Needs a special styles
@@ -1035,86 +1040,90 @@ table th,
 	line-height: 1.125;
 }
 
+.wp-block .has-primary-color,
 .has-primary-color {
 	color: blue;
 }
 
+.wp-block .has-secondary-color,
 .has-secondary-color {
 	color: red;
 }
 
+.wp-block .has-foreground-color,
 .has-foreground-color {
 	color: #444444;
 }
 
+.wp-block .has-foreground-light-color,
 .has-foreground-light-color {
 	color: #767676;
 }
 
+.wp-block .has-foreground-dark-color,
 .has-foreground-dark-color {
 	color: #111111;
 }
 
+.wp-block .has-background-light-color,
 .has-background-light-color {
 	color: #FAFAFA;
 }
 
+.wp-block .has-background-dark-color,
 .has-background-dark-color {
 	color: #DDDDDD;
 }
 
+.wp-block .has-background-color,
 .has-background-color {
 	color: white;
 }
 
-.has-background:not(.has-background-background-color) a,
+.has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
+.has-background a:not(.wp-block-button__link),
 .has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
 	color: currentColor;
 }
 
+.wp-block .has-primary-background-color,
 .has-primary-background-color {
 	background-color: blue;
-	color: white;
-}
-
-.has-primary-background-color {
-	background-color: blue;
-	color: white;
 }
 
+.wp-block .has-secondary-background-color,
 .has-secondary-background-color {
 	background-color: red;
-	color: white;
 }
 
+.wp-block .has-foreground-background-color,
 .has-foreground-background-color {
 	background-color: #444444;
-	color: white;
 }
 
+.wp-block .has-foreground-light-background-color,
 .has-foreground-light-background-color {
 	background-color: #767676;
-	color: white;
 }
 
+.wp-block .has-foreground-dark-background-color,
 .has-foreground-dark-background-color {
 	background-color: #111111;
-	color: white;
 }
 
+.wp-block .has-background-light-background-color,
 .has-background-light-background-color {
 	background-color: #FAFAFA;
-	color: #444444;
 }
 
+.wp-block .has-background-dark-background-color,
 .has-background-dark-background-color {
 	background-color: #DDDDDD;
-	color: #444444;
 }
 
+.wp-block .has-background-background-color,
 .has-background-background-color {
 	background-color: white;
-	color: #444444;
 }
 
 .is-small-text,

varia/style-rtl.css

@@ -1434,12 +1434,21 @@ button[data-load-more-btn], .button {
  */
 .wp-block-button.is-style-outline.wp-block-button__link,
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: blue;
-	background: transparent;
+	color: inherit;
 	border: 2px solid currentcolor;
 	padding: 14px 16px;
 }
 
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background-color) {
+	background: transparent;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: blue;
+}
+
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
 	color: blue;
@@ -1534,7 +1543,6 @@ button[data-load-more-btn], .button {
 	min-height: 480px;
 	margin-top: inherit;
 	margin-bottom: inherit;
-	/* default & custom background-color */
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
 	 * Block Options
@@ -1567,15 +1575,6 @@ button[data-load-more-btn], .button {
 	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;
@@ -2358,6 +2357,11 @@ table th,
 	word-break: break-all;
 }
 
+table.is-style-stripes tbody tr:nth-child(odd),
+.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
+	background-color: #FAFAFA;
+}
+
 .wp-block-video figcaption {
 	color: #767676;
 	font-size: 0.69444rem;
@@ -2468,53 +2472,55 @@ table th,
 	color: #DDDDDD;
 }
 
+.has-background-dim,
 .has-background-color {
 	color: white;
 }
 
-.has-background:not(.has-background-background-color) a,
+.has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
+.has-background a:not(.wp-block-button__link),
 .has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
 	color: currentColor;
 }
 
-.has-primary-background-color {
+.has-primary-background-color,
+.has-primary-background-color.has-background-dim {
 	background-color: blue;
-	color: white;
 }
 
-.has-secondary-background-color {
+.has-secondary-background-color,
+.has-secondary-background-color.has-background-dim {
 	background-color: red;
-	color: white;
 }
 
-.has-foreground-background-color {
+.has-foreground-background-color,
+.has-foreground-background-color.has-background-dim {
 	background-color: #444444;
-	color: white;
 }
 
-.has-foreground-light-background-color {
+.has-foreground-light-background-color,
+.has-foreground-light-background-color.has-background-dim {
 	background-color: #767676;
-	color: white;
 }
 
-.has-foreground-dark-background-color {
+.has-foreground-dark-background-color,
+.has-foreground-dark-background-color.has-background-dim {
 	background-color: #111111;
-	color: white;
 }
 
-.has-background-light-background-color {
+.has-background-light-background-color,
+.has-background-light-background-color.has-background-dim {
 	background-color: #FAFAFA;
-	color: #444444;
 }
 
-.has-background-dark-background-color {
+.has-background-dark-background-color,
+.has-background-dark-background-color.has-background-dim {
 	background-color: #DDDDDD;
-	color: #444444;
 }
 
-.has-background-background-color {
+.has-background-background-color,
+.has-background-background-color.has-background-dim {
 	background-color: white;
-	color: #444444;
 }
 
 .is-small-text,

varia/style.css

@@ -1434,12 +1434,21 @@ button[data-load-more-btn], .button {
  */
 .wp-block-button.is-style-outline.wp-block-button__link,
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: blue;
-	background: transparent;
+	color: inherit;
 	border: 2px solid currentcolor;
 	padding: 14px 16px;
 }
 
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background-color) {
+	background: transparent;
+}
+
+.wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
+	color: blue;
+}
+
 .wp-block-button.is-style-outline.wp-block-button__link:active,
 .wp-block-button.is-style-outline .wp-block-button__link:active {
 	color: blue;
@@ -1534,7 +1543,6 @@ button[data-load-more-btn], .button {
 	min-height: 480px;
 	margin-top: inherit;
 	margin-bottom: inherit;
-	/* default & custom background-color */
 	/* Treating H2 separately to account for legacy /core styles */
 	/**
 	 * Block Options
@@ -1567,15 +1575,6 @@ button[data-load-more-btn], .button {
 	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;
@@ -2358,6 +2357,11 @@ table th,
 	word-break: break-all;
 }
 
+table.is-style-stripes tbody tr:nth-child(odd),
+.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
+	background-color: #FAFAFA;
+}
+
 .wp-block-video figcaption {
 	color: #767676;
 	font-size: 0.69444rem;
@@ -2473,53 +2477,55 @@ table th,
 	color: #DDDDDD;
 }
 
+.has-background-dim,
 .has-background-color {
 	color: white;
 }
 
-.has-background:not(.has-background-background-color) a,
+.has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
+.has-background a:not(.wp-block-button__link),
 .has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
 	color: currentColor;
 }
 
-.has-primary-background-color {
+.has-primary-background-color,
+.has-primary-background-color.has-background-dim {
 	background-color: blue;
-	color: white;
 }
 
-.has-secondary-background-color {
+.has-secondary-background-color,
+.has-secondary-background-color.has-background-dim {
 	background-color: red;
-	color: white;
 }
 
-.has-foreground-background-color {
+.has-foreground-background-color,
+.has-foreground-background-color.has-background-dim {
 	background-color: #444444;
-	color: white;
 }
 
-.has-foreground-light-background-color {
+.has-foreground-light-background-color,
+.has-foreground-light-background-color.has-background-dim {
 	background-color: #767676;
-	color: white;
 }
 
-.has-foreground-dark-background-color {
+.has-foreground-dark-background-color,
+.has-foreground-dark-background-color.has-background-dim {
 	background-color: #111111;
-	color: white;
 }
 
-.has-background-light-background-color {
+.has-background-light-background-color,
+.has-background-light-background-color.has-background-dim {
 	background-color: #FAFAFA;
-	color: #444444;
 }
 
-.has-background-dark-background-color {
+.has-background-dark-background-color,
+.has-background-dark-background-color.has-background-dim {
 	background-color: #DDDDDD;
-	color: #444444;
 }
 
-.has-background-background-color {
+.has-background-background-color,
+.has-background-background-color.has-background-dim {
 	background-color: white;
-	color: #444444;
 }
 
 .is-small-text,