Port colord to PHP

[ajlende]

What?

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

• Part 1: Port colord to PHP (this PR)
• 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 part deprecates tinycolor functions and uses a private port of colord for duotone instead to match the JS.

Why?

• The library was changed in the JavaScript some time ago in Add colord package to block editor; Replace tinycolor2 with colord on duotone #34603. The libraries are quite similar, but there were some edge-cases that may have caused inconsistencies.
• colord's implementation happens to be slightly more performant.

How?

• Switched over to a port of colord instead of the port of tinycolor.
• Deprecated all of the PHP Gutenberg tinycolor functions. It was a mistake to have them public in the first place.

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 b6f7783.
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/4661920005
📝 Reported issues:

• [Flaky Test] should insert elements from multiple completers in a single block #47916 in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js

[ajlende]

Deprecated in https://github.com/WordPress/gutenberg/pull/49702/files#diff-c6cf688aa7b50316afa7fc57327b6ac81c1ac831226447c53ffc88c32fc23750L870-L871

[scruffian]

LGTM

[scruffian]

This would be a good candidate to backport to core now.

[Mamaduka]

This would be a good candidate to backport to core now.

That's a good idea! The new code will also need the PHPUnit tests.