Add filter for duotone to account for gutenberg_restore_image_outer_container in classic themes

[ajlende]

What?

Fixes an issue with duotone filters not working in aligned images in classic themes.

Why?

Fixes #54121

How?

Adds a filter to restore the generated duotone class name for blocks that get a wrapping div due to gutenberg_restore_image_outer_container.

It isn't the most elegant solution, but it works. I'm open to other suggestions.

Unfortunately we can't just change the priority on the layout core/image filter since the block filters run after all the general filters where duotone is added.

And I didn't see a filter to update the block metadata at render time.

So I ended up with a filter that moves the class after the fact.

Testing Instructions

1. Switch to a classic theme such as Twenty Twenty.
2. Add images with combinations of duotone and alignments.
3. In the rendered page, see that the duotone filters work.

Here's the example HTML post content from the screenshots using Twenty Twenty.

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.34%"} -->
<div class="wp-block-column" style="flex-basis:33.34%"><!-- wp:image {"width":"100px","sizeSlug":"large","linkDestination":"none","align":"left","style":{"color":{"duotone":"var:preset|duotone|purple-green"}}} -->
<figure class="wp-block-image alignleft size-large is-resized"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.34%"} -->
<div class="wp-block-column" style="flex-basis:33.34%"><!-- wp:image {"width":"100px","sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000000","#cb2954"]}}} -->
<figure class="wp-block-image size-large is-resized"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"width":"100px","sizeSlug":"large","linkDestination":"none","align":"left","style":{"color":{"duotone":["#cd2653","#f5efe0"]}},"className":"is-resized"} -->
<figure class="wp-block-image alignleft size-large is-resized"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"width":"100px","sizeSlug":"large","linkDestination":"none","align":"left","style":{"color":{"duotone":"var:preset|duotone|blue-orange"}},"className":"is-resized"} -->
<figure class="wp-block-image alignleft size-large is-resized"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"/></figure>
<!-- /wp:image -->

<!-- wp:image {"width":"100px","sizeSlug":"large","linkDestination":"none","align":"right","style":{"color":{"duotone":["#000000","#dcd7ca"]}},"className":"is-resized"} -->
<figure class="wp-block-image alignright size-large is-resized"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"/></figure>
<!-- /wp:image -->

<!-- wp:image {"width":"100px","sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#858585","#f5efe0"]}},"className":"is-resized"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"/></figure>
<!-- /wp:image -->

Testing Instructions for Keyboard

N/A

Screenshots or screencast

Showing images with duotone in multiple contexts in Twenty Twenty. As you can see, before the aligned images didn't get the duotone filters while the unaligned ones did.

Before

<div class="wp-block-image">
<figure class="wp-duotone-purple-green alignleft size-large is-resized"><img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"></figure></div>

After

<div class="wp-block-image wp-duotone-purple-green">
<figure class="alignleft size-large is-resized"><img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/5/57/Aristotle_transparent.png" alt="" style="width:100px"></figure></div>

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: sabernhardt <sabernhardt@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[scruffian]

Looking at the way that wp_restore_image_outer_container works in core, (https://github.com/WordPress/wordpress-develop/blob/234ec16baf99361e93941e4f2edad6e1de92bc88/src/wp-includes/block-supports/layout.php#L946), it seems this function used to add a <div> around aligned images. With this PR I think that no longer happens. Is that OK?

[ajlende]

it seems this function used to add a <div> around aligned images. With this PR I think that no longer happens. Is that OK?

The wrapper <div> should still be there. Is it not in your testing?

With the gutenberg plugin, the core version of the layout filter is replaced with the identical gutenberg version (3561d77/lib/block-supports/layout.php#L1024).

gutenberg/lib/block-supports/layout.php

Lines 1071 to 1074 in 3561d77

	if ( function_exists( 'wp_restore_image_outer_container' ) ) {
	remove_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );
	}
	add_filter( 'render_block_core/image', 'gutenberg_restore_image_outer_container', 10, 2 );

So with the plugin active, both Gutenberg layout hook and the new duotone hook should be running. The duotone one runs after the layout one because of the order they're defined in

gutenberg/lib/load.php

Line 210 in d7e80e6

// Block supports overrides.

.

When this gets backported to core, the same should happen with the core version of the functions. Although, it looks like the imports will have to be reordered during the core backport (https://github.com/WordPress/wordpress-develop/blob/9a616a573434b432a5efd4de21039250658371fe/src/wp-settings.php#L371).

In my opinion, with the way WordPress code is written with side effects in many files, the way that we mostly centralize imports, the size of the codebase, and the number of contributors, it makes more sense for use to just preserve the order of imports when backporting things to not have to worry so much about priority levels. It seems better to me to maintain that order than force extenders to use extra high priorities to override core behavior.

[scruffian]

Ah ok I get it now thanks. It's working as expected.