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: |
|
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)
Change History (18)
#1
@
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
This ticket was mentioned in PR #8103 on WordPress/wordpress-develop by @sainathpoojary.
4 weeks ago
#2
- Keywords has-patch added
#3
follow-up:
↓ 6
@
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
@
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
- ✅ 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
#5
@
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
- ✅ Issue resolved with patch.
#6
in reply to:
↑ 3
@
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.
#9
@
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
@
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
@
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:
- 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()
. - Replace pixel-based
line-height
values forbody
and#content
rulesets instyle.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.
File block, front view