Make WordPress Core

Opened 2 years ago

Last modified 2 months ago

#56075 new defect (bug)

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

Reported by: aezazshekh's profile aezazshekh Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: css Cc:

Description

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

Attachments (9)

56075.diff (1.3 KB) - added by aezazshekh 2 years ago.
After adding this patch, now the selected link color is reflecting in the front-end side.
blocks-with-links-2021-editor.png (58.3 KB) - added by sabernhardt 2 years ago.
heading, paragraph and list blocks with various color choices, in the editor
blocks-with-links-2021-front.png (55.3 KB) - added by sabernhardt 2 years ago.
heading, paragraph and list blocks with various color choices, on the front end
56075.1.diff (1.9 KB) - added by sabernhardt 2 years ago.
apply currentColor to p.has-background a
#56075.patch (1.3 KB) - added by kajalgohel 2 years ago.
patch added
#56075.3.patch (1.3 KB) - added by kmadhak 2 years ago.
Added Patch
#56075.4.patch (2.3 KB) - added by kajalgohel 2 years ago.
changes made in sass and css files
#56075.5.patch (2.3 KB) - added by kmadhak 2 years ago.
Added Patch
markup-try-link-colors.html (19.4 KB) - added by poena 18 months ago.
Example blocks with link and text colors

Download all attachments as: .zip

Change History (26)

@aezazshekh
2 years ago

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

#1 @aezazshekh
2 years ago

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

#2 @poena
2 years ago

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
2 years ago

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

@sabernhardt
2 years ago

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

@sabernhardt
2 years ago

apply currentColor to p.has-background a

#3 @sabernhardt
2 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.1

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
2 years ago

patch added

@kmadhak
2 years ago

Added Patch

#4 @poena
2 years ago

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
2 years ago

changes made in sass and css files

@kmadhak
2 years ago

Added Patch

#5 @sabernhardt
22 months ago

  • Milestone changed from 6.1 to Future Release

#6 @poena
18 months ago

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.

  1. 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' );

  1. Activate the theme.
  2. In the block editor, please add several paragraph blocks where part of the text is linked.
  3. 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.
  4. Next please create a group block and place the paragraph inside it.
  5. 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 -->
Last edited 18 months ago by poena (previous) (diff)

@poena
18 months ago

Example blocks with link and text colors

#7 @poena
18 months ago

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.

#8 @poena
18 months ago

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?

#9 @poena
18 months ago

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.

#10 @poena
18 months ago

  • Keywords has-patch removed
  • Milestone changed from Future Release to 6.2

#11 @poena
18 months ago

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.

#12 @poena
18 months ago

  • Milestone changed from 6.2 to Future Release

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.

#13 @poena
4 months ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 6.6

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.

#14 @karmatosed
3 months ago

  • Keywords has-patch changes-requested added; needs-patch removed

#15 @karmatosed
3 months ago

  • Keywords needs-patch added; has-patch removed

#16 @karmatosed
2 months ago

  • Keywords changes-requested removed

#17 @karmatosed
2 months ago

  • Milestone changed from 6.6 to Future Release

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

Note: See TracTickets for help on using tickets.