Opened 33 hours ago
Last modified 29 hours ago
#65539 new defect (bug)
Quick Draft: Improve the 'highlight' styling of newly added drafts
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Administration | Keywords: | has-patch |
| Focuses: | ui | Cc: |
Description
Splitting this out from #64952
When creating a new draft via the Quick Draft dashboard widget, the newly created draft is added to the list of 'Your Recent Drafts' after the Quick Draft form.
It gets 'highlighted' for 1 second with a yellow background #fffbe5. See attached screenshot.
The yellow background is barely visible.
Also, the use of yellow dates to several years ago. Today this yellow color isn't inline with the colors used in the admin. More importantly, given this is a 'success' confirmation, it should use either a green (success0 or blue (info) color.
For example, in the Recent Comments widget, when marking a comment as 'spam' and then clicking 'Undo', the color used is green.
Colors should be used consistently. Instead, on the same page, there are two 'success' actions that use different colors.
Worth also noting the new Quick Draft widget in the Gutenberg Dashboard experiment uses green.
#64952 will add an accessible admin notice for the success feedback. This ticket is only about the 'visual' highlight feedback.
I'd like to suggest to:
- ditch the yellow.
- use green
- maybe improve the padding of the highlighted container
Attachments (1)
Change History (3)
This ticket was mentioned in PR #12316 on WordPress/wordpress-develop by @khokansardar.
30 hours ago
#1
- Keywords has-patch added
This ticket was mentioned in PR #12317 on WordPress/wordpress-develop by @karunyachavan84.
29 hours ago
#2
This PR fixes the Quick Draft success highlight on the Dashboard. When a new draft is created via the Quick Draft widget, it gets highlighted for one second with an old yellow color (#fffbe5) that is barely visible and doesn't match modern admin colors. This fix replaces the yellow with a green background and improves the padding so the highlight box looks cleaner.
Trac ticket: https://core.trac.wordpress.org/ticket/65539
## What Changes?
src/js/_enqueues/wp/dashboard.js: Replaced inline.css()calls withaddClass('is-highlighted')/removeClass('is-highlighted'), separating presentation from logic.
src/wp-admin/css/dashboard.css: Addedpadding: 0.5emwith offsetting negative margins on .drafts li to prevent layout shift, a CSS transition for a smooth fade-out, and a new.is-highlightedrule with a green background (#cceebb) that snaps on instantly.
When a new draft is created via the Quick Draft dashboard widget, the entry added to "Your Recent Drafts" is briefly highlighted for one second. This change improves that highlight's color and spacing.
### What the problem was
#fffbe5), applied inline via JavaScript.### What the fix does
highlighted-draftCSS class instead of an inline style (separation of concerns; removes the oddbackground: nonereset).#cebalready used elsewhere in the admin (edit-comments.js) for positive confirmations, so success feedback is visually consistent — this is the exact color referenced in the ticket.### Approach and why
#cebis the only existing "success" background-highlight green in core admin code and is precisely what the ticket cites for consistency. (Written as shorthand#cebper the WordPress CSS Coding Standards.)border-top) and12pxcontent inset, keeping it on-style with the rest of the Quick Draft widget.Trac ticket: https://core.trac.wordpress.org/ticket/65539
## Use of AI Tools
N/A