themes
themes copied to clipboard
Automattic
Twenty Twenty-Two (Mint) theme shows all images in black and white
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.
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.
This probably needs to be transferred to the Themes GH repo - but I'm just pinging for a gut check. p1645386161641019-slack-C029FM1EH
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.
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.
This also affects Skatepark, reported here: https://wordpress.com/forums/topic/image-green-filter/?view=all
Noting re: Skatepark that even changing the site's default colors to something else keeps the duotone going in bright green.
We have another case in Twenty Twenty Two Mint: https://wordpress.com/forums/topic/customisation-16/
Similar case here: 4863474-zen
Workaround provided:
body {
--wp--preset--duotone--default-filter : none;
}
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;
}
4880218-zen
Same issue on Twenty Twenty-Two (Swiss). The workaround provided by tvolpert works there as well.
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.
@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
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:
- https://github.com/WordPress/gutenberg/issues/38504
- https://github.com/WordPress/gutenberg/issues/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.
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 (https://github.com/WordPress/gutenberg/issues/35331) that doesn't apply duotone in the Site Editor, or in pattern previews.
Noting https://wordpress.org/support/topic/disable-duotone-on-images/ (Skatepark) for follow-up once the issues in GB are fixed.
Noting this one for follow-up as well: https://wordpress.com/forums/topic/twenty-twenty-two-theme/
Another one 35043875-hc Theme: Skatepark
Provided the "filter: none" CSS workaround to remove the tint.
Another one here: 4951832-zd-woothemes
Theme: Twenty Twenty-Two (Pink)
I shared CSS snippet as workaround fix
Since we aren't supposed to glomb onto Gutenberg github issues, we have another case here: https://wordpress.com/forums/topic/duotone-remove-from-my-blog/
The CSS snippet won't work on free sites. Noting this case for followup.
Another in https://wordpress.com/forums/topic/images-are-greyscale/ using Twenty Twenty-Two(Swiss)
Recommended they use Twenty Twenty-Two for now.
https://wordpress.com/forums/topic/my-pictures-turn-black-and-white/ using Skatepark
Another user from the thread above using Skatepark as well: https://wordpress.com/forums/topic/my-pictures-turn-black-and-white/?view=all#post-3816111
