comment for how style engine call works and match expression for filt…

…er in css string

lib/block-supports/duotone.php

@@ -462,13 +462,18 @@ 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.
+	// Calling gutenberg_style_engine_get_stylesheet_from_css_rules ensures that
+	// the styles are rendered in an inline for block supports because we're
+	// useing 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',
 				),
 			),

lib/experimental/kses.php

@@ -77,7 +77,10 @@ function gutenberg_override_core_kses_init_filters() {
  * @param string $css_test_string The CSS to test.
  */
 function allow_filter_in_styles( $allow_css, $css_test_string ) {
-	if ( strpos( $css_test_string, "filter: url('#wp-duotone" ) !== false ) {
+	if ( preg_match(
+		"/^filter: url\('#wp-duotone-[-a-zA-Z0-9]+'\) \!important$/",
+		$css_test_string
+	) ) {
 		return true;
 	}
 	return $allow_css;