Selectors API: Make duotone selectors fallback and be scoped

lib/class-wp-duotone-gutenberg.php

@@ -349,7 +349,26 @@ public static function render_duotone_support( $block_content, $block ) {
 		$filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) );
 
 		// Build the CSS selectors to which the filter will be applied.
-		$selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_selector );
+		$scopes    = explode( ',', '.' . $filter_id );
+		$selectors = explode( ',', $duotone_selector );
+
+		$selectors_scoped = array();
+		foreach ( $scopes as $outer ) {
+			foreach ( $selectors as $inner ) {
+				$outer = trim( $outer );
+				$inner = trim( $inner );
+				if ( ! empty( $outer ) && ! empty( $inner ) ) {
+					// unlike WP_Theme_JSON_Gutenberg::scope_selector
+					// this concatenates the selectors without a space.
+					$selectors_scoped[] = $outer . '' . $inner;
+				} elseif ( empty( $outer ) ) {
+					$selectors_scoped[] = $inner;
+				} elseif ( empty( $inner ) ) {
+					$selectors_scoped[] = $outer;
+				}
+			}
+		}
+		$selector = implode( ', ', $selectors_scoped );
 
 		// We only want to add the selector if we have it in the output already, essentially skipping 'unset'.
 		if ( array_key_exists( $slug, self::$output ) ) {

lib/class-wp-theme-json-gutenberg.php

@@ -2389,8 +2389,7 @@ function( $pseudo_selector ) use ( $selector ) {
 
 		// 3. Generate and append the rules that use the duotone selector.
 		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 );
+			$block_rules .= static::to_ruleset( $block_metadata['duotone'], $declarations_duotone );
 		}
 
 		// 4. Generate Layout block gap styles.

lib/compat/wordpress-6.3/get-global-styles-and-settings.php

@@ -25,21 +25,7 @@ function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = f
 
 		$has_selectors = ! empty( $block_type->selectors );
 
-		// Duotone (No fallback selectors for Duotone).
-		if ( 'filter.duotone' === $target || array( 'filter', 'duotone' ) === $target ) {
-			// If selectors API in use, only use it's value or null.
-			if ( $has_selectors ) {
-				return _wp_array_get( $block_type->selectors, array( 'filter', 'duotone' ), null );
-			}
-
-			// Selectors API, not available, check for old experimental selector.
-			return _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), null );
-		}
-
-		// Root Selector.
-
-		// Calculated before returning as it can be used as fallback for
-		// feature selectors later on.
+		// Root Selector ( can be used as a fallback ).
 		$root_selector = null;
 
 		if ( $has_selectors && isset( $block_type->selectors['root'] ) ) {
@@ -59,16 +45,34 @@ function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = f
 			return $root_selector;
 		}
 
-		// If target is not `root` or `duotone` we have a feature or subfeature
-		// as the target. If the target is a string convert to an array.
+		$fallback_selector = $fallback ? $root_selector : null;
+
+		// If target is not `root` we have a feature or subfeature as the target.
+		// If the target is a string convert to an array.
 		if ( is_string( $target ) ) {
 			$target = explode( '.', $target );
 		}
 
-		// Feature Selectors ( May fallback to root selector ).
-		if ( 1 === count( $target ) ) {
-			$fallback_selector = $fallback ? $root_selector : null;
+		// Backwards compatibility for supports.__experimentalDuotone selectors.
+		if ( array( 'filter', 'duotone' ) === $target && null === _wp_array_get( $block_type->selectors, $target ) ) {
+			$duotone_selector = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ) );
+
+			// String color.__experimentalDuotone values need to be scoped to the root selector.
+			if ( is_string( $duotone_selector ) ) {
+				return WP_Theme_JSON_Gutenberg::scope_selector( $root_selector, $duotone_selector );
+			}
 
