Testing with duotone

WordPress · Jul 4, 2022 · ac98cd3 · ac98cd3
1 parent ca4b540
commit ac98cd3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -525,6 +525,10 @@ function( $pseudo_selector ) use ( $selector ) {
 
 		$block_styles = $pseudo_selector && isset( $node[ $pseudo_selector ] ) && isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true ) ? $node[ $pseudo_selector ] : $node;
 
+		if ( isset( $block_styles['filter']['duotone'] ) && ! empty( $block_styles['filter']['duotone'] ) ) {
+			$selector = static::scope_selector( $selector, $block_metadata['duotone'] );
+		}
+
 		$styles = gutenberg_style_engine_generate(
 			$block_styles,
 			array(
@@ -546,7 +550,6 @@ function( $pseudo_selector ) use ( $selector ) {
 		}
 
 		// 3. Generate and append the rules that use the duotone selector.
-		// @TODO migrate duotone to style engine
 		// if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
 		// $selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
 		// $block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -152,6 +152,14 @@ class WP_Style_Engine {
 				),
 			),
 		),
+		'filter'     => array(
+			'duotone' => array(
+				'property_keys' => array(
+					'default' => 'filter',
+				),
+				'path'          => array( 'filter', 'duotone' ),
+			),
+		),
 		'spacing'    => array(
 			'padding'  => array(
 				'property_keys' => array(

diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json
@@ -246,8 +246,8 @@
 				}
 			},
 			"core/image": {
-				"color": {
-					"duotone": "#ffffff"
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--primary-and-tertiary)"
 				}
 			},
 			"core/group": {