Gutenberg: Paragraph Block with darker background color and text in lighter color not working for links.

[bph]

Issue Overview

I love the feature to change the background color of a paragraph block. I also appreciate the warning for the text color when the contrast ratio is not big enough. Unfortunately, that's not working so well if the paragraph contains a link

Steps to Reproduce (for bugs)

1.Create a paragraph block with dummy text and link a portion to a different page on the site or an outside website.

1. open the block setting and change the background color to middle blue and change the text color to white or light gray.

Expected Behavior

I would expect the link color to change as well, if just for slightly different color.

Current Behavior

Possible Solution

Add a link color changer to the settings.

Screenshots / Video

A recording: http://recordit.co/cK3HPAxbQS

Related Issues and PRs

Todos

• [ ] Tests
• [ ] Documentation

[karmatosed]

Good catch! I would put as a bug but this is a case of the theme causing that to be an issue. I wonder though what we can do Gutenberg side to ease this. I'm cautious to add 'yet another' colour to the list for links. But, could we be a little smarter here? What about a warning and/or changing the contrast of the link to show up?

[bph]

"the Theme is causing that issue", is not entirely accurate from where I sit. Backing up a bit: Gutenberg starts out with giving users the capabilities to override a Theme's default color scheme. I embrace it, I love it. But I see it more from a "You break it, you buy it" kind of way.

From the moment Gutenberg allows users to take over, it needs to provide some guard-rails and help from the editor. A brilliant example is the contrast warning, with light blue text on dark blue background. And an essential part is that the user can act on this warning and fix it easily right there.

If you go that route with the link color as well, the user won't have the tools to fix it. What do you want her to do? Call the Theme developer? Fiddle with the css editor?

The best way would be to add link color settings, as it would make this feature complete. That's all. I can change, background color, text color, link color.

This will come up more often than not, and you will have the conversation again and again. :-) At least with me

BTW: I do think it's a bug. hehe

[melchoyce]

I agree this is an issue. If you have a text block with a background color and an updated text color, I'm expecting all the text to be that color — including my links.

I think we have two potential solutions:

1. Have text color control both regular text and linked text.
2. Create another option for controlling the link color.

My vote is personally for 1.

[bph]

+1 like the choice number 1. Thanks @melchoyce for chiming in:-)

[0aveRyan]

@melchoyce

That first option definitely works for Themes with underlined/bolded links, but Themes with <a>'s only denoted by different color from <p> text would then have all the links blend in with paragraph text, obfuscating the link (not my preferred anchor style, but definitely common).

:heavy_plus_sign: for disliking the idea of cluttering the UI with Link Color, but I wonder if we could semi-automate some of these color decisions...

Partially-formed idea

🤔 There is this nifty function in Color.js that will find the maximum contrast color for a provided color. One possible flow...

1. User selects background color for block.
2. Event is triggered to run contrast method to automatically pick the best <p> color from the palette based on the selected background color.
3. Create a matrix map for the Core palette to automatically select the best link + hover color based on background (allow filtering to define matrix for custom palette).
4. Allow users to override auto-selected decisions.

Ex. User picks dark blue background, <p>'s automatically set to off-white, <a>'s automatically set to sky blue & light orange on hover.

Definitely a little heavy-handed/perhaps entering plugin territory... Hard to know a Theme's link styles programmatically, and probably wouldn't want to do this on sites _with_ underline/bold styles... so it'd be all-or-nothing unless a Setting was added to toggle (blegh).

Auto link coloring might be overkill... can't entirely _prevent_ bad design decisions. But there may be some merit to auto-toggling the <p> color to the appropriate contrast.

[mtias]

Might be worth doing some explorations here to see how it looks. But I also think we could also just force the display of underline on links under certain background color combinations (probably after a certain luminosity). So if the bg color is at a point where text has to be lighter than bg, we can make links match the paragraph color and show an underline.

[bph]

Following 'decisions, no options' and 'out of the box' - adopting the selected text color also for the links in the paragraph and underlining links by default would be a perfectly acceptable solution for me. Anything else could be handled via custom blocks.

[karmatosed]

But I also think we could also just force the display of underline on links under certain background color combinations (probably after a certain luminosity). So if the bg color is at a point where text has to be lighter than bg, we can make links match the paragraph color and show an underline.

Whilst I totally understand having an option I do like the idea of this being automatic. I'd say let's explore that over having explicit color picking. For now, removing the design feedback label as would like to get that explored and wouldn't need design.

[bph]

Seems this will be fixed in 4.0 https://github.com/WordPress/gutenberg/pull/10171/ by @jorgefilipecosta

[jorgefilipecosta]

Hi, all thank you for the discussion! I'm closing this issue for now as it should be fixed by https://github.com/WordPress/gutenberg/pull/10171.
The fix makes sure link color matches paragraph colors and shows an underline.
If this approach seems problematic and an idea for a better approach appears feel free to reopen and I will relook at the issue.