Opened 16 months ago
Last modified 3 months ago
#59207 new defect (bug)
Twenty Thirteen: correct styling for Button & File block links in front-end widget areas (Footer & Sidebar)
Reported by: | shailu25 | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 5.8 |
Component: | Bundled Theme | Keywords: | has-patch needs-testing |
Focuses: | ui, css | Cc: |
Description
Twenty Thirteen Theme: Button Block Background & Text Color issue & File Button Text Color issue in Frontend Widget Section
Step to Reproduce the Issue:
===========================
- Activate Twenty Thirteen Theme.
- Take Button Block in Widget Section.
- 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)
- 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
Attachments (2)
Change History (7)
#2
@
16 months ago
- Summary changed from Twenty Thirteen Theme: Button Block & File Block Issue in Frontend Widget Section (Footer & Sidebar) to Twenty Thirteen: correct styling for Button & File block links in front-end widget areas (Footer & Sidebar)
- Version changed from trunk to 5.8
#3
@
16 months ago
- Keywords has-patch added; needs-patch removed
@sabernhardt I have Added Patch as per suggestion.
@
3 months ago
replaces .entry-content
with :root
or .wp-block-button
, and reduces specificity for footer widget links
#5
@
3 months ago
- Milestone changed from Awaiting Review to Future Release
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).
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.