Link and :hover styles in Navigation block being overridden by core block styles

[bgardner]

Description

Likely a symptom similar to discussion at Core block styles are overriding theme.json styles in WordPress 6.6, the link and :hover styles for the Navigation block are being overridden by core block styles. This is a concerning trend, as this overriding is also happening at https://github.com/WordPress/gutenberg/pull/62960 in addition to other blocks that have yet to be fixed (https://github.com/WordPress/gutenberg/issues/62679#issuecomment-2180754310).

Here is the code from /wp-includes/blocks/navigation/style.min.css?ver=6.6-RC1that is causing the override:

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: inherit;
}

Here is the code it is overriding:

:root :where(.wp-block-navigation a:where(:not(.wp-element-button))) {
    color: var(--wp--preset--color--contrast);
}

Here is the code I have in the theme.json file seen below in the video

{
    "styles": {
        "blocks": {
            "core/navigation": {
                "elements": {
                    "link": {
                        "color": {
                            "text": "var(--wp--preset--color--contrast)"
                        },
                        ":hover": {
                            "color": {
                                "text": "var(--wp--preset--color--primary)"
                            }
                        }
                    }
                }
            }
        }
    }
}

Step-by-step reproduction instructions

1. Add code above into theme.json file.
2. Hover links in Navigation block on front end.
3. Witness theme.json style being overridden by core block style.

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/486261/26371a7b-f235-4aa3-8305-906850740fee

Environment info

WordPress 6.6 RC1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[talldan]

@bgardner Thanks for creating the issue. @tellthemachines @andrewserong and I had a look into the issue, and it seems like this was also a bug in 6.5, and possibly going back further.

The navigation block has some issues around the way it implements color that are going to be challenging to solve in a backwards compatible way. I haven't been able to spot any 6.6 specific bugs though when comparing to 6.5.

Is the social icons issue you mentioned in the issue still one that needs to be fixed?

[talldan]

I found this was originally reported in https://github.com/WordPress/gutenberg/issues/47431

Edit: I've also made a bug report for another issue I spotted while looking into this - Group block overrides Navigation Link hover color in the editor #63003.

[bgardner]

@talldan Yes, as it stands, this issue and the issue with social icons as noted are the only two remaining instances of this overarching issue that I've been able to note.