Archived topic
Gutenberg Duotone filter css classes missing
8 replies · Started by Yannick on September 24, 2022
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
Hi there,
Hmm does the same issue occur when using a Twenty series WP default theme?
Let me know :)
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;
}
Funny thing is: The class with HEX values keeps working if I activaed GeneratePress again.
Hi Yannick,
To clarify, is it working as expected now?
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
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?
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).
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.
