Make WordPress Core

Opened 8 months ago

Closed 8 months ago

Last modified 5 months ago

#58734 closed defect (bug) (fixed)

Duotone filter not reflected on the frontend

Reported by: vivekawsm's profile vivekawsm Owned by: isabel_brison's profile isabel_brison
Milestone: 6.3 Priority: high
Severity: critical Version: 6.3
Component: Editor Keywords: has-patch has-testing-info
Focuses: Cc:

Description

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.

Attachments (3)

Screenshot 2023-07-06 192101.png (221.0 KB) - added by vivekawsm 8 months ago.
Backend
Screenshot 2023-07-06 192142.png (353.6 KB) - added by vivekawsm 8 months ago.
Frontend
Screenshot from 2023-07-13 03-22-17.png (53.7 KB) - added by mrinal013 8 months ago.
WP environment

Download all attachments as: .zip

Change History (20)

#1 @sabernhardt
8 months ago

  • Component changed from Bundled Theme to Editor
  • Milestone changed from Awaiting Review to 6.3
  • Summary changed from Twenty Twenty Theme: Duotone filter not reflected on the frontend to Duotone filter not reflected on the frontend
  • Version set to trunk

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).

#2 @mikinc860
8 months ago

  • Keywords needs-patch added

This ticket was mentioned in Slack in #core by sabernhardt. View the logs.


8 months ago

This ticket was mentioned in Slack in #core-editor by costdev. View the logs.


8 months ago

#5 @spacedmonkey
8 months ago

  • Priority changed from normal to high
  • Severity changed from normal to critical

#7 @spacedmonkey
8 months ago

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.

This ticket was mentioned in PR #4839 on WordPress/wordpress-develop by @ajlende.


8 months ago
#8

  • Keywords has-patch added; needs-patch removed

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

#9 @ajlende
8 months ago

  • Keywords needs-patch added; has-patch removed

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

This ticket was mentioned in Slack in #core by spacedmonkey. View the logs.


8 months ago

#11 @mrinal013
8 months ago

Test

Environment

https://core.trac.wordpress.org/attachment/ticket/58734/Screenshot%20from%202023-07-13%2003-22-17.png

Result

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

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

Version 0, edited 8 months ago by mrinal013 (next)

#12 @costdev
8 months ago

  • Keywords has-patch has-testing-info added; needs-patch removed

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).
Last edited 8 months ago by costdev (previous) (diff)

@ajlende commented on PR #4839:


8 months ago
#13

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.

#14 @isabel_brison
8 months ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from new to closed

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.

@isabel_brison commented on PR #4839:


8 months ago
#15

Committed in r56225 / 23a1516.

#16 @gregoryrutecki
7 months ago

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

@wildworks commented on PR #4839:


5 months ago
#17

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

Note: See TracTickets for help on using tickets.