diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php index ff963f46cb4555..8260fd799b3d42 100644 --- a/lib/class-wp-duotone-gutenberg.php +++ b/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 ) ) { diff --git a/lib/compat/wordpress-6.3/get-global-styles-and-settings.php b/lib/compat/wordpress-6.3/get-global-styles-and-settings.php index c213e50d64ae7b..d27d09588b75d1 100644 --- a/lib/compat/wordpress-6.3/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.3/get-global-styles-and-settings.php @@ -25,17 +25,6 @@ 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 @@ -54,6 +43,39 @@ function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = f $root_selector = ".wp-block-{$block_name}"; } + // 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. + // The old API didn't have the whole selector, just parts of it, + // so we need to add the root here for backwards compatibility. + $partial_duotone_selector = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), null ); + + $root_selectors = explode( ',', $root_selector ); + $duotone_selectors = explode( ',', $partial_duotone_selector ); + + $duotone_selector = array(); + foreach ( $root_selectors as $outer ) { + foreach ( $duotone_selectors as $inner ) { + $outer = trim( $outer ); + $inner = trim( $inner ); + if ( ! empty( $outer ) && ! empty( $inner ) ) { + $duotone_selector[] = $outer . ' ' . $inner; + } elseif ( empty( $outer ) ) { + $duotone_selector[] = $inner; + } elseif ( empty( $inner ) ) { + $duotone_selector[] = $outer; + } + } + } + + return implode( ', ', $duotone_selector ); + } + // Return selector if it's the root target we are looking for. if ( 'root' === $target ) { return $root_selector; diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index b54358fc48d6a4..39b663b1978608 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -85,7 +85,6 @@ "supports": { "anchor": true, "color": { - "__experimentalDuotone": true, "text": false, "background": false }, @@ -104,7 +103,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": [