Description

The link hover color is not working when defined in theme.json nor does it work if you manually overwrite the theme color styles in the site editor.

Step-by-step reproduction instructions

In a default install with no plugins other than Gutenberg and the Twenty Twenty Three active, open the theme.json for the theme, change the core/navigation block to:

"core/navigation": {
      "elements": {
	      "link": {
		      "color": {
			      "text": "var(--wp--preset--color--contrast)"
		      },
		      "typography": {
			      "textDecoration": "none"
		      },
		      ":hover": {
			      "color": {
				      "text": "var(--wp--preset--color--tertiary)"
			      }
		      }
	      }
      }
}

Then in the front-end, hover over one of the header nav links and notice the link color does not change to the tertiary color value.

The culprit seems to be that color: inherit is being forced above the theme.json or site editor styles on .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content

Screenshots, screen recording, code snippet

Environment info

• wp 6.1.1
• gutenberg 15.0.1
• chrome
• mac

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

Yes

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

Yes