WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 2 years ago

#35496 closed defect (bug) (fixed)

Quick Edit error messages UI improvements

Reported by: afercia Owned by: afercia
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Quick/Bulk Edit Keywords: has-screenshots has-ui-feedback has-patch
Focuses: ui Cc:
PR Number:

Description

When a Quick Edit action fails, an error message is displayed in plain text inside the form. See in the screenshot below, for Posts and Taxonomies.

They could be visually improved a bit. Probably use a .notice CSS class and, especially for small screens, be displayed below the form?

https://cldup.com/TtyfaDs0XB.png

Attachments (6)

35496.comments.png (92.4 KB) - added by ocean90 4 years ago.
quick-edit-error-desktop.jpg (261.9 KB) - added by melchoyce 3 years ago.
quick-edit-error-mobile.jpg (95.7 KB) - added by melchoyce 3 years ago.
35496.diff (15.1 KB) - added by afercia 2 years ago.
35496.2.diff (15.1 KB) - added by afercia 2 years ago.
35496.3.diff (15.1 KB) - added by afercia 2 years ago.

Download all attachments as: .zip

Change History (17)

#1 @afercia
4 years ago

Yep, just prepared a screenshot for Quick Edit and Reply errors for comments :)

https://cldup.com/_BGgoEzjbA.png

#2 @afercia
4 years ago

  • Keywords ui-feedback added

#3 @karmatosed
3 years ago

I think having them red is good. I almost want full on error messages though with boxes and everything. They merge a little too much for me just as text. However, I do wonder if making them an error box will be overkill.

I wonder a little on positioning, the message seems to float without connecting to an action in a few of those screenshots. Could we use this as a chance to bring the message to the action also?

#4 @melchoyce
3 years ago

+1 for a regularly styled error message, even if it does feel a little overkill. Attaching some ideas.

#5 @karmatosed
3 years ago

+1 to that @melchoyce - looks so much better with a box and error message that way.

#6 @karmatosed
3 years ago

  • Keywords has-ui-feedback added; ui-feedback removed

@afercia
2 years ago

#7 @afercia
2 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 4.9
  • Owner set to afercia
  • Status changed from new to assigned

35496.diff changes the error messages to use inline notices. Also adds some missing periods to some error messages. A few screenshots:

https://cldup.com/Ufnkh-JeZD.png

https://cldup.com/b4wDD_vA6G.png

https://cldup.com/hP-MbiqEjS.png

https://cldup.com/FwAG0TIBh4.png

#8 @melchoyce
2 years ago

One note, we'll want to use the .notice-alt class here since the notice is on a white background.

@afercia
2 years ago

#9 @afercia
2 years ago

Actually, the notices are on a zebra striped background, depending on the line the background is white or light gray. Patch updated with the notice-alt style. Screenshot:

https://cldup.com/OVNqqFLcul.png

One thing I personally don't like so much about the notice-alt style is that it lacks the bottom box-shadow, making the notice look "flat". any specific reason for this?

https://cldup.com/cddsnl2sUW.png

@afercia
2 years ago

#10 @afercia
2 years ago

Refreshed patch. I'm going to commit this change. If the notice-alt style feels a bit too heavy, can be quickly changed to normal notice.

#11 @afercia
2 years ago

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

In 41684:

Quick/Bulk Edit: Improve the inline error messages styling.

  • uses the core notice styles for the Quick Edit form inline error messages
  • adds missing periods at the end of a few error messages

Props ocean90, karmatosed, melchoyce, afercia.
Fixes #35496.

Note: See TracTickets for help on using tickets.