Skip to content

Duotone affects the image block media placeholder #76720

@carolinan

Description

@carolinan

Description

When a duotone is applied to an image block that has no image yet, the duotone should show on the placeholder illustration.

But it also shows when the block is selected and you are presented with the options to add an image.
This can make the text and controls difficult to read and use.
Not all duotones have a low color contrast, but it is still unexpected that it should affect this part of the interface.

It looks like a CSS rule that removed the duotone filter from the placeholder was removed here:
https://github.com/WordPress/gutenberg/pull/64320/changes#diff-f93477dddb6b550a7803437e4c354e47ce1925f0b9341ee23fda16f1e94776cdL13

As far as I can tell, it affects WP 6.8 and newer.

It may be worth testing other image related blocks too.

Step-by-step reproduction instructions

  1. Activate a theme that has duotones. If you use Twenty Twenty-Five, first select the Midnight style variation, it is the only one that has a duotone.
  2. Insert an image block.
  3. If you are using TT5 with Midnight, the duotone is already applied, otherwise, apply one.
  4. Confirm if the placeholder where you add the image has the duotone (The block is selected).
  5. Confirm if the placeholder illustration has the duotone. though it may be faint (The block is not selected).

If number four is true, you encountered the bug.

Screenshots, screen recording, code snippet

The screenshot shows an image block that has a duotone applied, and the block is selected but has no image added yet:
Image block with instructions and options for selecting an image. the elements are grey on grey background with  a low color contrast.

Environment info

WordPress 6.8 or newer, with or without Gutenberg.

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

Labels

[Block] ImageAffects the Image Block[Type] BugAn existing feature does not function as intended

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions