Quick/Bulk Edit are not visually consistent

[helen]

Quick/Bulk Edit are not visually consistent between uses (posts vs. comments, for example), and have typography treatment that we don't really use elsewhere in the admin, like all-caps and italic labels. It really hasn't changed much in quite some time.

This needs some considered design treatment. Screenshots attached below.

[helen]

Post quick edit

[helen]

Post quick edit, responsive

[helen]

Comment quick edit

[helen]

Comment quick edit, responsive

[sanket.parmar]

Hi @helen

[sanket.parmar]

Hi @helen

[sanket.parmar]

Hi @helen,

Please see above attachment for comment quick edit. This is not responsive.

[helen]

@sanket.parmar Correct, that is being tracked in #33596. Screenshots are with fixes to better reflect the proper state.

[antpb]

This looks to be fixed in #33596. Screenshot to verify below. Closing this as I am finding tickets for WCEU Contributor day.

[netweb]

I believe the inconsistencies are still present, a set of current screenshots comparing those already submitted to this ticket would be beneficial to check on any progress made thus far.

[garrett-eclipse]

Quick Edit - Page

[garrett-eclipse]

Quick Edit - Post

[garrett-eclipse]

Quick Edit - Comment

[garrett-eclipse]

Bulk Edit - Page

[garrett-eclipse]

Bulk Edit - Posts

[garrett-eclipse]

Replying to netweb:

I believe the inconsistencies are still present, a set of current screenshots comparing those already submitted to this ticket would be beneficial to check on any progress made thus far.

Hi @netweb, I've uploaded fresh Quick/Bulk Edit screens for the default post types. Media doesn't currently support (but may w/ #12208) either Bulk or Quick edit actions. Comments doesn't support the Bulk Edit action.

Reviewing them the available Bulk Edit actions are consistent (to my eyes at least), while the Quick Edit actions are consistent between Posts and Pages but slightly different in the Comments.

So the focus would be the consistentcy between Posts/Pages and Comments in Quick Edit. The inconsistencies I can identify are;

• The Quick Edit section for Posts/Pages identifies itself with 'QUICK EDIT' heading before the fields. Comments just starts with 'Edit Comment'.
• The field labels in Posts/Pages is italics.
• The field labels in Posts/Pages seem to have more space between them and the field.
• The actions for Posts/Pages is 'Cancel' bottom left and 'Update' bottom right, for Comments both actions are bottom left with the update action label being 'Update Comment'. That string can probably be dropped to just use 'Update'.

I've added needs-design-feedback to compare and decide on which field label styling and heading/button approach be used.

[garrett-eclipse]

One other minor aesthetic change between the Posts/Pages vs Comments 'Quick Edit' is the background. On Posts/Pages the background stays what the original row is. While in Comments the zebra striping changes when Quick Edit is enabled making the background change from it's original row.
Edit - This seems to be identified via #25060 and #31006

[netweb]

Replying to garrett-eclipse:

I've added needs-design-feedback to compare and decide on which field label styling and heading/button approach be used.

Thanks @garrett-eclipse, sounds good to me 👍

[nrqsnchz]

Discussed during today's design triage meeting(​https://wordpress.slack.com/archives/C02S78ZAL/p1571675443285400) in Slack.

The team agrees that updating these to achieve consistency is desirable.

[melchoyce]

The Quick Edit section for Posts/Pages identifies itself with 'QUICK EDIT' heading before the fields. Comments just starts with 'Edit Comment'.

You get to this interface by clicking the "Quick Edit" action, so I think the heading should also say "QUICK EDIT" like it does on Posts/Pages.

The field labels in Posts/Pages is italics.

We're trying to eliminate italics from the admin — see #47327. All of the Quick Edit labels should be styled normally, without italics. We should probably match the label styling in settings and make all Quick Edit labels semibold. (They're also much larger in the Settings page, but we can't increase the size without totally breaking the Quick Edit layout.)

The field labels in Posts/Pages seem to have more space between them and the field.

We should probably use Settings as the standard here too, and make them all 4px spacing between label and input.

The actions for Posts/Pages is 'Cancel' bottom left and 'Update' bottom right, for Comments both actions are bottom left with the update action label being 'Update Comment'. That string can probably be dropped to just use 'Update'.

We're talking about this in #48644, we should probably wait on a decision there and then apply it here.

[davidbaumwald]

This ticket still needs a patch, and with 5.4 Beta 1 landing tomorrow, this is being moved to Future Release. If any maintainer or committer feels this can be included in 5.4 or wishes to assume ownership during a specific cycle, feel free to update the milestone accordingly.