Duotone filter not reflected on the frontend

[vivekawsm]

Description

When adding duotone filter to an image, it is properly reflected on the backend, but when we preview it from the frontend, it is not reflected. Also adding an alignment option will cause the UI elements to be out of place.

Environment

• WordPress: 6.3-beta3-56143
• PHP: 7.4.33
• Server: TasteWP-S1 Official/3.0.0
• Database: mysqli (Server: 8.0.32-0ubuntu0.20.04.2 / Client: mysqlnd 7.4.33)
• Browser: Chrome 114.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty 2.2
• MU-Plugins: None activated
• Plugins:
  • WordPress Beta Tester 3.5.0

Steps to reproduce:
Activate Twenty Twenty theme.
Insert image
Apply duotone filter and alignment
View on frontend

Expected result:
Duotone filter and proper alignment should be reflected in the frontend

Actual result:
The duotone filter and alignment is not reflected properly.

[vivekawsm]

Backend

[vivekawsm]

Frontend

[sabernhardt]

The duotone issue seems to happen in any 'classic' theme (I did not have the duotone effect on the front with Twenty Ten through Twenty Twenty-One and WP6.3 beta 3). It could be related to the refactoring in [56101].

Twenty Twenty's alignment issue is old (#48718).

[spacedmonkey]

Related: #58673.

[spacedmonkey]

In my testing, I am seeing the SVG output AFTER the html element. I believe this is related to the fact the classic themes, render blocks on the fly. Where as block themes render block before any HTML is output.

Related discussion. ​#49927.

The style engine runs before blocks get rendered in classic themes, and duotone queues up styles while blocks are rendered, so the styles never get output on the page.

I've fixed it in this patch by generating the duotone styles again in wp_footer for classic themes.

Trac ticket: https://core.trac.wordpress.org/ticket/58734

[ajlende]

I should note that ​PR #4839 is only fixing the duotone part and doesn't attempt to fix the alignment issue.

[mrinal013]

WP environment

[mrinal013]

Test

Environment

Result

Backend: ​https://prnt.sc/EXGf9WYx-pqd
Frontend: ​https://prnt.sc/dDoGpFI1_22b

So, at WordPress: 6.3-beta3-56168 Duotone filter is working without this patch from this environment.

[costdev]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/4839.diff

Environment

• WordPress: 6.3-beta4-56216
• PHP: 7.4.33
• Server: Apache/2.4.56 (Ubuntu)
• Database: mysqli (Server: 5.7.41-0ubuntu0.18.04.1 / Client: mysqlnd 7.4.33)
• Browser: Chrome 114.0.0.0 (Windows 10/11)
• Theme: Twenty Twenty-One 1.8
• MU-Plugins: None activated.
• Plugins:
  • WordPress Beta Tester 3.5.2

Actual Results

• Before the patch: Duotone did not work on the frontend for Site Logo, Post Featured Image, Image, Gallery or Cover blocks. Issue reproduced.
• After the patch: Duotone works on the frontend for Site Logo, Post Featured Image, Image, Gallery and Cover blocks. Issue resolved with the patch.

Additional Notes

• Duotone continues to work fine for these blocks when using a block theme (in this case, Twenty-Twenty Three).

Does this need to be fixed in Gutenberg too?

Yeah, we'll want to port this change and #4831 back into the plugin once they're merged here to keep things in sync.

[isabel_brison]

In 56225:

Editor: fix duotone filters in classic themes.

Makes sure duotone block styles are output in the front end on classic themes.

Props ajlende, jeryj, spacedmonkey, vivekawsm, sabernhardt, costdev, mrinal013.
Fixes #58734.

Committed in r56225 / ​23a1516.

[gregoryrutecki]

Hi, you have actually broke the duotone functionality. Today came out the update (WordPress 6.3) which broke duotone.

This commit doesn't seem to have been backported to Gutenberg, so I've submitted the PR below.

​https://github.com/WordPress/gutenberg/pull/54778