Make WordPress Core

#57968 closed defect (bug) (reported-upstream)

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

Reported by: nielslange's profile nielslange Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Themes Keywords:
Focuses: Cc:

Description (last modified by 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.

Attachments (1)

Screenshot 2023-03-22 at 17.05.32.png (1.3 MB) - added by nielslange 15 months ago.

Download all attachments as: .zip

Change History (5)

#1 follow-up: @nerrad
13 months ago

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.

#2 in reply to: ↑ 1 @nerrad
13 months ago

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.

#3 @nielslange
13 months ago

  • Description modified (diff)

#4 @nielslange
13 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.