Exford: Improve annotations.

exford/functions.php

@@ -66,7 +66,6 @@ if ( ! function_exists( 'exford_setup' ) ) :
 		$foreground_light = ( ! empty( $colors_array ) && $colors_array['colors']['txt'] != '#111111' ) ? $colors_array['colors']['txt'] : '#6E6E6E';  // $config-global--color-foreground-light-default;
 		$foreground_dark  = ( ! empty( $colors_array ) && $colors_array['colors']['txt'] != '#111111' ) ? $colors_array['colors']['txt'] : '#020202';  // $config-global--color-foreground-dark-default;
 
-
 		// Editor color palette.
 		add_theme_support(
 			'editor-color-palette',
@@ -190,7 +189,7 @@ function exford_editor_styles() {
 	wp_enqueue_style( 'exford-editor-fonts', exford_fonts_url(), array(), null );
 
 	// Hide duplicate palette colors
-	$colors_array = get_theme_mod('colors_manager', array( 'colors' => true )); // color annotations array()
+	$colors_array = get_theme_mod( 'colors_manager' );
 	if ( ! empty( $colors_array ) && $colors_array['colors']['txt'] != '#6E6E6E' ) { // $config-global--color-foreground-light-default;
 		$inline_palette_css = '.block-editor-color-gradient-control .components-circular-option-picker__option-wrapper:nth-child(5),
 			.block-editor-color-gradient-control .components-circular-option-picker__option-wrapper:nth-child(6) {

exford/inc/wpcom-colors.php

@@ -15,6 +15,8 @@ add_color_rule( 'bg', '#FFFFFF', array(
 	// Text-color
 	array( '.a8c-posts-list-item__featured span,
 			.sticky-post,
+			.wp-block-cover-image.has-background-dim,
+			.wp-block-cover.has-background-dim,
 			.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"]) .wp-block-cover__inner-container,
@@ -28,20 +30,32 @@ add_color_rule( 'bg', '#FFFFFF', array(
 	 * Utility Classes
 	 */
 	// Text-color
-	array( '.has-primary-background-color[class],
-			.has-secondary-background-color[class],
+	array( '.has-background-color[class],
+			.has-background-dim[class],
 			.has-foreground-background-color[class],
+			.has-foreground-background-color.has-background-dim[class],
 			.has-foreground-dark-background-color[class],
+			.has-foreground-dark-background-color.has-background-dim[class],
 			.has-foreground-light-background-color[class],
-			.has-background-color[class],
-			.has-background-dark-color[class],
-			.has-background-light-color[class]', 'color' ),
+			.has-foreground-light-background-color.has-background-dim[class],
+			.has-primary-background-color[class],
+			.has-primary-background-color.has-background-dim[class],
+			.has-secondary-background-color[class],
+			.has-secondary-background-color.has-background-dim[class]', 'color' ),
 	// Background-color
 	array( '.has-background-background-color[class]', 'background-color' ),
+
+	// Text-color darkened
+	array( '.has-background-dark-color[class]', 'color', '-1' ),
 	// Background-color darkened
-	array( '.has-background-dark-background-color[class]', 'background-color', '-1' ),
+	array( '.has-background-dark-background-color[class],
+			.has-background-dark-background-color.has-background-dim[class]', 'background-color', '-1' ),
+
+	// Text-color lightened
+	array( '.has-background-light-color[class]', 'color', '+1' ),
 	// Background-color lightened
-	array( '.has-background-light-background-color[class]', 'background-color', '+1' ),
+	array( '.has-background-light-background-color[class],
+			.has-background-light-background-color.has-background-dim[class]', 'background-color', '+1' ),
 
 	/**
 	 * Grays
@@ -103,7 +117,7 @@ add_color_rule( 'link', '#23883D', array(
 			button,
 			button[data-load-more-btn],
 			input[type="submit"]', 'background-color' ),
-
+			
 	// Text-color
 	array( '.a8c-posts-list .a8c-posts-list-item__title a:active,
 			.a8c-posts-list .a8c-posts-list-item__title a:focus,
@@ -128,14 +142,14 @@ add_color_rule( 'link', '#23883D', array(
 			.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
 			.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
 			a', 'color' ),
-
+			
 	// Border color left
 	array( '.wp-block-quote', 'border-left-color' ),
 
 	// Border color right
 	array( '.wp-block-quote[style*="text-align: right"],
 			.wp-block-quote[style*="text-align:right"]', 'border-right-color' ),
-
+			
 	/**
 	 * Utility Classes
 	 */
@@ -184,11 +198,11 @@ add_color_rule( 'txt', '#111111', array(
 			.has-background-light-background-color[class],
 			.has-background-light-background-color.has-background-dim[class],
 			.has-foreground-color[class]', 'color' ),
+
 	// Background-color
 	array( '.has-background-dim[class],
 			.has-foreground-background-color[class],
-			.has-foreground-background-color.has-background-dim[class],
-			.has-foreground-background-color[class]', 'background-color' ),
+			.has-foreground-background-color.has-background-dim[class]', 'background-color' ),
 
 	// Text-color darkened
 	array( '.has-foreground-dark-color[class]', 'color', '-1' ),
@@ -211,7 +225,6 @@ add_color_rule( 'txt', '#111111', array(
 			.entry-footer,
 			.entry-meta,
 			.footer-navigation .footer-menu,
-			.has-foreground-light-color[class],
 			.post-navigation .meta-nav,
 			.site-branding,
 			.site-info,

exford/inc/wpcom-editor-colors.php

@@ -14,10 +14,12 @@ add_editor_color_rule( 'bg', '#FFFFFF', array(
 	// Text-color
 	array( '#editor .editor-styles-wrapper .wp-block-cover,
 			#editor .editor-styles-wrapper .wp-block-cover-image,
+			#editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .block-editor-block-list__block,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text,
 			#editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container,
+			#editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
 			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .block-editor-block-list__block,
 			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
 			#editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
@@ -33,17 +35,30 @@ add_editor_color_rule( 'bg', '#FFFFFF', array(
 			#editor .editor-styles-wrapper .has-foreground-background-color[class],
 			#editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
 			#editor .editor-styles-wrapper .has-foreground-light-background-color[class],
-			#editor .editor-styles-wrapper .has-background-color[class]', 'color' ),
+			#editor .editor-styles-wrapper .has-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-primary-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-secondary-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-color[class]', 'color' ),
 	// Background-color
-	array( '#editor .editor-styles-wrapper .has-background-background-color[class]', 'background-color' ),
+	array( '#editor .editor-styles-wrapper .has-background-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-background-color[class]', 'background-color' ),
+
 	// Text-color darkened
-	array( '#editor .editor-styles-wrapper .has-background-dark-color[class]', 'color', '-1'  ),
+	array( '#editor .editor-styles-wrapper .has-background-dark-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-dark-color[class]', 'color', '-1'  ),
 	// Background-color darkened
-	array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class]', 'background-color', '-1' ),
+	array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-dark-background-color[class]', 'background-color', '-1' ),
+
 	// Text-color lightened
-	array( '#editor .editor-styles-wrapper .has-background-light-color[class]', 'color', '+1'  ),
+	array( '#editor .editor-styles-wrapper .has-background-light-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-light-color[class]', 'color', '+1'  ),
 	// Background-color lightened
-	array( '#editor .editor-styles-wrapper .has-background-light-background-color[class]', 'background-color', '+1' ),
+	array( '#editor .editor-styles-wrapper .has-background-light-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-light-background-color[class]', 'background-color', '+1' ),
 
 	/**
 	 * Grays
@@ -92,9 +107,11 @@ add_editor_color_rule( 'link', '#23883D', array(
 	 * Utility Classes
 	 */
 	// Background-color
-	array( '#editor .editor-styles-wrapper .has-primary-background-color[class]', 'background-color' ),
+	array( '#editor .editor-styles-wrapper .has-primary-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-primary-background-color[class]', 'background-color' ),
 	// Text-color
-	array( '#editor .editor-styles-wrapper .has-primary-color[class]', 'color' ),
+	array( '#editor .editor-styles-wrapper .has-primary-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-primary-color[class]', 'color' ),
 
 ), __( 'Link Color' ) );
 
@@ -119,17 +136,26 @@ add_editor_color_rule( 'txt', '#111111', array(
 	array( '#editor .editor-styles-wrapper .has-background-background-color[class],
 			#editor .editor-styles-wrapper .has-background-dark-background-color[class],
 			#editor .editor-styles-wrapper .has-background-light-background-color[class],
-			#editor .editor-styles-wrapper .has-foreground-color[class]', 'color' ),
+			#editor .editor-styles-wrapper .has-foreground-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-dark-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-background-light-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-color[class]', 'color' ),
 	// Background-color
-	array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-background-color[class]', 'background-color' ),
 	// Text-color darkened
-	array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color', '-1' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-dark-color[class]', 'color', '-1' ),
 	// Background-color darkened
-	array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
 	// Text-color brightened
-	array( '#editor .editor-styles-wrapper .has-foreground-light-color[class]', 'color', '+2' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-light-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-light-color[class]', 'color', '+2' ),
 	// Background-color brightened
-	array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class]', 'background-color', '+2' ),
+	array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class],
+			#editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color[class]', 'background-color', '+2' ),
 
 	/**
 	 * Grays
@@ -137,6 +163,8 @@ add_editor_color_rule( 'txt', '#111111', array(
 	 */
 	// Text-color
 	array( '#editor .editor-styles-wrapper .a8c-posts-list__item .a8c-posts-list-item__meta,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links,
+			#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-meta,
 			#editor .editor-styles-wrapper .wp-block-image figcaption,
 			#editor .editor-styles-wrapper .wp-block-latest-comments .wp-block-latest-comments__comment-date,
 			#editor .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date,