Context Navigation

← Previous Ticket
Next Ticket →

#64684 closed defect (bug) (fixed)

Bulk Edit selected items remove icon is oversized and misaligned

Reported by:	mohitbsf	Owned by:	joedolson
Milestone:	7.0	Priority:	normal
Severity:	normal	Version:
Component:	Administration	Keywords:	admin-reskin has-patch commit
Focuses:	css	Cc:

Description

WordPress version: 7.0
Environment: Clean install, default theme (Twenty Twenty-Five), no active plugins

Steps to Reproduce

Go to Pages → All Pages

Select multiple pages using the checkboxes

Choose “Bulk edit” from the dropdown

Click “Apply”

Observe the selected pages list shown under the Bulk Edit panel

Expected Result

The remove (X) icon next to each selected page should:

Be visually aligned with the page title text

Match the size and alignment of similar remove icons used elsewhere in the admin

Appear proportionate within the row

Actual Result

The remove (X) icon:

Appears larger than expected

Is slightly misaligned vertically relative to the page title

Feels visually inconsistent with other admin UI elements

Additional Notes

Reproducible on a clean install

Occurs with all plugins deactivated

Appears to be a CSS sizing and alignment issue in the Bulk Edit component

Attachments (3)

Screen Shot on 2026-02-21 at 00-45-24.png (96.7 KB) - added by mohitbsf 3 months ago.
before-patch.png (61.8 KB) - added by shailu25 3 months ago.: Before Patch
after-patch.png (30.0 KB) - added by shailu25 3 months ago.: After Patch

Download all attachments as: .zip

Change History (19)

@mohitbsf
3 months ago

Attachment Screen Shot on 2026-02-21 at 00-45-24.png added

#1 @joedolson
3 months ago

Keywords admin-reskin added
Milestone changed from Awaiting Review to 7.0

Noting that the button also still has the old :focus color.

#2 @mohitbsf
3 months ago

Indeed, but the alignment of the X icon should be managed,

I do agree for the :focus color, good catch @joedolson

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

3 months ago #3

Keywords has-patch added

Ticket: https://core.trac.wordpress.org/ticket/64684

## Summary

This patch corrects the color inconsistency for the remove (X) icon in the Bulk Edit selected items list to match the current admin UI focus color standards.

## Description

The Bulk Edit panel was using an outdated focus color on the selected items “remove” icon, leading to visual inconsistency with other admin UI elements. This update aligns the icon’s focus color with the rest of the admin interface, improving visual cohesion and accessibility.

## Changes Included

Updated CSS variable for the remove (X) icon focus color in the Bulk Edit selected items list to use the current admin color token.
No changes have been made to the icon size or alignment — the existing size remains as in the current admin UI. The icon size visually appears consistent with surrounding UI, and no regression was observed.

## Rationale

Ensures the Bulk Edit UI matches the design system in terms of color usage.
Avoids unnecessary changes to icon size/alignment since the existing appearance is within acceptable design parameters.

## Testing

Verified on a clean install of WordPress trunk (7.0), default theme (Twenty Twenty-Five), no plugins activated.
Confirmed updated focus color matches other admin icons.
Confirmed no visual regressions in related UI elements.

## Screenshot

#4 @huzaifaalmesbah
3 months ago

This PR fixed the misalignment and i think new admin reskin increasing their icons size.

Before Apply Patch	After Apply Patch ✅

#5 @madhavishah01
3 months ago

Tested locally on WordPress 7.0 Beta 1.
The patch works as expected — icon alignment is corrected and the focus styling properly uses the admin CSS variables.
Looks good to me.

Before applying the patch:-
https://prnt.sc/bzOBjYiOkwZG

After applying the patch:-
https://prnt.sc/dcFvhUNfuYTS

#6 @sabernhardt
3 months ago

PR 10998 probably belongs on this ticket instead of #64685. It fixes the icon alignment in multiple places with relative line-height and other dimensions. The padding would not change. However, my PR does not adjust the focus styles (yet).

This ticket was mentioned in Slack in #core-test by ozgur_sar. View the logs.

3 months ago

#8 @r1k0
3 months ago

I tested PR 10998. The patch fixes the alignment issue and changes the size of the icons without changing the padding.

Noting that the button also still has the old :focus color.

Also, this PR 10991 changes the box-shadow color for the button while in :focus state. My confusion is whether the change should be for the button's color or the button's box-shadow in :focus state.

I'll submit a report once the adjustments to the :focus state are made.

Below are the before-and-after screenshots of the misalignment fixed. The black and red outlines are there to provide a visual aid on the alignment.

Before:

After:

Last edited 3 months ago by r1k0 (previous) (diff)

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

3 months ago #9

Assigns relative values for line-height, width and height of the icon in buttons that remove, dismiss or close. All three computed values match the font size.
Edits the :focus width and color for Bulk Edit remove buttons.

Props: opurockey

Trac 64684

Use of AI Tools: none

#10 @ozgursar
3 months ago

Patch Testing Report

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

Environment

WordPress: 7.0-beta2-61752-src
PHP: 8.2.29
Server: nginx/1.29.4
Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
Browser: Chrome 145.0.0.0
OS: macOS
Theme: Twenty Twenty-Five 1.4
MU Plugins: None activated
Plugins:
- Test Reports 1.2.1

Steps taken

In Dashboard All Pages > Pages
Select All
Choose Bulk adit from Bulk actions dropdown and click Apply
Verify that remove icons are slightly misaligned with Page names
Verify that focus state color of remove icons is #d63638
Apply the patch
Repeat 1-3
Verify that icons are correctly aligned
✅ Patch is solving the problem

Expected result

Icons are properly sized and vertically centered with the titles

Additional Notes

Also mentioned by @r1k0, I'm not sure whether the icons' focus state color should be #d63638. common.css is overriding the focus color var(--wp-admin-theme-color)