Twenty Thirteen: correct styling for Button & File block links in front-end widget areas (Footer & Sidebar)

[shailu25]

Twenty Thirteen Theme: Button Block Background & Text Color issue & File Button Text Color issue in Frontend Widget Section

Step to Reproduce the Issue:
===========================

1. Activate Twenty Thirteen Theme.
2. Take Button Block in Widget Section.
3. Check With Default Button styles and Also Check with Background Color & Text Color Selection in Button Block.(Frontend & Backend button text Colors & Background colors are different)
4. Check With File Block in Main Widget Area Section (Button's Text Are not Visible in Frontend Footer)

You will able to see below issues:
============================
i) Default Button Background Color & Text Color are not same in Backend Widget Section and in Frontend.

ii) User Selected Text Color & Background Color are not showing in front-end Widget section.

iii) When Add File button in Footer Widget Section(Main Widget) , Text is not visible in Frontend Side in footer section.

I have attached video for better understanding.
Video URL : ​https://drive.google.com/file/d/1kZtfeubGmEWfMrS5cU78eqBXdwKcD8Po/view

[sabernhardt]

Thanks for the report!

The blocks.css file uses .entry-content for Button block styles and the theme colors, so those never worked in the widget areas. Related: #56290 (Twenty Twelve)

The File block link would need a slightly more specific CSS selector for the text color in the Main (Footer) widget area.

.widget a.wp-block-file__button {
	color: #fff;
}

[shailu25]

Patch Added

[shailu25]

@sabernhardt I have Added Patch as per suggestion.

[sabernhardt]

replaces .entry-content with :root or .wp-block-button, and reduces specificity for footer widget links

[sabernhardt]

Thanks for the patch!

I simplified the selectors in 59207.1.patch​ so the rules would apply in post content or a widget:

• Color presets have :root instead of .entry-content.
• Button block styles replace .entry-content with .wp-block-button if they did not have that previously. If the selector already included the class, the patch replaces .entry-content with :root.

To make the theme color presets work in footer widgets, the link selector uses .site-footer .widget :where(a) for a specificity of 0-2-0. Color rulesets such as :root .has-dark-gray-color have the same specificity later.

Editor styles:

• Shail corrected the orange for Button blocks with the Outline style (in 59207.patch), and I edited the color in the existing ruleset.
• The File block Download link has a 2-pixel radius, and the patch updates the editor styles for that.
• I did not increase the specificity of the color rules for the File block, however. That mismatch comes from the fallback classic-theme-styles, which should be enqueued earlier (#61892).

[karmatosed]

In testing unfortunately this doesn't seem to still be picking up the correct color when changed for a button. I recommend that further testing is brought in before we look to progress.

[shraddhagore]

Patch Report

---

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/59207/59207.1.patch

Environment:
WordPress: 6.8-alpha-59274-src
Theme: Twenty Thirteen, 4.3
Browser: Google Chrome
OS: Windows 11

Screenshots:
Editor: ​https://prnt.sc/bQaSG98KnLVw
Before: ​https://prnt.sc/QUO_WNVKc2qt ​https://prnt.sc/MjaMTH7Fb3rT
After: ​https://prnt.sc/h1xvwBc8dgAz ​https://prnt.sc/q_anFADfCrrf

Comments:
The patch 59207.1 is working as expected.

[ugyensupport]

Twenty Thirteen: correct styling for Button & File block links in front-end widget areas (Footer & Sidebar)

Description

Twenty Thirteen Theme: Button Block Background & Text Color issue & File Button Text Color issue in Frontend Widget Section.

Step to Reproduce the Issue:

1. Activate Twenty Thirteen Theme.
2. Take Button Block in Widget Section.
3. Check With Default Button styles and Also Check with Background Color & Text Color Selection in Button Block.(Frontend & Backend button text Colors & Background colors are different)
4. Check With File Block in Main Widget Area Section (Button's Text Are not Visible in Frontend Footer)

Patch tested: https://core.trac.wordpress.org/attachment/ticket/59207/59207.1.patch

Environment

• WordPress: 6.7.3-alpha-59811
• PHP: 8.4.1
• Server: Apache/2.4.62 (Unix) mod_wsgi/5.0.1 Python/3.12 mod_fastcgi/mod_fastcgi-SNAP-0910052141 OpenSSL/1.1.1w
• Database: mysqli (Server: 5.7.44 / Client: mysqlnd 8.4.1)
• Browser: Chrome 133.0.0.0
• OS: macOS
• Theme: Twenty Thirteen 4.3
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

Before Frontend: ​https://ibb.co/mZk1Y7t
After Frontend: ​https://ibb.co/gFR79D4b

[SirLouen]

Patch Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/59207/59207.1.patch

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Thirteen 4.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Tested items

1. Button block in sidebar Background and Text colors (namely Secondary Widget Area)
2. File block in footer Text color (namely Main Widget Area)

Actual Results with Patch

1. ✅ Sidebar button reflects the right text and background colors
2. ✅ Footer file button reflects the appropriate text color by default

Additional Notes

@karmatosed I believe that after 3 successful test reports, this bug patch is more than ready to progress for a 6.8.2 integration.

[darshitrajyaguru97]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/59207/59207.1.patch

Environment:

OS: Windows 10
PHP: 8.2.12
WordPress: 6.9-alpha-60093-src
Browser: Chrome
Theme: Twenty Thirteen
Plugins: None activated

Actual Results:

✅ Before patch:
Screenshot: ​https://prnt.sc/0N1WP6Y5E1S8

✅ After patch:
Screenshot: ​https://prnt.sc/p6p5COekrtd8

✅ Patch working well as desired solution