Twenty Twenty-Three: Theme overwrited Global Styles for link colors

[nielslange]

Problem

The [theme.json of Twenty Twenty-Three](​https://github.com/WordPress/twentytwentythree/blob/11440a5b38bae6882fc2c00b703d4bb95420a0f5/theme.json#L325-L333) contains the following definition:

"core/post-content": {
  "elements": {
    "link": {
      "color": {
        "text": "var(--wp--preset--color--secondary)"
      }
    }
  }
},

This definition results in the following CSS code:

.wp-block-post-content a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--secondary);
}

While the Global Styles CSS looks like this:

a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--vivid-red);
}

Due to [Specificity](​https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), the CSS code of the Twenty Twenty-Three theme overwrites the Global Styles CSS code. Given that this problem affects all link colors this problem might be addressed within the Twenty Twenty-Three theme itself.

Steps to reproduce

1. Install and activate the Twenty Twenty-Three.
2. Create a test page, add the paragraph block and link some words.
3. Go to Appearance » Edit and edit the link colors, e.g. default: red and hover: blue.
4. Open the test post both in the editor and the frontend.
5. See that only the hover color works as expected. The default color, as define in the Global Styles, is not working.

[nerrad]

This looks to me like more of a Gutenberg bug than a theme issue. Twenty Twenty Three is not doing anything special here other than using the theme API.

[nerrad]

Replying to nerrad:

This looks to me like more of a Gutenberg bug than a theme issue. Twenty Twenty Three is not doing anything special here other than using the theme API.

Actually, I missed that the theme is defining core/post-content here. So it appears to be behaving as expected but looks like an intentional choice by the theme.

[nielslange]

Closing this in benefit of ​https://github.com/WordPress/gutenberg/issues/50327.