Post Lock Interface for Post List Screen

[dh-shredder]

For 3.6, we'd like to improve the experience for users with post locks!

For the Post List screen, we'd like to:

• Make it easy for users to tell which posts are locked directly from the post list screen.
• Realtime lock update using Heartbeat API (#23216)

Maybe:

• Make it visible which user holds the lock
• Meta editing allowed while post is locked

Temporary Lock Icon. Source: CC0: ​http://thenounproject.com/noun/lock/#icon-No9362

Initial Pass.

Rough first pass​ for discussion.

Requires lock image​ in wp-admin/images/lock_16x16x32.png.

• Displays lock in lieu of checkbox if post is locked. This has the intended secondary effect of disabling bulk edit when a post is locked.
• Removes link to Quick Edit for any locked post.

Extended 23312.diff a bit to use css class to show/hide the lock icon and show "Currently edited by.." under the post title as discussed with @dh-shredder. That would make it easier to (eventually) update which posts are locked dynamically.

Looks good! The display is a little odd when only one row is a different height than the rest, but I really like the increased information available.

here is a screenshot of the UI: ​http://cl.ly/image/3h0R261k1O2Z

In 23371:

Posts screen: show when a post is "locked", hide the checkbox, Quick Edit and Trash links, props dh-shredder, see #23312

In 23372:

Clean up rendering of the title column in the posts list table. Simplify branching. Use get_userdata() rather than get_user_by( 'id' ). Change string to '%s is currently editing'. see #23312.

lock in classic and flat style

psd of lock in classic and flat style

I've uploaded lock graphics in classic and flat styles; 16x16 and 32x32 versions for retina. Sorry no time to slice at the moment...

Don't check hidden checkboxes on bulk select/deselect.

Since we're not suppressing the creation of the checkboxes when locked, 23312.no_bulk_edit_hidden.diff​ keeps the hidden checkboxes from being checked, thus keeping them from being selected for bulk edit.

Replying to empireoflight:

I've uploaded lock graphics in classic and flat styles; 16x16 and 32x32 versions for retina. Sorry no time to slice at the moment...

Thanks! Those look great.

23312-3.patch adds "live" update of locked posts using heartbeat.

23312-4.patch fixes the removal of locks and escapes the user name when adding a lock.

In 23485:

Post locks: don't check hidden checkboxes on bulk select/deselect, props dh-shredder, see #23312

In 23312-5.patch​: when displaying the lock, uncheck the checkbox.

23312-6.patch: don't check the lock if the current user cannot edit the post.

In 23487:

Post locks: use heartbeat to dynamically update locked posts on the Posts screen, first run, see #23312

Perhaps we can optimize this a bit: merge inline-edit-post.js and the new edit-post.js. Both would need to work well when displaying CPTs.

In 23488:

Add edit-post.min.js for bumpbot's sake, see #23312

Replying to azaozz:

Perhaps we can optimize this a bit: merge inline-edit-post.js and the new edit-post.js. Both would need to work well when displaying CPTs.

Yes, makes sense.

23312-6.patch: don't check the lock if the current user cannot edit the post.

This made me wonder, if the user can see the post in the list (even if they cannot edit it) what is the harm in seeing current user activity?

This made me wonder, if the user can see the post in the list (even if they cannot edit it) what is the harm in seeing current user activity?

We were talking with @dh-shredder about that too. Maybe sites with a lot of authors and contributors wouldn't want editor and admin users activities to be visible to all, although don't think it's an "information leak".

Sliced New Lock Image - 2x (32x32)

Sliced New Lock Image (16x16)

Avatars on locked post list

Screenshot with new post lock icon + avater in list

Forgot to add a comment last night. Two things!

• New sliced lock icons from @empireoflight's original PSDs (lock.2.png​ & lock-2x.png​) added
• First pass lock_avatars.diff​ to add avatars to post list locks added. This currently does send the HTML for the avatar itself from get_avatar() through heartbeat. If we need to avoid that, can do so as well, although this method is significantly simpler.

You can see a screenshot with both​ attached above.

Edit: Right now, the avatar is sized to match the new revision sized ones, at 18x18. We can reduce to 16x16, if it's not important to match sizes there.

Align new icon and add CSS for 2x version.

In new_icon_css.diff​, add CSS for new icon, realign, and add lines to handle 2x version. Note that for this to work, you'll need to add the above lock.2.png (as lock.png) and lock-2x.png to your wp-admin/images directory.

In 23312-7.patch:

• Merged @dh-shredder's patches.
• Merged the new edit-post.js with inline-edit-post.js (no need for two JS files).
• Tweaked the size and position of the gravatars, the 18px were looking too small on a large monitor:

In 23681:

Post locks on the posts list screen: new icons for the lock, props empireoflight, show avatar for the user currently editing, props dh-shredder, see #23312

In 23725:

Post locks: add Preview button when post is locked, fix the suggested places, see #23312

Anything left here?