From 17ab41d43753b439fda90011384f3d5dcb13ef5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 29 Mar 2023 13:34:15 +0200
Subject: [PATCH 1/5] Use whole selectors for duotone as well

---
 packages/block-library/src/image/block.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index b54358fc48d6a4..75a49d35d829a8 100644
--- a/packages/block-library/src/image/block.json
+++ b/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": [

From 7f6b31db4d8c229624e14ec4bfba62f68b57a7a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 29 Mar 2023 14:07:05 +0200
Subject: [PATCH 2/5] Backward compatibility for old API

The old API didn't have the whole selector, just parts of it,
so we need to add the root.
---
 .../get-global-styles-and-settings.php        | 45 ++++++++++++++-----
 1 file changed, 34 insertions(+), 11 deletions(-)

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..50edf972ad2b70 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,40 @@ 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;

From 8fc311088223164510f5090c611dd227f5c418bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 29 Mar 2023 14:18:51 +0200
Subject: [PATCH 3/5] Update the block-level duotone selector

Before: .wp-duotone .wp-block-name
After:  .wp-duotone.wp-blockname
---
 lib/class-wp-duotone-gutenberg.php | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

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 ) ) {

From dac72aeb2b244c84555684d57d0e730055f09b1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 29 Mar 2023 14:24:15 +0200
Subject: [PATCH 4/5] Fix lint issues

---
 lib/compat/wordpress-6.3/get-global-styles-and-settings.php | 1 -
 1 file changed, 1 deletion(-)

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 50edf972ad2b70..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
@@ -43,7 +43,6 @@ 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.

From 70198b9811c1bdc99579e272a72af3dae0ec9138 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 29 Mar 2023 14:43:39 +0200
Subject: [PATCH 5/5] Remove __experimentalDuotone from image, no longer needed

---
 packages/block-library/src/image/block.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 75a49d35d829a8..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
 		},