Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sstabrizi opened this issue Dec 23, 2021 · 14 comments
Closed

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

sstabrizi opened this issue Dec 23, 2021 · 14 comments

Comments

@sstabrizi
Copy link

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
Copy link
Author

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

@Greatdane
Copy link

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

@supernovia
Copy link

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
Copy link

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

@connorhipps
Copy link

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
Copy link

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
Copy link

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
Copy link

zdenys commented Dec 30, 2021

Another case 4636226-zd-woothemes

@kosiew
Copy link

kosiew commented Dec 31, 2021

Moving the themes repo.

@lizkarkoski
Copy link

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
Copy link

zdenys commented Jan 4, 2022

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

@zdenys
Copy link

zdenys commented Jan 6, 2022

The core issue is here: WordPress/gutenberg#37598

@jordesign
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests