Link to site homepage is not underlined on hover in the local navigation bar

[ndiego]

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

cc @ryelle @adamwoodnz

[ryelle]

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?

This issue should probably be moved to the parent theme repo, the underlying issue might impact other places we invert link text-decoration.

[ndiego]

Something like this should work.

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

[ndiego]

This issue should probably be moved to the parent theme repo, the underlying issue might impact other places we invert link text-decoration.

I'll move it over.