Make WordPress Core

Opened 4 weeks ago

Last modified 3 weeks ago

#62793 new defect (bug)

Twenty Ten: Link styles breaks the style of the file block

Reported by: poena's profile poena Owned by:
Milestone: 6.8 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-testing-info
Focuses: css Cc:

Description

The file block uses a link that is styled as a button, with a default padding of
.5em 1em;.

The theme also has CSS that removes the padding from all links. This means that the file block button has no padding, and it looks broken.

Attachments (5)

twenty-ten-file-block.png (10.3 KB) - added by poena 4 weeks ago.
File block, front view
BeforePatch.png (20.2 KB) - added by mai21 4 weeks ago.
afterPatch.png (20.7 KB) - added by mai21 4 weeks ago.
before-8103.png (19.3 KB) - added by parthvataliya 4 weeks ago.
after-8103.png (19.4 KB) - added by parthvataliya 4 weeks ago.

Download all attachments as: .zip

Change History (18)

@poena
4 weeks ago

File block, front view

#1 @sainathpoojary
4 weeks ago

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.26
  • Server: nginx/1.27.3
  • Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
  • Browser: Chrome 131.0.0.0
  • OS: macOS
  • Theme: Twenty Ten 4.3
  • MU Plugins: None activated
  • Plugins: Test Reports 1.2.0

Actual Results

✅ Error condition occurs (reproduced).

Additional Notes

Additionally, the button text color is set to the link color (blue) in front end.

Supplemental Artifacts

https://utfs.io/f/PL8E4NiPUWyOW8Ybmn7vRTdgHAZJIiLnBPhzUw3Yx4NMe0mq

This ticket was mentioned in PR #8103 on WordPress/wordpress-develop by @sainathpoojary.


4 weeks ago
#2

  • Keywords has-patch added

Before:
https://github.com/user-attachments/assets/eed9c5f1-ebbf-4e39-a46e-5add83f461ca

After:
https://github.com/user-attachments/assets/d71afef1-183d-4d0d-85b0-36b1bb9ab83b

Trac ticket: #62793

#3 follow-up: @sainathpoojary
4 weeks ago

Hey @poena,

I’ve added a fix for the overridden padding in the File block of the Twenty Ten theme. Please have a look whenever you have a moment.

#4 @mai21
4 weeks ago

  • Keywords has-testing-info added

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/8103

Environment

  • WordPress: 6.8-alpha-59565
  • PHP: 8.3.14
  • Server: nginx/1.26.2
  • Database: mysqli (Server: 10.5.27-MariaDB-ubu2004-log / Client: mysqlnd 8.3.14)
  • Browser: Chrome 131.0.0.0
  • OS: Linux
  • Theme: Twenty Ten 4.3
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0
    • WordPress Beta Tester 3.6.2

Actual Results

  1. ✅ Issue resolved with patch.

Additional Notes

Steps:
1- While active theme is 2010
2- Add/edit page and add file
3- view the page as admin or guest => notice before patch, borders of download btn aren't there, after patch borders added and btn text is not link color anymore

  • Fixed on the mentioned patch if it's about page view in admin / or as guest

Supplemental Artifacts

Add as Attachment

@mai21
4 weeks ago

@mai21
4 weeks ago

#5 @parthvataliya
4 weeks ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8103.diff

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.26
  • Server: nginx/1.27.3
  • Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
  • Browser: Chrome 131.0.0.0
  • OS: Linux
  • Theme: Twenty Ten 4.3
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ✅ Issue resolved with patch.

#6 in reply to: ↑ 3 @devtanbir
4 weeks ago

@sainathpoojary I have tested your PR, and it's working fine. However, it would be better if you applied the same line-height on the front-end that the button is receiving from the editor. Here's the updated code:

.wp-block-file .wp-block-file__button {
    padding: 0.5em 1em;
    color: #ffffff;
    line-height: 1.5;
}

Replying to sainathpoojary:

Hey @poena,

I’ve added a fix for the overridden padding in the File block of the Twenty Ten theme. Please have a look whenever you have a moment.

This ticket was mentioned in PR #8109 on WordPress/wordpress-develop by @nidhidhandhukiya.


4 weeks ago
#7

Trac ticket:
Trac ticket: #62793
Updated the Pr as per the suggestion in trac ticket.

#8 @sainathpoojary
3 weeks ago

Hey @devtanbir, I’ve updated the PR to ensure consistent line-height as well.

#9 @ankitkumarshah
3 weeks ago

PR Tested: https://github.com/WordPress/wordpress-develop/pull/8103

Hi @sainathpoojary,

I have tested your PR with the latest changes that is adding of line-height. After adding line-height the inconsistency between the editor and frontend is fixed.

Here is the screencast:
https://ppgtp1rtd3.ufs.sh/f/TnWMEUzoUd85pEtMKr7q6eCIWlrKHLyFbY5svuk9PDGo72E4

#10 @sabernhardt
3 weeks ago

  • Focuses css added
  • Keywords changes-requested added

Now both pull requests propose the same changes, but please update color to use the #fff hexadecimal shorthand.

#11 @sabernhardt
3 weeks ago

The padding and line-height are appropriate in the File block styles, as the PRs add them, but I'll mention other options with a larger scope:

  1. The old CSS reset removes any padding from standard link elements (a {padding: 0}). In theory, the selector could be changed to :where(a), and then Core block library styles would apply the correct values with :where(.wp-block-file__button). However, that is not pretty, and replacing the entire CSS reset could be a better choice than editing it with :where().
  2. Replace pixel-based line-height values for body and #content rulesets in style.css with 1.5. This could be a separate (bigger) project on another ticket, but it seems more like an enhancement than a bugfix in a very old theme.

To be clear, adding all three properties in the File block link ruleset would be fine, especially because it needs the white text color anyway.

#12 @sainathpoojary
3 weeks ago

Hey @sabernhardt,

I’ve updated the PR to use the #fff hexadecimal shorthand for color.

#13 @sabernhardt
3 weeks ago

  • Keywords changes-requested removed
  • Milestone changed from Awaiting Review to 6.8

Thanks!

Note: See TracTickets for help on using tickets.