Link styling is no longer being reflected accurately due to specificity changes in Gutenberg

[ndiego]

Moving this over from WordPress/wporg-mu-plugins#627

I noticed this today when testing the Theme Directory refresh, but this impacts all newly redesigned sites with the local navigation bar.

Unlike the links on the right, the main link back to the site homepage is not underlined on hover, which makes it hard to tell that it's actually a link. Here's an example in Developer Resources.

local-nav-link.mp4

@ryelle mentioned:

I think this has to do with GB's restructuring of CSS specificity for styles generated from theme.json. The generated CSS rule for hover :root :where(.wp-block-site-title a:where(:not(.wp-element-button)):hover) is no longer overriding the default general a:hover provided by the parent theme.

Maybe we can move this bit of CSS to a rule in theme.json to ensure the styles cascade correctly?

One potential solution might be to apply a link element style in theme.json, something like:

"elements": {
    "link": {
        "typography": {
            "textDecoration": "none"
        },
        ":hover": {
            "typography": {
                "textDecoration": "underline"
            }
        }
    }
}