Twenty Twenty-One: fix text color in Cover block

[trushaamin]

When I use the Twenty Twenty-One theme and click on the "Check out the Support Forums" button, a new tab opens on the correct page. However, when I return to the previous tab, the text is not displayed.

It works well, but the button text does not show. I thought the Twenty Twenty-One theme is beautiful, so why ignore these minor issues? That's why I created the ticket.

[trushaamin]

To make it easier to get.

Trac ticket: https://core.trac.wordpress.org/ticket/63291

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

## Unlinked Accounts
The following contributors have not linked their GitHub and WordPress.org accounts: @nhatkar@….

Contributors, please ​read how to link your accounts to ensure your work is properly credited in WordPress releases.

To understand the WordPress project's expectations around crediting contributors, please ​review the Contributor Attribution page in the Core Handbook.

Pops to nikunj8866

### After Fix

[Presskopp]

There is no rule for a:visited and therefore all applied colors are white (color, background)

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	...
	background: rgba(255, 255, 255, 0.9);
}

We could add a rule for a:visited in \themes\twentytwentyone\assets\sass\04-elements\links.scss

[poena]

Hi!

To make it possible to troubleshoot the issue, please include all the information needed to reproduce it. Please do not leave out any steps.

I understand that the text "Needs help?" followed by the two links exists only in one place in the theme, which is the starter content.
This is why it is very important to include the detailed step-by step instructions.
Both the issue and the pull request mentions buttons. But in the starter content, these texts are not button blocks. They are paragraph blocks with links. So I need you to please describe both the problem and the proposed solution more clearly.

Looking at the screenshot, all the text inside this "box" (the cover block with the border) has the wrong text color. Not only the links. The white text color does not have a high enough color contrast ratio against the green background.

All changes to colors must be carefully tested with the background color settings and the dark mode option.

---

Secondly, if this requires a CSS change, if it can not be changed in the starter content; then it is important to know that the theme uses SASS.
Any changes made directly to the CSS files will not be used, because when the SCSS files are compiled, the css files are replaced. Because of this, the current pull request can not be used without changes.

[sabernhardt]

I think the starter content's Cover block could be replaced with a Group block. Related: #61022

[jorbin]

I was able to replicate this on the playground using the following steps (playground is using 6.7.2 as of this writing)

1. Visit ​https://playground.wordpress.net/?networking=yes
2. Install and activate twenty-twenty-one
3. Visit the customizer.
4. Attempt to click on the link. It's now highlighted in white.

Since this is replicated in a version other than 6.8, I'm removing that version but if someone finds where this was first introduced, please update it to that version.

[Presskopp]

The Code for the starter content is there since v1.0, see

​https://themes.trac.wordpress.org/browser/twenty-twenty-one/1.0/inc/starter-content.php?rev=140043

The theme was first released with WP 5.6

The white color seems to got introduced with v1.2 (bundled with WP v5.7)

The change seems to got introduced somewhere here:
​https://themes.trac.wordpress.org/changeset/144395

assumably
​https://themes.trac.wordpress.org/changeset/144395/#file27

[SirLouen]

@nikunj8866
Check ​PR8698

[sabernhardt]

changes Cover block to a Group block in the 'Links area' pattern and starter content

[sabernhardt]

The starter content uses a 'Links area' block pattern, which includes a Cover block. A Group block can display that content the same way more reliably, and I uploaded 63291.replace-cover-block.diff​ to consider changing both the pattern and starter content.

As noted in comment:5, the white text—for the entire Cover block—is the wrong color against the light green or against any light overlay. It comes from the block library styles added in GB41572.

If a light Cover block specifies a dark text color, it seems to work properly on the front end. However, the theme sets a white text color ​in the editor whenever the block's element lacks a has-*-background-color class. Since those classes were moved to the overlay span, .wp-block-cover:not([class*="background-color"]) could match any Cover block.