Make WordPress Core

Opened 6 weeks ago

Closed 8 days ago

#64987 closed defect (bug) (fixed)

Admin Reskin: Add more margin below the plugin card header

Reported by: wildworks's profile wildworks Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 7.0 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: admin-reskin has-patch commit dev-reviewed
Focuses: Cc:

Description

Due to the new design system initiative, the plugin installation button height has been changed from 30px to 32px. This may cause the installation button and the plugin button to appear cramped, with very little space between them. This issue occurs with several languages.

Attachments (3)

plugin-install.png (64.5 KB) - added by wildworks 6 weeks ago.
Several examples where the install button and plugin text are closely spaced.
plugin-card.png (283.9 KB) - added by mukesh27 6 weeks ago.
plugin-card-comparison.png (193.9 KB) - added by wildworks 6 weeks ago.

Download all attachments as: .zip

Change History (16)

@wildworks
6 weeks ago

Several examples where the install button and plugin text are closely spaced.

@mukesh27
6 weeks ago

#1 @mukesh27
6 weeks ago

Do you have a screenshot from the 6.9.x version for comparison? It’s often a trade-off since different languages have varying text lengths, and in this case the button are using absolute positioning, which can easily overlap/override the text.

Please see the attached plugin-card.png for reference in which i update button text only.

#2 @wildworks
6 weeks ago

Sorry for the confusion. That's not what I meant. I'm referring to the space between the install button and the plugin description.

In other words, I would like to propose the following changes.

From:

.plugin-card h3 {
    margin: 0 12px 12px 0;
}

To:

.plugin-card h3 {
    margin: 0 12px 16px 0;
}

See the screenshot below.

Last edited 6 weeks ago by wildworks (previous) (diff)

#3 @mukesh27
6 weeks ago

Thanks for the details.

Could you open a PR with the CSS changes you’re proposing? That would make it easier for us to discuss and iterate on the issue.

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


6 weeks ago
#4

  • Keywords has-patch added

Trac ticket:

## Use of AI Tools

None

## Screenshots

In the following screenshots, the locale and screen size are intentionally set so that the install button and text are close together to make the difference clear.

### Before

https://github.com/user-attachments/assets/a5c504b4-5483-4bef-9970-dc73f99bb371

### After

https://github.com/user-attachments/assets/a52796ae-a3d2-42f5-8be5-bf549c6cf43f

#5 @noruzzaman
6 weeks ago

Test Report

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

Environment

  • WordPress: 7.1-alpha-20260330.093642
  • PHP: 7.4.33
  • Server: PHP.wasm
  • Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
  • Browser: Chrome 146.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.4
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.1

Actual Results

  1. ✅ Issue resolved with this patch.
Before After
https://i.ibb.co.com/QvXwzxVF/before.png https://i.ibb.co.com/FbJyZmXJ/after.png

#6 @wildworks
2 weeks ago

  • Milestone changed from Awaiting Review to 7.0

This is not strictly a bug, but it might be worth fixing in the 7.0 release.

#7 @darshitrajyaguru97
2 weeks ago

Test Report

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

Environment

  • WordPress: 7.1-alpha-20260330.093642
  • PHP: 8.2.29
  • Database: MySQL
  • Browser: Chrome
  • OS: Windows
  • Theme: Twenty Twenty-Five
  • MU Plugins: None activated

Steps to Test

# Apply the patch from the PR
# Follow the steps mentioned in the ticket to reproduce the issue
# Verify the behavior after applying the patch

Actual Results

✅ The issue is resolved after applying the patch.
No regressions were observed during testing.

Additional Notes

The patch works as expected in the tested environment.

@shailu25 commented on PR #11395:


2 weeks ago
#8

Added more spacing below the plugin card header.✅

BeforeAfter
https://github.com/user-attachments/assets/9d9ff6c3-e1bd-4d63-aa47-902f4debef35https://github.com/user-attachments/assets/196bf237-8b76-4e3d-b3cd-33647cea6d3e

#9 @SergeyBiryukov
13 days ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 62290:

Admin Reskin: Add more spacing below the plugin card header.

Follow-up to [61646].

Props wildworks, mukesh27, shailu25, noruzzaman, darshitrajyaguru97, SergeyBiryukov.
Fixes #64987.

@SergeyBiryukov commented on PR #11395:


13 days ago
#10

Thanks for the PR! Merged in r62290.

#11 @SergeyBiryukov
13 days ago

  • Keywords commit dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for 7.0 consideration.

#12 @audrasjb
13 days ago

  • Keywords dev-reviewed added; dev-feedback removed

Second committer sign-off: This looks good to me 👍

#13 @peterwilsoncc
8 days ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 62302:

Admin Reskin: Add more spacing below the plugin card header.

Follow-up to [61646].

Reviewed by audrasjb.
Merges r62290 to the 7.0 branch.

Props wildworks, mukesh27, shailu25, noruzzaman, darshitrajyaguru97, SergeyBiryukov.
Fixes #64987.

Note: See TracTickets for help on using tickets.