+			// When color.__experimentalDuotone is true, the root selector should be used.
+			if ( true === $duotone_selector ) {
+				return $root_selector;
+			}
+
+			// Experimental duotone support is not enabled.
+			return null;
+		}
+
+		// Feature Selectors ( may fallback to root selector ).
+		if ( 1 === count( $target ) ) {
 			// Prefer the selectors API if available.
 			if ( $has_selectors ) {
 				// Look for selector under `feature.root`.
@@ -95,25 +99,7 @@ function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = f
 			}
 
 			// Scope the feature selector by the block's root selector.
-			$scopes    = explode( ',', $root_selector );
-			$selectors = explode( ',', $feature_selector );
-
-			$selectors_scoped = array();
-			foreach ( $scopes as $outer ) {
-				foreach ( $selectors as $inner ) {
-					$outer = trim( $outer );
-					$inner = trim( $inner );
-					if ( ! empty( $outer ) && ! empty( $inner ) ) {
-						$selectors_scoped[] = $outer . ' ' . $inner;
-					} elseif ( empty( $outer ) ) {
-						$selectors_scoped[] = $inner;
-					} elseif ( empty( $inner ) ) {
-						$selectors_scoped[] = $outer;
-					}
-				}
-			}
-
-			return implode( ', ', $selectors_scoped );
+			return WP_Theme_JSON_Gutenberg::scope_selector( $root_selector, $feature_selector );
 		}
 
 		// Subfeature selector

packages/block-editor/src/components/global-styles/get-block-css-selector.js

