Duotone: Use the style engine to generate CSS for Duotone (#48281)

* Duotone: Use the style engine to generate CSS for Duotone

* filter for kses to allow filter css rule with url if url is of wp-duotone format

* comment for how style engine call works and match expression for filter in css string

* Update lib/block-supports/duotone.php

---------

Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com>

lib/block-supports/duotone.php

@@ -462,15 +462,26 @@ function gutenberg_render_duotone_support( $block_content, $block ) {
 	}
 	$selector = implode( ', ', $scoped );
 
-	// !important is needed because these styles render before global styles,
-	// and they should be overriding the duotone filters set by global styles.
-	$filter_style = SCRIPT_DEBUG
-		? $selector . " {\n\tfilter: " . $filter_property . " !important;\n}\n"
-		: $selector . '{filter:' . $filter_property . ' !important;}';
-
-	wp_register_style( $filter_id, false, array(), true, true );
-	wp_add_inline_style( $filter_id, $filter_style );
-	wp_enqueue_style( $filter_id );
+	// Calling gutenberg_style_engine_get_stylesheet_from_css_rules ensures that
+	// the styles are rendered in an inline for block supports because we're
+	// using the `context` option to instruct it so.
+	gutenberg_style_engine_get_stylesheet_from_css_rules(
+		array(
+			array(
+				'selector'     => $selector,
+				'declarations' => array(
+					// !important is needed because these styles
+					// render before global styles,
+					// and they should be overriding the duotone
+					// filters set by global styles.
+					'filter' => $filter_property . ' !important',
+				),
+			),
+		),
+		array(
+			'context' => 'block-supports',
+		)
+	);
 
 	if ( 'unset' !== $colors ) {
 		$filter_svg = gutenberg_get_duotone_filter_svg( $filter_preset );

lib/experimental/kses.php

@@ -65,3 +65,25 @@ function gutenberg_override_core_kses_init_filters() {
 // The 'kses_init_filters' is usually initialized with default priority. Use higher priority to override.
 add_action( 'init', 'gutenberg_override_core_kses_init_filters', 20 );
 add_action( 'set_current_user', 'gutenberg_override_core_kses_init_filters' );
+
+/**
+ * See https://github.com/WordPress/wordpress-develop/pull/4108
+ *
+ * Mark CSS safe if it contains a "filter: url('#wp-duotone-...')" rule.
+ *
+ * This function should not be backported to core.
+ *
+ * @param bool   $allow_css Whether the CSS is allowed.
+ * @param string $css_test_string The CSS to test.
+ */
+function allow_filter_in_styles( $allow_css, $css_test_string ) {
+	if ( preg_match(
+		"/^filter: url\('#wp-duotone-[-a-zA-Z0-9]+'\) \!important$/",
+		$css_test_string
+	) ) {
+		return true;
+	}
+	return $allow_css;
+}
+
+add_filter( 'safecss_filter_attr_allow_css', 'allow_filter_in_styles', 10, 2 );