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 #62960 in addition to other blocks that have yet to be fixed (#62679 (comment)).

Here is the code from /wp-includes/blocks/navigation/style.min.css?ver=6.6-RC1 that 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

Screen.Recording.2024-06-28.at.9.09.52.PM.mp4

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 #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.