Support » Developing with WordPress » How to add :hover style to core/social-links icons

  • Hello,

    I am currently using wp-env to develop a custom theme with wordpress 6.4.3. In my header template (header.html), I am using the core/social-links block and I wish to add a standard customization so that any of the icons have a :hover state and change color. This option doesn’t appear in the settings tab for the block. I would prefer to do this in theme.json. According to the documentation here, under the heading “Styling elements nested in blocks”, it seems like you can do just that. After inspecting the block, you can see that it’s just an unordered list with each list element containing a link wrapped around an svg icon. I tried adding a valid CSS color value to styles->blocks->core/social-links->elements->link->:hover->color->link in my theme.json but this did not produce the result. Since the documentation also mentions that the pseudo element :hover can only be applied to links and buttons, I thought it would work in this context. My JSON is valid so that’s not the issue. How can I achieve this result?

    Thank you.

  • You must be logged in to reply to this topic.