From fc8fb0e5ce923d69995cab368412fa6002e3f5d2 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 24 Mar 2023 15:22:32 +1000
Subject: [PATCH] Duotone: Update to use selectors API

---
 lib/class-wp-duotone-gutenberg.php          | 10 ++++++----
 packages/block-editor/src/hooks/duotone.js  | 13 ++++++++-----
 packages/block-library/src/image/block.json |  7 +++++--
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php
index 090696fca0a14..8e7d61fafef58 100644
--- a/lib/class-wp-duotone-gutenberg.php
+++ b/lib/class-wp-duotone-gutenberg.php
@@ -235,9 +235,11 @@ public static function output_global_styles() {
 	public static function render_duotone_support( $block_content, $block ) {
 		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
 
-		$duotone_support = false;
-		if ( $block_type && property_exists( $block_type, 'supports' ) ) {
-			$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
+		$duotone_support  = false;
+		$duotone_selector = null;
+		if ( $block_type ) {
+			$duotone_selector = wp_get_block_css_selector( $block_type, 'filters.duotone' );
+			$duotone_support  = (bool) $duotone_selector;
 		}
 
 		// The block should have a duotone attribute or have duotone defined in its theme.json to be processed.
@@ -308,7 +310,7 @@ 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_support );
+		$selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_selector );
 
 		// 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/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index b56d9f64b4e83..e5df47cb28974 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -8,7 +8,11 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockSupport,
+	getBlockType,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
@@ -269,10 +273,9 @@ function BlockDuotoneStyles( { name, duotoneStyle, id } ) {
 		colors = getColorsFromDuotonePreset( colors, duotonePalette );
 	}
 
-	const duotoneSupportSelectors = getBlockSupport(
-		name,
-		'color.__experimentalDuotone'
-	);
+	const duotoneSupportSelectors =
+		getBlockType( name ).selectors?.filters?.duotone ||
+		getBlockSupport( name, 'color.__experimentalDuotone' );
 
 	// Extra .editor-styles-wrapper specificity is needed in the editor
 	// since we're not using inline styles to apply the filter. We need to
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 2342aa44d6730..b3f7acf39ac84 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -85,7 +85,7 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": "img, .components-placeholder",
+			"__experimentalDuotone": true,
 			"text": false,
 			"background": false
 		},
@@ -102,7 +102,10 @@
 		}
 	},
 	"selectors": {
-		"border": ".wp-block-image img"
+		"border": ".wp-block-image img",
+		"filters": {
+			"duotone": "img, .components-placeholder"
+		}
 	},
 	"editorSelectors": {
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area"