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

[WordPress Trac]

#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        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------
Description changed by nielslange:

Old description:

> == 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.

New description:

 == 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
 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.
 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#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform