Twenty Twenty-Two (Mint) theme shows all images in black and white

[tvolpert]

Quick summary

Any image added to a site using the Twenty Twenty-Two (Mint) theme has a black and white duotone filter applied. None of the other flavors of Twenty Twenty-Two seem to be affected.

IMPORTANT NOTE: This is NOT a bug of the theme, but rather an issue with Gutenberg. See this comment below.

This issue will remain open for visibility until the Gutenberg issue has been addressed.

Steps to reproduce

Activate the Twenty Twenty-Two (Mint) theme on a test site, and add an image or gallery block to any page or post.

What you expected to happen

The pictures should be shown in full color.

What actually happened

All images display with a Black and White duotone filter. Hitting "clear" from the Duotone button on the block toolbar does nothing.

Context

User report: 34045134-hc

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Twenty Twenty Two (Mint)

Browser, operating system and other notes

Chrome and Safari on MacOS.

Checking in dev tools, I can see the following from the theme's CSS:

.wp-block-image img {
    filter: var(--wp--preset--duotone--default-filter);
}

So the default duotone filter is being applied to all img elements whose parent belongs to the wp-block-image class – which, as far as I know, is pretty much ALL images on a WP site.

You can add a different Duotone filter, and it will display properly, but if cleared, it will return to the black and white default

Adding a custom Duotone filter results in the following:

.wp-duotone-6202f37045d67 img {
    filter: url('#wp-duotone-6202f37045d67') !important;
}

So I think the first rule just needs to be deleted entirely? Or at least made overridable by the user, somehow.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

You can override the behavior with the following CSS snippet:

.wp-block-image img {
    filter: none!important;
}

Any custom duotone filters added by the user will have their own classes generated, so this doesn't affect that functionality.

[vipulpradhan]

User report: 4782455-zen

Was able to reproduce this issue on 'Pink' version as well. Tested and confirmed that the main 'Twenty Twenty-Two' theme does not have the grayscale duotone effect as default.

Because the user is on Personal plan, I advised switching to the main 'Twenty Twenty-Two' theme while preserving their homepage content.

[formosattic]

+1 4780109-zd-woothemes
Sent CSS workaround.

[jordesign]

This probably needs to be transferred to the Themes GH repo - but I'm just pinging for a gut check.
p1645386161641019-slack-C029FM1EH

[1dr0]

Also encountered on 4786473-zen (Personal).

Suggested to the user to activate the main Twenty Twenty-Two theme, as the "Pink" version defaults to duotone on all images.

[carinapilar]

I don't see any updates on the Slack thread mentioned above, so I'll share another report on 20512734-hc - user activated Twenty Twenty-Two (Pink) and all images on the site turned into black and white. I recommended activating Twenty Twenty-Two instead.

[KirkwallDay]

Another report here: 4836332-zen this one is the (Mint) varient.

[metabreakr]

This also affects Skatepark, reported here: https://wordpress.com/forums/topic/image-green-filter/?view=all

[supernovia]

Noting re: Skatepark that even changing the site's default colors to something else keeps the duotone going in bright green.

[supernovia]

We have another case in Twenty Twenty Two Mint: https://wordpress.com/forums/topic/customisation-16/

[mxhassani]

Similar case here: 4863474-zen

Workaround provided:

body {
  --wp--preset--duotone--default-filter : none;
}

[jp-imagines]

Another case in 4876729-zd-woothemes (using Twenty Twenty-Two (Pink)). Only seems to have affected the logo, so I provided this:

.wp-block-site-logo img {
    filter: unset;
}

[wiesenhauss]

4880218-zen

Same issue on Twenty Twenty-Two (Swiss). The workaround provided by tvolpert works there as well.

[xue28]

4881833-zen

Another ticket here: Twenty Twenty-Two (Pink)

[khristiansnyder]

Any updates? Have another user with the same issue on Twenty Twenty-Two (swiss). #34637558-hc
User would like an update if that does get resolved.

[madhusudhand]

@kjellr Following themes has duotone filter applied to all images. figma designs also has duotone images for these.
Can you suggest on this design change.

• twentytwentytwo-swiss
• twentytwentytwo-mint
• twentytwentytwo-pink

[MaggieCabrera]

This is not a bug on the theme, this filter is intended for those variations. The existing bugs are on Gutenberg so that users will be able to disable the filter if they want to:

• Unset duotone filters defined in theme.json per block WordPress/gutenberg#38504
• Allow for Global Block-level configuration of duotone WordPress/gutenberg#34122

