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