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

[poena]

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.

[poena]

File block, front view

[sainathpoojary]

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

Before:

After:

Trac ticket: #62793

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

[mai21]

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

[parthvataliya]

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.

[devtanbir]

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

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

[sainathpoojary]

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

[ankitkumarshah]

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

[sabernhardt]

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

[sabernhardt]

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.

[sainathpoojary]

Hey @sabernhardt,

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

[sabernhardt]

Thanks!

[shailu25]

Test Report

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

Environment:
WordPress - 6.7.1
OS - Windows
Browser - Firefox
Theme: Twenty Ten
PHP - 8.2.12
Active Plugin: None

Actual Results:

• Issue Resolved with patch.✅

[shailu25]

Before Patch

[shailu25]

After Patch

[poena]

Based on the discussion and test results I recommend PR 8103 for commit.

[poena]

In 59843:

Twenty Ten: Correct the styling of the file block.

This change updates the padding, line height, and text color of the button in the file block,
so that the styling is not overriden by the link styles.

Props poena, sainathpoojary, mai21, parthvataliya, devtanbir, ankitkumarshah, sabernhardt, shailu25.
Fixes #62793.

Committed in https://core.trac.wordpress.org/changeset/59843