From 3346b9aaf4fd250de1158076820bb857bb74fe15 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 31 Mar 2023 11:18:09 +1000
Subject: [PATCH] Correct experimental BC comments and tweak flow

---
 lib/class-wp-duotone-gutenberg.php         | 25 ++++++++--------
 packages/block-editor/src/hooks/duotone.js | 33 +++++++++++-----------
 2 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php
index 22d25e485d509..4d15b0b96381c 100644
--- a/lib/class-wp-duotone-gutenberg.php
+++ b/lib/class-wp-duotone-gutenberg.php
@@ -275,12 +275,18 @@ private static function get_selector( $block_name ) {
 		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
 
 		if ( $block_type && property_exists( $block_type, 'supports' ) ) {
-			// Backwards compatibility for color.__experimentalDuotone. This will
-			// have priority over filter.duotone support. Unfortunately we can't
-			// prefer filter.duotone because it gets set when __experimentalDuotone
-			// is set via a block_type_metadata_settings hook. It shouldn't be too
-			// much of a problem because I would expect consumers to not use both
-			// at the same time.
+			// Backwards compatibility with `supports.color.__experimentalDuotone`
+			// is provided via the `block_type_metadata_settings` filter. If
+			// `supports.filter.duotone` has not been set and the experimental
+			// property has been, the experimental property value is copied into
+			// `supports.filter.duotone`.
+			$duotone_support = _wp_array_get( $block_type->supports, array( 'filter', 'duotone' ), false );
+			if ( ! $duotone_support ) {
+				return null;
+			}
+
+			// If the experimental duotone support was set, that value is to be
+			// treated as a selector and requires scoping.
 			$experimental_duotone = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
 			if ( $experimental_duotone ) {
 				$root_selector = wp_get_block_css_selector( $block_type );
@@ -289,13 +295,6 @@ private static function get_selector( $block_name ) {
 					: $root_selector;
 			}
 
-			// Support flag `filter.duotone` will be populated from the previous
-			// `color.__experimentalDuotone` support via block_type_metadata_settings filter.
-			$duotone_support = _wp_array_get( $block_type->supports, array( 'filter', 'duotone' ), false );
-			if ( ! $duotone_support ) {
-				return null;
-			}
-
 			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
 			return wp_get_block_css_selector( $block_type, array( 'filter', 'duotone' ), true );
 		}
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 7c4ce08636777..c3aac777a396b 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -312,12 +312,22 @@ const withDuotoneStyles = createHigherOrderComponent(
 			const blockType = getBlockType( props.name );
 
 			if ( blockType ) {
-				// Backwards compatibility for color.__experimentalDuotone. This will
-				// have priority over filter.duotone support. Unfortunately we can't
-				// prefer filter.duotone because it gets set when __experimentalDuotone
-				// is set via a block_type_metadata_settings hook. It shouldn't be too
-				// much of a problem because I would expect consumers to not use both
-				// at the same time.
+				// Backwards compatibility for `supports.color.__experimentalDuotone`
+				// is provided via the `block_type_metadata_settings` filter. If
+				// `supports.filter.duotone` has not been set and the
+				// experimental property has been, the experimental property
+				// value is copied into `supports.filter.duotone`.
+				const duotoneSupport = getBlockSupport(
+					blockType,
+					'filter.duotone',
+					false
+				);
+				if ( ! duotoneSupport ) {
+					return null;
+				}
+
+				// If the experimental duotone support was set, that value is
+				// to be treated as a selector and requires scoping.
 				const experimentalDuotone = getBlockSupport(
 					blockType,
 					'color.__experimentalDuotone',
@@ -330,17 +340,6 @@ const withDuotoneStyles = createHigherOrderComponent(
 						: rootSelector;
 				}
 
-				// Support flag `filter.duotone` will be populated from the previous
-				// `color.__experimentalDuotone` support via block_type_metadata_settings filter.
-				const duotoneSupport = getBlockSupport(
-					blockType,
-					'filter.duotone',
-					false
-				);
-				if ( ! duotoneSupport ) {
-					return null;
-				}
-
 				// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
 				return getBlockCSSSelector( blockType, 'filter.duotone', {
 					fallback: true,