Make WordPress Core

Opened 19 months ago

Closed 12 months ago

Last modified 10 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 19 months ago.
added screenshot for better understanding
57087.diff (1.6 KB) - added by itpathsolutions 19 months ago.
Patch file added 57087
before patch.jpg (102.4 KB) - added by nithins53 19 months ago.
Before Patch
after patch.jpg (111.6 KB) - added by nithins53 19 months ago.
57087.2.diff (1.1 KB) - added by shailu25 12 months ago.
Patch added
57087.3.diff (2.8 KB) - added by sabernhardt 12 months ago.
After-57087.3-Patch.png (63.7 KB) - added by shailu25 12 months ago.
After 57087.3 Patch

Download all attachments as: .zip

Change History (23)

@mayur8991
19 months ago

added screenshot for better understanding

@itpathsolutions
19 months ago

Patch file added 57087

#1 @itpathsolutions
19 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 19 months ago by itpathsolutions (previous) (diff)

@nithins53
19 months ago

Before Patch

#2 @nithins53
19 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 19 months ago by nithins53 (previous) (diff)

#3 @sabernhardt
19 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
15 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
14 months ago

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

Version 0, edited 14 months ago by thakordarshil (next)

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


13 months ago

#7 @pooja1210
13 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
12 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
12 months ago

Patch added

#10 @shailu25
12 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

#11 @sabernhardt
12 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
12 months ago

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

@shailu25
12 months ago

After 57087.3 Patch

#13 @shwetabathani2312
12 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
12 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
12 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:


10 months ago
#16

The ticket already merged.

Note: See TracTickets for help on using tickets.