@@ -34,21 +34,7 @@ export function getBlockCSSSelector(
 	const hasSelectors = ! isEmpty( selectors );
 	const path = Array.isArray( target ) ? target.join( '.' ) : target;
 
-	// Duotone ( no fallback selectors for Duotone ).
-	if ( path === 'filter.duotone' ) {
-		// If selectors API in use, only use its value or null.
-		if ( hasSelectors ) {
-			return get( selectors, path, null );
-		}
-
-		// Selectors API, not available, check for old experimental selector.
-		return get( supports, 'color.__experimentalDuotone', null );
-	}
-
-	// Root selector.
-
-	// Calculated before returning as it can be used as a fallback for feature
-	// selectors later on.
+	// Root selector ( can be used as fallback ).
 	let rootSelector = null;
 
 	if ( hasSelectors && selectors.root ) {
@@ -68,14 +54,32 @@ export function getBlockCSSSelector(
 		return rootSelector;
 	}
 
+	const fallbackSelector = fallback ? rootSelector : null;
+
+	// Backwards compatibility for supports.__experimentalDuotone selectors.
+	if ( path === 'filter.duotone' && ! get( selectors, path ) ) {
+		const duotoneSelector = get( supports, 'color.__experimentalDuotone' );
+
+		// String color.__experimentalDuotone values need to be scoped to the root selector.
+		if ( typeof duotoneSelector === 'string' ) {
+			return scopeSelector( rootSelector, duotoneSelector );
+		}
+
+		// When color.__experimentalDuotone is true, the root selector should be used.
+		if ( duotoneSelector === true ) {
+			return rootSelector;
+		}
+
+		// Experimental duotone support is not enabled.
+		return null;
+	}
+
 	// If target is not `root` or `duotone` we have a feature or subfeature
 	// as the target. If the target is a string convert to an array.
 	const pathArray = Array.isArray( target ) ? target : target.split( '.' );
 
 	// Feature selectors ( may fallback to root selector );
 	if ( pathArray.length === 1 ) {
-		const fallbackSelector = fallback ? rootSelector : null;
-
 		// Prefer the selectors API if available.
 		if ( hasSelectors ) {
 			// Get selector from either `feature.root` or shorthand path.

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -19,7 +19,7 @@ import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
+import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
 import { GlobalStylesContext } from './context';
@@ -859,10 +859,9 @@ export const toStyles = (
 				if ( duotoneDeclarations.length > 0 ) {
 					ruleset =
 						ruleset +
-						`${ scopeSelector(
-							selector,
-							duotoneSelector
-						) }{${ duotoneDeclarations.join( ';' ) };}`;
+						`${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
 				}
 			}
 

packages/block-editor/src/hooks/duotone.js

@@ -32,6 +32,7 @@ import {
 	__unstableDuotoneStylesheet as DuotoneStylesheet,
 	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
 } from '../components/duotone';
+import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { store as blockEditorStore } from '../store';
 
 const EMPTY_ARRAY = [];
@@ -222,37 +223,6 @@ const withDuotoneControls = createHigherOrderComponent(
 	'withDuotoneControls'
 );
 
-/**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * @example
- * ```js
- * const scope = '.a, .b .c';
- * const selector = '> .x, .y';
- * const merged = scopeSelector( scope, selector );
- * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * ```
- *
- * @param {string} scope    Selector to scope to.
- * @param {string} selector Original selector.
- *
- * @return {string} Scoped selector.
- */
-function scopeSelector( scope, selector ) {
-	const scopes = scope.split( ',' );
-	const selectors = selector.split( ',' );
-
-	const selectorsScoped = [];
-	scopes.forEach( ( outer ) => {
-		selectors.forEach( ( inner ) => {
-			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
-		} );
-	} );
-
-	return selectorsScoped.join( ', ' );
-}
-
 function BlockDuotoneStyles( { name, duotoneStyle, id } ) {
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -273,17 +243,37 @@ function BlockDuotoneStyles( { name, duotoneStyle, id } ) {
 		colors = getColorsFromDuotonePreset( colors, duotonePalette );
 	}
 
-	const duotoneSupportSelectors =
-		getBlockType( name ).selectors?.filter?.duotone ||
-		getBlockSupport( name, 'color.__experimentalDuotone' );
+	const duotoneSupportSelectors = getBlockCSSSelector(
+		getBlockType( name ),
+		'filter.duotone'
+	);
 
 	// Extra .editor-styles-wrapper specificity is needed in the editor
 	// since we're not using inline styles to apply the filter. We need to
 	// override duotone applied by global styles and theme.json.
-	const selectorsGroup = scopeSelector(
-		`.editor-styles-wrapper .${ id }`,
-		duotoneSupportSelectors
-	);
+
+	// This is a JavaScript implementation of the PHP function in lib/class-wp-duotone-gutenberg.php
+	const scopes = ( '.' + id ).split( ',' );
+	const selectors = duotoneSupportSelectors.split( ',' );
+
+	const selectorsScoped = [];
+	scopes.forEach( ( outer ) => {
+		selectors.forEach( ( inner ) => {
+			outer = outer.trim();
+			inner = inner.trim();
+			if ( outer && inner ) {
+				// unlike scopeSelector this concatenates the selectors without a space.
+				selectorsScoped.push(
+					'.editor-styles-wrapper ' + outer + '' + inner
+				);
+			} else if ( outer ) {
+				selectorsScoped.push( '.editor-styles-wrapper ' + inner );
+			} else if ( inner ) {
+				selectorsScoped.push( '.editor-styles-wrapper ' + outer );
+			}
+		} );
+	} );
+	const selectorsGroup = selectorsScoped.join( ',' );
 
 	return createPortal(
 		<InlineDuotone

packages/block-library/src/image/block.json

@@ -104,7 +104,7 @@
 	"selectors": {
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area",
 		"filter": {
-			"duotone": "img, .components-placeholder"
+			"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
 		}
 	},
 	"styles": [

phpunit/class-wp-get-block-css-selectors-test.php

@@ -101,7 +101,7 @@ public function test_get_duotone_selector_via_experimental_property() {
 		);
 
 		$selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );
-		$this->assertEquals( '.experimental-duotone', $selector );
+		$this->assertEquals( '.wp-block-test-experimental-duotone-selector .experimental-duotone', $selector );
 	}
 
 	public function test_no_duotone_selector_set() {
@@ -115,6 +115,28 @@ public function test_no_duotone_selector_set() {
 		$this->assertEquals( null, $selector );
 	}
 
+	public function test_fallback_duotone_selector() {
+		$block_type = self::register_test_block(
+			'test/fallback-duotone-selector',
+			array( 'root' => '.fallback-root-selector' ),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'filter.duotone', true );
+		$this->assertEquals( '.fallback-root-selector', $selector );
+	}
+
+	public function test_fallback_duotone_selector_to_generated_class() {
+		$block_type = self::register_test_block(
+			'test/fallback-duotone-selector',
+			array(),
+			null
+		);
+
+		$selector = wp_get_block_css_selector( $block_type, 'filter.duotone', true );
+		$this->assertEquals( '.wp-block-test-fallback-duotone-selector', $selector );
+	}
+
 	public function test_get_feature_selector_via_selectors_api() {
 		$block_type = self::register_test_block(
 			'test/feature-selector',