Navigation block: link colors not working

[bradhogan]

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

[terryklim]

I came across this same exact issue when developing a custom theme. As a side note, I see the issue on wordpress.com v6.1.1. However, when I self host a wordpress.org 6.1.1 test site locally, this problem does not manifest. I would love to understand why there is different behavior between the two.

[phil-sola]

I've just come across this same issue as well. It specifically seems to be affecting the hover styling.

As @bradhogan has indicated it is the class .wp-block-navigation .wp-block-navigation-itemcontent.wp-block-navigation-itemcontent that seems to override styles defined in theme.json

[dkjensen]

+1

[caseymilne]

+1, same result if your theme has support for Link Colors, if you choose a hover color it won't work because of specificity score from navigation core CSS.

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

Link color ouput:

.wp-elements-b244525fec8a77274802d3217a8879f1 a:hover {
    color: var(--wp--preset--color--secondary);
}

I found this works in a test, it reduces the specificity score and still targets the nested tags but without the weight of stitching the 2 classes together.

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

+1. 😖

[gaambo]

There are a few things here:

1. This issue specifically mentions setting element styles inside the navigation block and how the color is overwritten by a more specific css selector rule.

2. 57499 describes setting the color directly (via theme.json styling property) on the navigation block OR one of its children (navigation-link,...) does not work because of the same css rule.

Actually the CSS rule has the following comment:

// This rule needs extra specificity so that it inherits the correct color from its parent. // Otherwise, a link color set by a parent group can override the value. // This also fixes an issue where a navigation with an explicitly set color is overridden // by link colors defined in Global Styles.

So this might not be as straight forward and might need additional tests to prevent regressions.

But yeah, both are really annoying 😅 changing hover styles on navigation links is a thing I have to do on all sites. As a workaround I do this:

As a workaround I use the CSS property in theme.json at the moment. This is kind of overkill but it works in my case (a custom theme).

"core/navigation": {
    "css": "& a:hover { color: var(--wp--preset--color--yellow) !important; }"
}