Fix custom duotone filters in frontend

[ajlende]

What?

Fixes an issue where custom duotone filters weren't rendering to the page due to kses.

Why?

Bug fix

How?

Makes the kses filter more forgiving by:

1. Allowing CSS urls with single, double, or no quotes around the path.
2. Making !important optional at the end.

Testing Instructions

1. Create a post with a block using custom duotone filters
2. Save and view the post. Duotone filters should show correctly.

Example Post Content

This example makes 2 assumptions about your theme.

1. A contrast duotone filter is defined.
2. A filter is applied via theme.json styles to the image and cover blocks.

<!-- wp:heading -->
<h2 class="wp-block-heading">Duotone core preset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"http://placekitten.com/800/400","dimRatio":0,"isDark":false,"style":{"color":{"duotone":"var:preset|duotone|midnight"}}} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="http://placekitten.com/800/400" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Preset slug: midnight</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Duotone theme preset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"http://placekitten.com/800/400","dimRatio":0,"isDark":false,"style":{"color":{"duotone":"var:preset|duotone|contrast"}}} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="http://placekitten.com/800/400" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Preset slug: contrast</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Duotone custom filter</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"http://placekitten.com/800/400","dimRatio":0,"isDark":false,"style":{"color":{"duotone":["rgb(92, 51, 10)","#fcf2e8"]}}} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="http://placekitten.com/800/400" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Custom sepia filter</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Duotone unset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"http://placekitten.com/800/400","dimRatio":0,"isDark":false,"style":{"color":{"duotone":"unset"}}} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="http://placekitten.com/800/400" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">This should never have a filter applied.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Duotone theme.json styles (plain block)</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"http://placekitten.com/800/400","dimRatio":0,"isDark":false} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="http://placekitten.com/800/400" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
<p class="has-text-align-center">This depends on <code>styles.blocks['core/cover'].filter.duotone being set</code> to the CSS custom property for a preset.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image core preset</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":"var:preset|duotone|midnight"}}} -->
<figure class="wp-block-image"><img src="http://placekitten.com/800/400" alt=""/><figcaption class="wp-element-caption">Preset slug: midnight</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image theme preset</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":"var:preset|duotone|contrast"}}} -->
<figure class="wp-block-image"><img src="http://placekitten.com/800/400" alt=""/><figcaption class="wp-element-caption">Preset slug: contrast</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image custom filter</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":["rgb(92, 51, 10)","#fcf2e8"]}}} -->
<figure class="wp-block-image"><img src="http://placekitten.com/800/400" alt=""/><figcaption class="wp-element-caption">Custom sepia filter</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image unset</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{"duotone":"unset"}}} -->
<figure class="wp-block-image"><img src="http://placekitten.com/800/400" alt=""/><figcaption class="wp-element-caption">This should never have a filter applied</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Image theme.json styles (plain block)</h2>
<!-- /wp:heading -->

<!-- wp:image {"style":{"color":{}}} -->
<figure class="wp-block-image"><img src="http://placekitten.com/800/400" alt=""/><figcaption class="wp-element-caption"><code>styles.blocks['core/image'].filter.duotone</code></figcaption></figure>
<!-- /wp:image -->

Testing Instructions for Keyboard

Screenshots or screencast

[jeryj]

Works for showing images with both theme and global style defined duotone on the frontend in both cover and image blocks. The post editor isn't showing the duotone applied for these though, only on the frontend of the site.