Make WordPress Core

Opened 16 months ago

Closed 8 months ago

Last modified 6 months ago

#57087 closed defect (bug) (fixed)

Twenty Twenty: Button text is not visible in footer widget

Reported by: mayur8991's profile mayur8991 Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch has-testing-info commit
Focuses: css Cc:

Description

  • 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

Attachments (7)

download.png (80.9 KB) - added by mayur8991 16 months ago.
added screenshot for better understanding
57087.diff (1.6 KB) - added by itpathsolutions 16 months ago.
Patch file added 57087
before patch.jpg (102.4 KB) - added by nithins53 16 months ago.
Before Patch
after patch.jpg (111.6 KB) - added by nithins53 16 months ago.
57087.2.diff (1.1 KB) - added by shailu25 9 months ago.
Patch added
57087.3.diff (2.8 KB) - added by sabernhardt 9 months ago.
After-57087.3-Patch.png (63.7 KB) - added by shailu25 9 months ago.
After 57087.3 Patch

Download all attachments as: .zip

Change History (23)

@mayur8991
16 months ago

added screenshot for better understanding

@itpathsolutions
16 months ago

Patch file added 57087

#1 @itpathsolutions
16 months ago

  • Keywords has-patch added

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;}

Last edited 16 months ago by itpathsolutions (previous) (diff)

@nithins53
16 months ago

Before Patch

#2 @nithins53
16 months ago

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

Last edited 16 months ago by nithins53 (previous) (diff)

#3 @sabernhardt
16 months ago

  • Component changed from Themes to Bundled Theme
  • Focuses css added
  • Keywords needs-testing added
  • Summary changed from Twenty Twenty Theme - Button texts is not visible in footer widget to Twenty Twenty: Button text is not visible in footer widget
  • Version 6.1 deleted

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.)

#4 @arafatjamil01
11 months ago

  • Version set to 6.2

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

#5 @thakordarshil
10 months ago

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

Last edited 10 months ago by thakordarshil (previous) (diff)

This ticket was mentioned in Slack in #core by mayur8991. View the logs.


9 months ago

#7 @pooja1210
9 months ago

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!

#9 @mukesh27
9 months ago

  • Milestone changed from Awaiting Review to 6.3
  • Version 6.2 deleted

@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
9 months ago

Patch added

#10 @shailu25
9 months ago

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
9 months ago

#11 @sabernhardt
9 months ago

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.

#12 @shailu25
9 months ago

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

@shailu25
9 months ago

After 57087.3 Patch

#13 @shwetabathani2312
8 months ago

  • Keywords has-testing-info added

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.

#14 @audrasjb
8 months ago

  • Keywords commit added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to accepted

Works fine on my side too, thanks everyone.

#15 @audrasjb
8 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

@mukesh27 commented on PR #4564:


6 months ago
#16

The ticket already merged.

Note: See TracTickets for help on using tickets.