Styling Wordpress core blocks anchor links :hover and :active state?

Question

I am making a Wordpress Block theme. I am trying to do as much as possible using the theme.json. However I have found it being somewhat difficult to style all the things needed.

One thing I cannot seems to change is the hover and active state of links.

Let's look at core/cover-block as an example:

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/cover": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        "fontFamily": "var(--wp--preset--font-family--amatic-sc)",
        "fontSize": "var(--wp--preset--font-size--x-large)",
        "elements": {
          "link": {
            "color": {
              "text": "var(--wp--preset--color--primary)"
            }
          }
        }
      }
    }
  }
}

I can change,

• Text color via: styles.blocks['core/cover'].color.text.
• Link color via: styles.blocks['core/cover'].elements.link.color.text.

However, I cannot seem to find a way to change the hover or active state. Any suggestions?

Also, is there any good sources for finding what is possible to style via theme.json?

Note: I know it is possible to style it via normal css. However I am trying to learn the theme.json approach and its advantages.

Thanks!

Answer 1

This is the theme.json Version 2 Schema

Looking at it, there's a property there called "stylesElementsPropertiesComplete" which has the following object properties:

"link": {
    "type": "object",
    "allOf": [
        {
            "$ref": "#/definitions/stylesProperties"
        },
        {
            "properties": {
                "border": {},
                "color": {},
                "spacing": {},
                "typography": {},
                ":hover": {
                    "$ref": "#/definitions/stylesPropertiesComplete"
                },
                ":focus": {
                    "$ref": "#/definitions/stylesPropertiesComplete"
                },
                ":active": {
                    "$ref": "#/definitions/stylesPropertiesComplete"
                },
                ":visited": {
                    "$ref": "#/definitions/stylesPropertiesComplete"
                },
                ":link": {
                    "$ref": "#/definitions/stylesPropertiesComplete"
                },
                ":any-link": {
                    "$ref": "#/definitions/stylesPropertiesComplete"
                }
            },
            "additionalProperties": false
        }
    ]
},

With this in mind, you should be able to use something like the following:

{
  "version": 2,
  "styles": {
    "blocks": {
      "core/cover": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        "fontFamily": "var(--wp--preset--font-family--amatic-sc)",
        "fontSize": "var(--wp--preset--font-size--x-large)",
        "elements": {
          "link": {
            "color": {
              "text": "var(--wp--preset--color--primary)"
            },
            ":hover": {
              "color": {
                "text": "var(--wp--preset--color--secondary)"
              }
            },
            ":active": {
              "color": {
                "text": "var(--wp--preset--color--tertiary)"
              }
            }
          }
        }
      }
    }
  }
}