Make WordPress Core

Opened 23 months ago

Last modified 2 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's profile shailu25 Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: has-patch dev-feedback has-test-info
Focuses: 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:
===========================

  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

Attachments (2)

59207.patch (8.4 KB) - added by shailu25 23 months ago.
Patch Added
59207.1.patch (6.3 KB) - added by sabernhardt 10 months ago.
replaces .entry-content with :root or .wp-block-button, and reduces specificity for footer widget links

Download all attachments as: .zip

Change History (13)

#1 @shailu25
23 months ago

  • Keywords needs-patch added

#2 @sabernhardt
23 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

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
23 months ago

Patch Added

#3 @shailu25
23 months ago

  • Keywords has-patch added; needs-patch removed

@sabernhardt I have Added Patch as per suggestion.

#4 @karmatosed
11 months ago

  • Keywords needs-testing added

@sabernhardt
10 months ago

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

#5 @sabernhardt
10 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).

#6 @karmatosed
7 months ago

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.

#7 @shraddhagore
5 months ago

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.

#8 @ugyensupport
5 months ago

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

#9 @SirLouen
2 months ago

  • Focuses ui removed
  • Keywords dev-feedback has-testing-info added; needs-testing removed

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.

Last edited 2 months ago by SirLouen (previous) (diff)

#10 @darshitrajyaguru97
2 months ago

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

#11 @wordpressdotorg
2 months ago

  • Keywords has-test-info added; has-testing-info removed
Note: See TracTickets for help on using tickets.