[wp-trac] [WordPress Trac] #57968: Twenty Twenty-Three: Theme overwrited Global Styles for link colors

WordPress Trac noreply at wordpress.org
Wed Mar 22 10:05:50 UTC 2023


#57968: Twenty Twenty-Three: Theme overwrited Global Styles for link colors
--------------------------+-----------------------------
 Reporter:  nielslange    |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 == Problem

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

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

 This definition results in the following CSS code:

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

 While the Global Styles CSS looks like this:

 {{{#!css
 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 not
 only affects the link colors within the Checkout block, but all link
 colors, this problem should be addressed within the Twenty Twenty-Three
 theme itself.

 == Steps to reproduce

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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/57968>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform


More information about the wp-trac mailing list