Refactor duotone class to allow instancing

[ajlende]

What?

Part 5 in a set of duotone php refactoring to fix small issues in duotone rendering.

• Part 1: Port colord to PHP
• Part 2: Deprecate remaining global duotone functions
• Part 3: Group all duotone outputs
• Part 4: Polish duotone rendering code
• Part 5: Refactor duotone class to allow for multiple instances (this PR)

This part changes the architecture of the duotone class to allow for instancing.

Why?

This allows for more flexibility in the future if we may need multiple instances of the duotone rendering state.

This should also make things a little easier to test since we can just create a new instance rather than resetting the static properties between tests.

How?

• Converts private static properties to be instance properties
• Saves a single instance in the $wp_duotone_support global much like is done for WP_Styles and WP_Scripts.

The first commit shows what it would look like as a singleton instead. I feel like I slightly prefer the global version, but if there's a compelling argument to use a singleton instead I can easily switch back.

Testing Instructions

1. Ensure that duotone filters in all of the example content render the same in the post editor, site editor, and frontend.
2. Test that the custom filters render in classic themes. You can use the same example content which includes some.

Example content for TT3 block-out, canary, and pilgrimage variations

<!-- 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="https://loremflickr.com/640/360" alt="placeholder image" class=""/><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|default-filter"}}} -->
<figure class="wp-block-image"><img src="https://loremflickr.com/640/360" alt="placeholder image" class=""/><figcaption class="wp-element-caption">Preset slug: default-filter</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="https://loremflickr.com/640/360" alt="placeholder image" class=""/><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="https://loremflickr.com/640/360" alt="placeholder image" class=""/><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="https://loremflickr.com/640/360" alt="placeholder image" class=""/><figcaption class="wp-element-caption"><code>settings.styles.blocks['core/image'].filter.duotone</code></figcaption></figure>
<!-- /wp:image -->

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

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":"var:preset|duotone|midnight"}}} -->
<div class="wp-block-cover"><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="placeholder image" src="https://loremflickr.com/640/360" 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">Cover theme preset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":"var:preset|duotone|default-filter"}}} -->
<div class="wp-block-cover"><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="placeholder image" src="https://loremflickr.com/640/360" 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: default-filter</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

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

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":["rgb(92, 51, 10)","#fcf2e8"]}}} -->
<div class="wp-block-cover"><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="placeholder image" src="https://loremflickr.com/640/360" 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">Cover unset</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{"duotone":"unset"}}} -->
<div class="wp-block-cover"><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="placeholder image" src="https://loremflickr.com/640/360" 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">Cover theme.json styles (plain block)</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://loremflickr.com/640/360","dimRatio":0,"style":{"color":{}}} -->
<div class="wp-block-cover"><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="placeholder image" src="https://loremflickr.com/640/360" 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>settings.styles.blocks['core/cover'].filter.duotone being set</code> to the CSS custom property for a preset.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

[github-actions]

Flaky tests detected in f6a59ec1104bc890476a239673f0bfab483eddb1.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4748009529
📝 Reported issues:

• [Flaky Test] shouldn't conflict with server-side autosave #35176 in specs/editor/various/autosave.test.js

[ajlende]

The public functions are tied directly to the hooks that need to be called over the course of a single page render, so instancing doesn't really make sense. If we ever need instancing for another reason, we can make a new class with instancing.