Icon Color Not Working If Background Color Set

  • I really like this block. The only issue I have encountered is that if you set both a background color, and an icon color, only the background color shows. The icon color used is white in my case (CSS uses color: currentColor). If only an icon color is used, the selected foreground color is used, default or otherwise.

    In the editor, the correct icon color is displayed.

    If the code in src/save.js on (or about) line 129 is modified to add ‘!important’, and you rebuild and update the page, the correct color is shown in the editor, and when the page is viewed.

    I do not have this running on a publicly visible site. I can share a screen capture if that helps.

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

    (@ndiego)

    Hi @ajdferg,

    Thank you for reaching out and spotting this issue. Upon further investigation, it looks like this might be a conflict with themes that specify a color with the slug background in their theme.json file. I was able to replicate the issue in the Twenty Twenty-Two theme.

    When this occurs, the following CSS is generated: 

    
.has-background-color {
    color: var(--wp--preset--color--background) !important;
}

    This then overrides colors in the icon. I am going to explore a workaround to this and should have a fresh release by the beginning of next week at the latest. I will follow up once the release has been published.

    Best,
    Nick

    Thread Starter Andrew Ferguson

    (@ajdferg)

    Hi Nick,

    This is Andrew Ferguson, I’ve attended a few of your learning presentations, which is where I learned about this plugin.

    I am also currently using the Twenty Twenty-Two theme.

    No worries or rush on getting a solution. I am in the early phases of what I am working on, and figured I would let you know about the behavior I am seeing.

    Be well,
    Andrew

    Plugin Author Nick Diego

    (@ndiego)

    Hi Andrew,

    Just checking in. I do have a fix for this, which will be packaged in the next version. I am adding a few additional features that have been requested as well and am planning a release on or before Monday (9/19).

    Best,
    Nick

    • This reply was modified 2 years, 2 months ago by Nick Diego.
    Thread Starter Andrew Ferguson

    (@ajdferg)

    Hi Nick,

    I appreciate the update and will definitely give it a try once available, and will enjoy checking out the new features, too.

    Be well,
    Andrew

    Plugin Author Nick Diego

    (@ndiego)

    Hi Andrew,

    Version 1.3.0 is now live with the fix. Let me know if you run into any trouble. I will have an article put together later this week detailing all the changes and enhancements in the latest version.

    Best,
    Nick

    Thread Starter Andrew Ferguson

    (@ajdferg)

    Hi Nick,

    That is great. I will update the plugin on my local site, and check out the fix, and new enhancements.

    Much appreciated on you letting me know.

    Thanks,
    Andrew

    Thread Starter Andrew Ferguson

    (@ajdferg)

    Hi Nick,

    The update looks good to me. Great work.

    Thanks,
    Andrew

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Icon Color Not Working If Background Color Set’ is closed to new replies.