Twenty Twenty: Button text is not visible in footer widget

[mayur8991]

• Choose Twenty Twenty Theme
• Activate theme
• Go to widget section
• add button in footer widget and add texts then save it

in frontend that button text is not visible

[mayur8991]

added screenshot for better understanding

[itpathsolutions]

Patch file added 57087

[itpathsolutions]

Css issue
you can remove .footer-widgets a from function.php line no 755
OR
you can add custom css for button color
Ex:
.widget.widget_block .wp-element-button{color:#ffffff;}

[nithins53]

Before Patch

[nithins53]

I was able to reproduce the issue. Tested the patch and it works fine. Not sure if it is the right way.

[sabernhardt]

The .footer-widgets a selector has been in the theme since ​PR 447. However, links have a default color regardless of location, so this might be safe to remove. This would need testing with many different links in widgets.

One quirk is that changing the Primary (or accent) color in the Customizer will turn the button text color to white. This color continues to apply when switching back to the default Primary color.

.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  color: #ffffff;
}

In WordPress 6.0, the button text was also pink, unless the link was visited earlier. (The editor styles had set a white color for the :visited state.)

[arafatjamil01]

I have applied the patch in svn and tested it with WordPress 6.2, the patch works perfectly.

[thakordarshil]

Patch works fine in WordPress 6.2
when theme will be available with the patch ?? @sabernhardt

[pooja1210]

Hi

Test report for - https://core.trac.wordpress.org/attachment/ticket/57087/57087.diff patch

Environment:
WordPress - V6.2.2
Theme - Twenty Twenty
Os: Mac
Browser: Chrome

Expected Result: The button text added from the widget should be visible on the frontend ☑️

Before Screenshot:
Backend widget - ​https://prnt.sc/i6eLFO3PLq3G
Frontend Footer - ​https://prnt.sc/T3D0YgtcnP3x

After Screenshot:
Backend widget - ​https://prnt.sc/i6eLFO3PLq3G
Frontend Footer - ​https://prnt.sc/XeoTFpPVhZvS

Thanks!

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

[mukesh27]

@sabernhardt Your suggestion look good and solve the issue in my testing.

Could you take a look the PR?

Moving it to 6.3 consideration.

[shailu25]

Patch added

[shailu25]

Expected Result: Button text should visible in footer widget same as backend

Before Patch Screenshot: ​https://prnt.sc/WBVVcmvEz5E6

After Patch Screenshot: ​https://prnt.sc/Sc1wWrkFodMi

[sabernhardt]

The white text from .header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link could be considered another issue, not an ideal solution. It is lighter than the beige for a Button link in the content area, and it already occurs if you choose another Accent color in the Customizer (plus it remains even after restoring the default Accent color). Then choosing one of the theme colors for the text would have no effect on the front end.

I'm more concerned about the unreadable default colors, though I tried fixing both situations with the :where() selector to avoid increasing specificity.

[shailu25]

Yes @sabernhardt, this is better solution(Without using specific color) and Patch is working fine.

[shailu25]

After 57087.3 Patch

[shwetabathani2312]

Test Report for https://core.trac.wordpress.org/attachment/ticket/57087/57087.3.diff

Environment:
WordPress - 6.3-alpha
Theme - Twenty Twenty
Os: Windows
Browser: Chrome

Before Patch : ​https://prnt.sc/FBxweA4PGpXn

After Patch : ​https://prnt.sc/1qngccz3tygm

Result After Patch : The button text is visible on the frontend

https://core.trac.wordpress.org/attachment/ticket/57087/57087.3.diff is working as expected

Thanks.

[audrasjb]

Works fine on my side too, thanks everyone.

[audrasjb]

In 56106:

Twenty Twenty: Fix Button block text color when located in footer widgets.

This changeset ensures the Button block text color is consistent when this block is used in a footer widget.

Props mayur8991, itpathsolutions, nithins53, sabernhardt, arafatjamil01, thakordarshil, pooja1210, mukesh27, shailu25, shwetabathani2312.
Fixes #57087.

The ticket already merged.