We can leave this issue open if it's helpful for HEs, but the themes are working as intended, if users don't want these filters, that option will come from GB when those issues are fixed.

[kjellr]

That's correct, this is intended, and is shown on the theme demos and in the preview. For example:

https://twentytwentytwomintdemo.wordpress.com
https://twentytwentytwoswissdemo.wordpress.com

As Maggie noted we're waiting for Gutenberg functionality that will allow folks to turn that off globally. And also there's a very confusing bug (WordPress/gutenberg#35331) that doesn't apply duotone in the Site Editor, or in pattern previews.

[KokkieH]

Noting https://wordpress.org/support/topic/disable-duotone-on-images/ (Skatepark) for follow-up once the issues in GB are fixed.

[supernovia]

Noting this one for follow-up as well:
https://wordpress.com/forums/topic/twenty-twenty-two-theme/

[edwinho89]

5295918-zd-woothemes applied this workaround provided in the earlier comments.

body {
  --wp--preset--duotone--default-filter : none;
}

[khristiansnyder]

Came up again in Skatepark. User couldn't set their own duotone filters despite the preview looking okay.
35812565-hc

Gave CSS to fix:

body {
  --wp--preset--duotone--default-filter : none;
}

[jerrysarcastic]

Also reported in https://wordpress.com/forums/topic/color-16

Theme: Skatepark

Also gave CSS to fix

[Jaykame]

Reported in 35539001-hc

Theme: Skatepark

Applied a CSS for workaround.

[rw-ye]

User report: 5307216-zd-woothemes

Theme: Skatepark

Personal plan.

[KokkieH]

https://wordpress.com/forums/topic/image-duatone-filter-not-working/

Skatepark

Free plan

[ClassicRKR27]

• Another report here: 35883779-hc

Applied CSS fix to resolve the issue

Skatepark

Pro Plan

[happychait]

Another report in 5308136-zen

[devNigel]

Another report: 35931018-hc

Skatepark
Pro plan

Shared CSS fix.

[KokkieH]

https://wordpress.com/forums/topic/black-and-white-images/?view=all

TT2 Mint

Free plan

[poeticabdul]

User from 35726031-hc and 35800836-hc came back. CSS shared with them didn't work.

In this chat 35986447-hc, I shared this CSS code with them.

img {
    filter: none !important;
}

[Babylon1999]

Another case here: 5433083-zd

I provided the CSS workaround.

Note:

I noticed that force switching to the black and white Dune tone in Gutenberg and removing it seems to fix this, I don't know what's triggering the problem thou so I'm not sure it will switch back in the future. Might be useful for non-CSS enabled sites.

[syds87]

Another case reported here: 36256873-hc using Twenty Twenty-Two Mint. Solved with CSS workaround

[jamiepalatnik]

Another report: 3547318-hc

Shared CSS workaround.

[ClassicRKR27]

Another report for Skatepark: 36629405-hc

CSS workaround did the trick, user was happy with the result

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 4782455-zen
• 4780109-zen
• 4786473-zen
• 4836332-zen
• 4863474-zen
• 4876729-zen
• 4880218-zen
• 4881833-zen
• 4908220-zen
• 4908224-zen
• 4920631-zen
• 4931315-zen
• 4951832-zen
• 5164444-zen
• 4963423-zen
• 5182227-zen
• 5191080-zen
• 5211150-zen
• 5253740-zen
• 5285243-zen
• 5294772-zen
• 5295918-zen
• 5307216-zen
• 5308136-zen
• 5433083-zen
• 5961209-zen

[csonnek]

Another report for Twenty Twenty-Two (Pink): https://wordpress.com/forums/topic/no-colour-on-images/?view=all

[kspilarski]

Same case in 14062091-hc , Twenty Twenty Two Mint, free plan.

[cat-og]

Same case with 5961209-zd , Twenty Twenty-Two (Pink), on the Personal Plan.

[MaggieCabrera]

This will be solved once WordPress/gutenberg#48255 merges; the users will be able to unset duotone from the affected blocks globally instead of one by one.

[MaggieCabrera]

that PR got merged today and if everything goes according to plan it will make it to 15.3, feel free to close when that makes it to dotcom!

[jamiepalatnik]

Tested this today related to a user report and it seems to be fixed now. It is probably OK to close and follow up with the affected users, but I'll leave this open for someone else to review to confirm.

[ianstewart]

With no new reports I'm marking this as closed.