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