[Resolved] Gutenberg Duotone filter css classes missing

[Yannick]

Dear support team,

I had the wild idea to try out the Gutenberg duotone filters, but the CSS classes seem to be missing. I deactivated my child theme, to rule out that I messed something up. I have also deactivated all plugins but it is still not working.

Gutenberg adds the following class to the image, but the filter url does not work. Is this a known bug or some Gutenberg bug? Looking at the Gutenberg Github repo I wasnt able to find a similar issue.

.wp-duotone-var--base-var--accent-3-1 img {
  filter: url('#wp-duotone-var--base-var--accent-3-1') !important;
}

Do you have any idea what is happening here?

Kind regards
Yannick

[Leo]

Hi there,

Hmm does the same issue occur when using a Twenty series WP default theme?

Let me know 🙂

[Yannick]

Using 2022 it works. I get a CSS class with HEX color values. Sometimes Gutenberg is really weird.

.wp-duotone-0693e3-cf2e2e-7 img {
  filter: url('#wp-duotone-0693e3-cf2e2e-7') !important;
}

[Yannick]

Funny thing is: The class with HEX values keeps working if I activaed GeneratePress again.

[Fernando]

Hi Yannick,

To clarify, is it working as expected now?

[Yannick]

Hi Fernando,

it is not working.

The CSS class generated when using 2022 (with HEX values) keeps working when I switch back to GeneratePress.

But the CSS classes generated when using GeneratePress (wp-duotone-var–base-var–accent-3) are still no working.

Kind regards
Yannick

[Tom]

Hi there,

My guess here is that the duotone feature isn’t built to work with CSS variables.

If you add a regular hex color value (instead of a CSS variable), does it work in GP?

[Yannick]

Hi Tom,

thank you very much for your reply and sorry for my late response.

I did some more testing in GeneratePress and added custom color and they work fine (its rgba values not hex. That shouldnt make a difference).

.wp-duotone-rgb1097979-rgb25207207-12 img {
  filter: url('#wp-duotone-rgb1097979-rgb25207207-12') !important;
}

I also looked into the difference between GeneratePress and 2022 in the editor and the problem seems to be the CSS variables. When I use 2022 the color picker modal in the editor shows the hex value of a color, even if it is one of the default colors defined as a variable. When I am using GeneratePress this modal shows the CSS variable which does not work with duotone image (I hope you can understand what I mean).

[David]

Hi there,

when creating your Duotone you must use the picker to add the real color value.
You won’t be able to select a GP Global Color from the pallet, as that loads a CSS Variable which is not compatible with the method WP uses to create its duotones.

[Author]

Posts