Duotone: Overlay not showing as expected on the front end.

[sstabrizi]

Quick summary

Duotone is working properly when added to a cover block in the editor. However, when looking at the cover block on a live site duo tone is not applied at all.

Steps to reproduce

1. Add Cover block.
2. Add Duotone of choice.
3. Update the page.
4. View the page live and see that Duotone isn't applied.

What you expected to happen

Duotone settings should be the same on the live site as they are in the editor.

What actually happened

Duotone shows one way in the editor, but is not applied on the front end.

Context

• Two reports of this: 4634506-zen, 4634686-zen
• We've confirmed that this is the case on at least 3 themes: Arcane, Seedlet, and Hever.

Simple, Atomic or both?

Simple

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

No response

Available workarounds?

No response

Workaround details

No response

[sstabrizi]

This is likely related to this issue as well: https://github.com/wpcomvip/2u-v2/issues/1782

[Greatdane]

Replicated on mentioned themes, but it is not present on all (for example, Quadrant applies the Duotone correctly).

[supernovia]

I'm seeing the same thing on images. Tested by applying a Duotone filter to one of the images on the default page with Twenty Twenty-one. It shows up fine in the editor, but on the site itself the filter isn't there at all.

Arbutus: works
Bingley: doesn't work
Zoologist: works

This user has Blank Canvas and might be complaining of the same issue.
https://wordpress.com/forums/topic/color-and-filter-settings

[msilbers]

reported in 33405784-hc by a customer
theme: Blank Canvas
Atomic site

[connorhipps]

I'm getting another report of this in the following ticket: 4644527-zd-woothemes

The domain is https://refine-artpsych.com/ and the theme is Hever. Images appear with the Duotone filter on the backend but appear differently when published.

[dcoleonline]

I found a CSS workaround for a user in 4634686-zen but only for cover blocks. Here are the relevant parts of the code I shared with them:

/* begin workaround for home cover block colors 4634686-zen */
.wp-block-cover .wp-block-cover__gradient-background.has-background-dim.has-background-dim-10 {
    background-color: #80007D;
    opacity: 0.4;
}
.wp-block-cover > .wp-block-cover__image-background {
  filter: grayscale(100%) !important;
}
/* end workaround for home cover block colors */

It probably would need to be tweaked on a per-site basis and it isn't 100% the same as the duotone effect, but it was close enough to hold them over until we have a proper fix.

[dcoleonline]

I attempted to provide a CSS fix for 4644527-zen, as they wanted duotone on image blocks.
I tested some code from cssduotone.com and I was able to adjust it to this:

/* begin workaround for duotone image blocks */

[class^="wp-duotone"]{
  --base:              #000000;
  --bg-blend:          unset;
  --blur:              0px;
  --fg-blend:          multiply;
  --foreground:        #58e9b1;
  --opacity:           1;
  --spacing:           0px;
  background-color:    var(--base);
  display:             flex;
  flex:                1 1 100%;
  height:              100%;
  overflow:            hidden;
  padding:             var(--spacing);
  position:            relative;
}

.entry-content [class^="wp-duotone"] img {
 filter:              grayscale(100%) !important;
  flex:                1 0 100%;
  height:              100%;
  max-width:           100%;
  mix-blend-mode:      var(--bg-blend);
  object-fit:          cover;
  opacity:             var(--opacity);
  position:            relative;
  width:               100%;

}

[class^="wp-duotone"]::before {
  background-color:    var(--foreground);
  bottom:              0;
  content:             '';
  height:              100%;
  left:                0;
  mix-blend-mode:      var(--fg-blend);
  position:            absolute;
  right:               0;
  top:                 0;
  width:               100%;
  z-index:             1;
}

/* end workaround for image blocks */

I can't get this code to work on a simple site. I think some of the code, specifically this part below, isn't being allowed:

  --base:              #000000;
  --bg-blend:          unset;
  --blur:              0px;
  --fg-blend:          multiply;
  --foreground:        #58e9b1;
  --opacity:           1;
  --spacing:           0px;

The code does work for me on Atomic sites though. It just requires that the duotone effect is already applied in the editor. However, this makes all of the images use the same color, and it'd be a bit of work to customize this on a per-image basis.

Here's a video to show it in the customizer of my Atomic test site:

atomic-duotone-workaround.mp4

Note that if it is tried on a simple site, the Customizer will show a correct preview, but with the specific code I've used, the image will appear as black and white on the live site.

[zdenys]

Another case 4636226-zd-woothemes

[kosiew]

Moving the themes repo.

[lizkarkoski]

Another instance of duotone failing to display outside of the editor. Site is using seedlet theme.
https://wordpress.com/forums/topic/duotone-now-not-working-on-my-site-suddenly/?view=all#post-3773186

[zdenys]

Another case: 4652083-zd-woothemes with theme Illustrar.

[zdenys]

The core issue is here: WordPress/gutenberg#37598

[jordesign]

As this isn't a core issue - I'm closing it in favour of the WP-Calypso issue we'll use to track the core issue
Automattic/wp-calypso#59787

[metabreakr]

https://wordpress.com/forums/topic/duo-tone-image-setting-doesnt-show-on-front-end/