Twenty Twenty-One: Link color issue coming in front-end and backend side

[aezazshekh]

When we add a link in any text and change the color of that link, that selected color is not reflected in both the front end and backend side.

I have given the video link of the issue below. please check.

​https://share.cleanshot.com/7g5tTrs2wTq6IupnWmP6

[aezazshekh]

After adding this patch, now the selected link color is reflecting in the front-end side.

[aezazshekh]

We have to change the CSS style of the Gutenberg block to reflect the selected color in the link on the backend side.

We have to add the CSS style given below.

.editor-styles-wrapper .wp-block a { 
	color:inherit 
}

Thanks

[poena]

Hi!

The option used in the video is for plain text color, so it does not affect links.

In WordPress version 5.9, it seems the block editor option to change the link color in classic themes was removed, so, it stopped working for Twenty Twenty-One.

This problem is also reported in #55028.
I have opened an issue for this in the ​Gutenberg GitHub repository.

My recommendation would be to solve the problem for all classic themes, instead of working around the missing option by updating the CSS in one theme. Changing this CSS would also affect existing websites.

[sabernhardt]

heading, paragraph and list blocks with various color choices, in the editor

[sabernhardt]

heading, paragraph and list blocks with various color choices, on the front end

[sabernhardt]

apply currentColor to p.has-background a

[sabernhardt]

Possible workaround for the reported use case: Create a Group block with a background color and the desired text color, then insert content within that Group. You could set the padding to zero, and the background color could match the body background.

The link color should not match the text color in all paragraph blocks (unless/until the user can set it that way). In fact, a comment in the stylesheet notes that the theme overrides color: inherit.

	// Override `color: inherit` from Core styles.
	&.has-text-color a {
		color: var(--wp--style--color--link, var(--global--color-primary));
	}

However, when other blocks have a background, the link color matches the text. On the front end, p.has-text-color a is slightly more specific than .has-background a and therefore the paragraph text color does not apply to links within it, as the color does in the editor.

p.has-text-color a {
  color: var(--wp--style--color--link, var(--global--color-primary));
}
.has-background a, .has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
  color: currentColor;
}

56075.1.diff​ adds currentColor to the paragraph block styles to correct this on the front end (without affecting the editor styles).

[kajalgohel]

patch added

[kmadhak]

Added Patch

[poena]

Hi!

Twenty Twenty-One uses sass.
CSS changes need to be made to the .scss files and then compiled using the tools and commands that are listed in the package.json file.

Changes made directly in the .css files, rtl styles, editor and ie styles will be overwritten, because they are generated from the themes .scss files.

[kajalgohel]

changes made in sass and css files

[kmadhak]

Added Patch

[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 ​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 color and a text color set, the 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 -->

[poena]

Example blocks with link and text colors

[poena]

I have attached an HTML file with blocks that are links or has link and link color options. The content of the file can be copied into the block editor for testing.
-It does not include examples for the background colors.

[poena]

I have not been able to make the color contrast change work correctly for the links.

Another issue is that the theme has 17 references to --wp--style--color--link which as far as I can tell was only used while the experimental link color theme support worked.

For example, this passage breaks the new link color option:

// Enforce the custom link color even if a custom background color has been set.
// The extra specificity here is required to override the background color styles.
.has-background {
	// Target both current level and nested block.
	.has-link-color a,
	&.has-link-color a {
		color: var(--wp--style--color--link, var(--global--color-primary));
	}
}

If we remove it, it will be a breaking change for users on WordPress 5.8.
Do we consider that acceptable?

[poena]

After further testing I found that the link color option that was available in WordPress 5.8 is not working anyway, so removing the code should not have a negative impact;
If the user updates the theme but not core, the option will not be present, so it also can't break for them if they try to use it.

[poena]

Yesterday, the has-link-color CSS class was ​added to a large number of blocks.
This unblocks the bug with the contrast color for the links.

[poena]

Moving to future release as there is no complete patch and because the appearance-tools, which includes the link color option for classic themes, will most likely not be in 6.2.

[poena]

WordPress 6.3 included the link-color theme support, see https://core.trac.wordpress.org/ticket/58597

This is ready for a new path to be created and tested.

[karmatosed]

As this doesn't have a patch yet let's move this back to future release for now.