![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 10 years ago
Last modified 5 days ago
#36882 accepted enhancement
Add a reusable admin CSS class for destructive actions
| Reported by: | flixos90 | Owned by: | joedolson |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.2 |
| Component: | Administration | Version: | |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: |
Description
As generally recommended, plugin authors should not use regular buttons for destructive actions, like removing something.
However, while there are standardized classes for buttons in WordPress admin (button, button-primary, button-secondary), a similar standardized class is missing for the destructive link. There are several locations in the admin where such links are displayed, but these are all styled using their individual selectors. Therefore plugin authors who want to use this style must either use one of these selectors (that probably do not fit the use-case at all) or recreate the style manually. Therefore I propose to standardize these style rules for a specific class, for example something like delete-button or delete-link.
Change History (24)
#3
@
9 years ago
Thinking at #35126 where a specific class .button-link-delete was added for this purpose, it just makes sense to me to do the same thing for links too.
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
9 years ago
#7
@
9 years ago
- Milestone 4.8 → 4.8.1
Per yesterday's bug scrub, we're going to punt this to 4.8.1.
#8
@
9 years ago
Worth noting [40052] introduced .button-link-delete for <button> elements that look like links. Something similar could be done for the links.
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
9 years ago
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
9 years ago
#11
@
9 years ago
- Milestone 4.8.1 → 4.9
Per today's bug scrub, we'll punt this as the focus for 4.8.1 is regressions only.
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
9 years ago
#13
@
9 years ago
- Milestone 4.9 → Future Release
Punting to Future Release per today's 4.9 bug scrub.
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
4 months ago
#16
@
4 months ago
- Milestone Future Release → 7.1
I'm going to milestone this for 7.1, as a follow-up to the 7.0 admin reskin.
This ticket was mentioned in PR #12449 on WordPress/wordpress-develop by @sukhendu2002.
2 weeks ago
#17
- Keywords has-patch has-unit-tests added; needs-patch removed
Trac ticket: https://core.trac.wordpress.org/ticket/36882
#19
@
10 days ago
We cannot change the milestone due to an issue with Trac itself, but since 7.1 Beta1 is imminent, I would like to mark this ticket to be punted to 7.2 at least. The linked PR has not been reviewed at all yet.
#20
@
9 days ago
I agree with punting to 7.2. The PR is in good shape, and if I'd known it was there I'd have happily reviewed it sooner; but there isn't time at this point.
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
8 days ago
This ticket was mentioned in PR #12580 on WordPress/wordpress-develop by @khokansardar.
5 days ago
#23
- Keywords has-patch added; needs-patch removed
Adds a reusable .delete-link admin CSS class so plugin and theme authors have a standard class for destructive action links, mirroring the existing .button-link-delete class used for destructive <button> elements.
What the problem was:
- The admin standardizes destructive
<button>styling via.button-link-delete(added in [40052] / #35126), but there is no equivalent class for destructive<a>links. - Authors wanting that style had to reuse core selectors that don't fit their use case, or recreate the red color rules by hand.
What the fix does:
- Adds
.delete-linkalongside.button-link-deletein the admin color scheme (_admin.scss), for both the base color and the hover/focus color.
Approach and why:
- The admin
<body>carries thewp-core-uiclass and every admin page loads a compiled color scheme, so.wp-core-ui .delete-linkis available on any admin page, including custom plugin/theme screens — no separatecommon.cssrule is needed. - Color-only rule (no base styling): unlike
.button-link-delete, which needs.button-linkto make a<button>look like a link, an<a>already looks like a link, so only the destructive color is required. - Scheme-aware by construction: it reuses the same
$alert-redtoken and lightened hover/focus, so it stays consistent across all color schemes.
Trac ticket: https://core.trac.wordpress.org/ticket/36882
## Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Ticket analysis and verification. All changes were reviewed, validated against the codebase, and are taken responsibility for by me.
#24
@
5 days ago
PR 11519 takes the right approach — the core .delete-link addition there matches what afercia proposed in comment:3 and comment:8 (mirroring .button-link-delete from #35126 / [40052]).
I've pushed a more minimal alternative for consideration: https://github.com/WordPress/wordpress-develop/pull/12580
It keeps only the essential piece — adding .delete-link next to .button-link-delete in the color scheme (wp-admin/css/colors/_admin.scss), for both the base and the :hover/:focus color. That single ~3-line change gives plugin and theme authors the reusable, scheme-aware class the ticket asks for.
Related: #35126.