[wp-trac] [WordPress Trac] #56075: Twenty Twenty-One: Link color issue coming in front-end and backend side

[WordPress Trac]

#56075: Twenty Twenty-One: Link color issue coming in front-end and backend side
---------------------------+-----------------------------
 Reporter:  aezazshekh     |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Future Release
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:  css
---------------------------+-----------------------------

Comment (by poena):

 I have tested this issue in 6.2 alpha as part of #56487, the appearance-
 tools theme support, which enables the link color setting for many blocks.

 I found that the link color option does not work well for the paragraph,
 and I would like this to be fixed in order to both solve the original
 issue, and unblock enabling the appearance-tools theme support.

 I feel that the user selected link color should override the themes
 contrast feature, just like the text color does. But to do this, we would
 need a new patch.
 I hope this sounds reasonable @sabernhardt @aezazshekh?


 == Testing instructions
 1. Update your WordPress test install to use the latest 6.2 nightly
 version.
 This can be done with the [https://wordpress.org/plugins/wordpress-beta-
 tester/ Beta tester plugin].

 2. Either apply the patch for 56487, or:
 Open Twenty Twenty-One in your code editor and add the following to
 functions.php, line 341, inside the setup function:

 {{{add_theme_support( 'appearance-tools' );}}}

 3. Activate the theme.
 4. In the block editor, please add several paragraph blocks where part of
 the text is linked.
 5. Enable different text color and link color settings on the different
 blocks, and check if the colors match in the editor and on the front of
 the website.
 6. Next please create a group block and place the paragraph inside it.
 7. Test what happens if you change the background color of the group
 block:
  - Default green background from the color palette
  - Dark background from the color palette
  - Random background from the color picker


 Optionally:
 You can also test adding a link color option to the group block.
 When the group has a link color option, the link color of the paragraph
 should still be used.
 Test the result when enabling dark mode from the customizer.


 == Test result, before patch:

 - When there is both a link and a text color set, then link color works in
 the editor but not on the front.
 - When the block is placed inside a container with a light background
 color. Then the primary color is used no matter if there is a text color
 or link color.
 - When The block is placed inside a container with a dark background from
 the palette. This triggers the color contrast switch where the text color
 turns light.
  - If there is a text color set, the link color does not change to the
 light color nor to the text color, it remains the primary color so the
 link text is grey on top of grey or black.
  - If there is a link color set, the link color does not change to the
 light color, it remains the primary color so the link text is grey on top
 of grey or black.
  - If there are a link and text colors set, the link color does not change
 to the light color nor to the text color, it remains the primary color so
 the link text is grey on top of grey or black.


 Sample test code that can be copy pasted into the block editor:

 {{{
 <!-- wp:paragraph -->
 <p>No color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph {"style":{"color":{"text":"#cc0000"}}} -->
 <p class="has-text-color" style="color:#cc0000">Text color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}}}} -->
 <p class="has-link-color">Link color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}},"color":{"text":"#fe0000"}}}
 -->
 <p class="has-text-color has-link-color" style="color:#fe0000">Both text
 and link color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:group {"backgroundColor":"green","layout":{"type":"constrained"}}
 -->
 <div class="wp-block-group has-green-background-color has-background"><!--
 wp:paragraph -->
 <p>No color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph {"style":{"color":{"text":"#cc0000"}}} -->
 <p class="has-text-color" style="color:#cc0000">Text color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}}}} -->
 <p class="has-link-color">Link color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}},"color":{"text":"#fe0000"}}}
 -->
 <p class="has-text-color has-link-color" style="color:#fe0000">Both text
 and link color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->

 <!-- wp:group {"backgroundColor":"black","layout":{"type":"constrained"}}
 -->
 <div class="wp-block-group has-black-background-color has-background"><!--
 wp:paragraph -->
 <p>No color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph {"style":{"color":{"text":"#cc0000"}}} -->
 <p class="has-text-color" style="color:#cc0000">Text color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}}}} -->
 <p class="has-link-color">Link color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}},"color":{"text":"#fe0000"}}}
 -->
 <p class="has-text-color has-link-color" style="color:#fe0000">Both text
 and link color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->

 <!-- wp:group {"backgroundColor":"dark-
 gray","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-dark-gray-background-color has-
 background"><!-- wp:paragraph -->
 <p>No color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph {"style":{"color":{"text":"#cc0000"}}} -->
 <p class="has-text-color" style="color:#cc0000">Text color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}}}} -->
 <p class="has-link-color">Link color: text with <a
 href="#ffdg">link</a></p>
 <!-- /wp:paragraph -->

 <!-- wp:paragraph
 {"style":{"elements":{"link":{"color":{"text":"#2317ff"}}},"color":{"text":"#fe0000"}}}
 -->
 <p class="has-text-color has-link-color" style="color:#fe0000">Both text
 and link color: text with <a href="#ffdg">link</a></p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56075#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform