Make WordPress Core

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: afercia's profile afercia 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)

quick draft highlight.png (71.6 KB) - added by afercia 33 hours ago.

Download all attachments as: .zip

Change History (3)

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


30 hours ago
#1

  • Keywords has-patch added

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

  • The highlight used a faint yellow background (#fffbe5), applied inline via JavaScript.
  • The yellow predates the current admin color scheme, is barely visible, and is inconsistent with other success feedback in the admin (e.g. the Recent Comments widget uses green when approving a comment or undoing a spam action).
  • The highlight hugged the text with no breathing room (no padding).

### What the fix does

  • Applies the highlight via a highlighted-draft CSS class instead of an inline style (separation of concerns; removes the odd background: none reset).
  • Uses the success green #ceb already 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.
  • Makes the highlight span the full width of the widget with internal padding, matching the dashboard widget style, so it reads as a proper success row with breathing room.
  • Negative margins offset the padding so surrounding drafts do not shift while the highlight is shown (no layout jank).

### Approach and why

  • #ceb is the only existing "success" background-highlight green in core admin code and is precisely what the ticket cites for consistency. (Written as shorthand #ceb per the WordPress CSS Coding Standards.)
  • The full-bleed band aligns with the widget's existing full-width separator (border-top) and 12px content 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

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 with addClass('is-highlighted') / removeClass('is-highlighted'), separating presentation from logic.
  • src/wp-admin/css/dashboard.css: Added padding: 0.5em with offsetting negative margins on .drafts li to prevent layout shift, a CSS transition for a smooth fade-out, and a new .is-highlighted rule with a green background (#cceebb) that snaps on instantly.
Note: See TracTickets for help on using tickets.