using CSS variables to set icon colour

  • I’m working on a theme that uses an custom SVG icon in the heading. (There are no colour values in the SVG itself.)

    I am providing a number of variations on theme.json in the theme’s styles folder. I want to preset different colours for the icon in each style variation. I define theme palette colours in the styles section of theme.json. The colour I want to use for the icon has the slug uta-background, so it’s available in theme files as “var(–wp–preset–color–uta-background)”.

    In the header.html file, where the SVG icon is used, using hard-coded colour values work:

    <!-- wp:outermost/icon-block {"iconName":"","iconColor":"uta-background","iconColorValue":"#ffffff","label":"u3a logo","width":100,"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
    <div class="wp-block-outermost-icon-block items-justified-undefined">
        <div class="icon-container has-icon-color" style="color:#ffffff;padding:0px 0px 0px 0px;width:100px"><svg ...

    If I edit the header.html file to use to use CSS variables in place of hard-coded colour values it also works fine to render pages:

    <!-- wp:outermost/icon-block {"iconName":"","iconColor":"uta-background","iconColorValue":"var(--wp--preset--color--uta-background","label":"u3a logo","width":100,"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
    <div class="wp-block-outermost-icon-block items-justified-undefined">
        <div class="icon-container has-icon-color" style="color:var(--wp--preset--color--uta-background);padding:0px 0px 0px 0px;width:100px"><svg ...

    The problem is that as soon as you open the Full Site Editor the SVG block complains that “This block contains unexpected or invalid content” and offers block recovery. Presumably the code doesn’t expect a CSS variable.

    Is there a way of avoiding hard-coding colour values so the SVG can be given different colours with alternate style files?

    Note: Omitting specific colour settings on the icon, and setting a foreground colour for the enclosing group doesn’t seem to work. Is there another workaround you can suggest? Any help appreciated. ??

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi @nicktrosnant,

    Thank you for reaching out and I sincerely apologize for the delayed reply. This is a frustrating issue related to how the WordPress color picker component works. It stores the actual color value as a hex code for backward compatibility and to ensure there is a color value in case the color variables do not exist. The same issue exists with the Core Social Icons block as well. So far, I have not been able to find an elegant way around this.

    This issue has been reported for the WordPress color picker component and I am keeping a close eye on any changes that are made in Core. As soon as a viable solution is found, I will include it in the Icon Block.

    Please let me know if I can be of further assistance.

    Best,
    Nick

Viewing 1 replies (of 1 total)
  • The topic ‘using CSS variables to set icon colour’ is closed to new replies.