Integrate featured images with new media workflow

[koopersmith]

Fairly self-explanatory. I'd like featured images to be one of the first workflows integrated, as it is one of the simplest.

Attached is a patch that mirrors the current workflow (but does not remove/alter the code). It is certainly not perfect; I'd like to build up some methods to make a few of these tasks simpler. Moving forward, I also plan on adding a dropzone directly to the featured image metabox. This may turn out to be a common pattern (as we use a similar UI in the customizer), in which case we should consider abstracting it.

Related: #14762

I think a different Ajax endpoint is preferred due to the change in return values, but we'll probably want to keep the existing meta box, and simply replace the contents of post_thumbnail_meta_box(). This is mainly to keep consistency with a plugin that might replace or remove that box.

We might want to just do a ?return=json and keep the same endpoint.

21776.2.diff​ replaces the AJAX endpoint with code in edit_post(), as the thumbnail should update when the publish/update button is clicked (rather than instantly). It does not, however merge the meta box functions.

Marked #17100 and #12922 as duplicates, as 21776.2.diff​ would no longer save the thumbnail instantly, instead requiring a save.

Marked #14762 as a duplicate, as 21776.2.diff​ eliminates the ambiguity between choosing a featured image and inserting an image into a post.

In [21770]:

First pass at integrating featured images with the new media workflow.

Updates the featured image when the publish/update button is clicked (rather than instantly). Uses the existing post_thumbnail_meta_box() function. Does not remove the old featured image meta box JS, ajax handler, or CSS.

see #21776, #21390.

In [21771]:

Prevent JS events from being garbage collected when a media.view.Modal is re-rendered. see #21390, #21776.

Non-images should be filtered out when selecting a featured image: 21776.non-image.png​.

When adding a featured image with the current codebase, the lightbox appears, throws a JS error, then fails to let me do anything.

Uncaught ReferenceError: type is not defined
(anonymous function)
b.template.c load-scripts.php:423
_.extend.template load-scripts.php:466
e.view.Attachment.Backbone.View.extend.render load-scripts.php:468
e.view.Attachments.Backbone.View.extend.add load-scripts.php:468
e.view.Attachments.Backbone.View.extend.initialize.list load-scripts.php:468
g.Events.trigger load-scripts.php:435
f.extend._onModelEvent load-scripts.php:450
g.Events.trigger load-scripts.php:435
f.extend.add load-scripts.php:445
media.model.Attachments.Backbone.Collection.extend._mirrorAdd load-scripts.php:466
g.Events.trigger load-scripts.php:435
f.extend._onModelEvent load-scripts.php:450
g.Events.trigger load-scripts.php:435
f.extend.add load-scripts.php:445
f.extend.fetch.a.success load-scripts.php:449
p.Callbacks.k load-scripts.php:2
p.Callbacks.l.fireWith load-scripts.php:2
_.extend.ajax load-scripts.php:466
p.Callbacks.k load-scripts.php:2
p.Callbacks.l.fireWith load-scripts.php:2
y load-scripts.php:2
p.support.ajax.p.ajaxTransport.send.d load-scripts.php:2

Ignore previous error report. It seems to be resolved as of this morning.

In [22021]:

Media JS: Add support for filtering Attachment collections by mime type. see #21390, #21776, #21809.

In [22022]:

Limit the featured image workflow to images only.

Adds the ability to set the values used to instantiate both the Workflow's library and selection.
Renames the Workflows internal _pending variable to prevent conflicts with a similarly named internal Backbone.Model variable.

see #21390, #21776.

In [22044]:

Media JS: Move the modal box's title from being stored in the modal view to being stored as an attribute on the workflow. Update modal titles for both the post media and featured image workflows. see #21390, #21776.

See ​http://wordpress.org/support/topic/post-feature-image-bug-in-wordpress-35-beta-1

Featured images are attached to the post in 3.4, in trunk this behavior is gone.

If I understood it correctly, we are de-emphasising the post_parent field for attachments, in the sense that it now only keeps a record of which post you were on when you originally uploaded the image.

If the featured image is uploaded against that post, then it will be attached to the post. Otherwise, it won't be. Pretty sure that's the same behavior in 3.4 too.

Replying to ocean90:

See ​http://wordpress.org/support/topic/post-feature-image-bug-in-wordpress-35-beta-1

I can confirm this behaviour. It should be noted that selecting an _already uploaded_ image WILL correctly update the featured image.

In [22175]:

Media Modal: Only automatically select uploading attachments when in a workflow that supports multiple images.

Fixes a bug in featured images where uploading an image would force you to reopen the modal (as the modal would close on upload).

see #21390, #21776.

Does this ticket cover actually setting the Featured image from the modal after upload? After ​a post in the alpha/beta forum I realized this isn't currently possible.

In 22321:

Add a sidebar to the media modal.

• Adds wp.media.view.Sidebar, to aid in rendering the sidebar.
• Removes the directions from the Attachments view and shifts search into a separate view (wp.mce.view.Search) that can be relocated at will. This also serves to simplify the Attachments view by removing the nested list and $list parameters.
• Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog.

see #21390, #21776, #21808.

Current status in trunk looks like a minor regression from a couple days ago. A couple days ago (Monday?), when clicking "Choose a Featured Image" the button was initially labeled appropriately as "Set As Featured Image" -- however in current trunk, that button is no longer available -- it starts out as "Set as Featured Image".

Also -- as of Monday's trunk, when changing from "Upload Files" to "Media Library" and back, the button changed verbiage to "Insert into Post" -- rather than "Set as Featured Image".

In 22496:

Media: Update featured images to use the media frame. fixes #21776, see #21390.

Replying to georgestephanis:

Current status in trunk looks like a minor regression from a couple days ago. A couple days ago (Monday?), when clicking "Choose a Featured Image" the button was initially labeled appropriately as "Set As Featured Image" -- however in current trunk, that button is no longer available -- it starts out as "Set as Featured Image".

Also -- as of Monday's trunk, when changing from "Upload Files" to "Media Library" and back, the button changed verbiage to "Insert into Post" -- rather than "Set as Featured Image".

Yep, featured images got a little out of sync as we shifted around the pieces. Should be all set now.

Replying to DrewAPicture:

Does this ticket cover actually setting the Featured image from the modal after upload? After ​a post in the alpha/beta forum I realized this isn't currently possible.

It did, in a way — the original plan for 3.5 was to omit this feature entirely. I think 3.5 has evolved to the point where a "Featured Image" tab might feel at home the "Add Media" modal (as opposed to feeling jammed in, as it previously did). That said, this is something that will have to wait until 3.6 (and should move to a new ticket).

In 22500:

Media: Make "update featured image" button primary. see #21776, #21390.

In 22561:

Media: Activate the featured image toolbar when the media dialog is first opened. see #21390, #21776.

I think 3.5 has evolved to the point where a "Featured Image" tab might feel at home the "Add Media" modal (as opposed to feeling jammed in, as it previously did).

After quite a bit of feedback from the WordPress.com support forums, it seems the lack of a button here has put a severe cramp in many people's workflows. We should aim to work something in.

If there is anything we can do in the process to greatly simplify the JS in the post thumbnail meta box, that would be good, because plugins are inevitably going to copy it. Right now it has no semblance of being an API, unfortunately.

Related: #22636, restoring an old filter. Might be worth re-tying the rendering back into an ajax request like send-attachment-to-editor.

Based on wordpress.com feedback, it seems that almost no one notices the "Featured Image" metabox.

attachment:21776.6.diff​ enables the old featured images meta box, but rigs it up to a new featured image panel in the media modal.

It also:

• Converts the modal view to use the view manager, which means that a call to open() will automatically call render and attach if necessary.
• Doesn't automatically set a state in wp.media, to allow code to customize the states to be added before activation.

Testing 21776.6.diff:

Initially setting the featured image via both the main and featured image modals works as expected. Beyond that, there are a couple of problems.

• If you click the 'Remove Featured Image' link via the metabox, the image disappears (as expected) but that leaves the Featured Image metabox empty, e.g. the 'Set Featured image' link isn't restored.
• Once you've set the Featured image, clicking Add Media opens into the >Featured Image tab instead of >Upload Images
• If the featured image is already set, you can't always change it. Sometimes the image gets replaced with the new one in the metabox, sometimes the image disappears and the 'set' link is restored, sometimes nothing happens at all.

Note that this will also fix #22636.

Thanks, DrewAPicture, this is all very helpful.

Replying to DrewAPicture:

• If the featured image is already set, you can't always change it. Sometimes the image gets replaced with the new one in the metabox, sometimes the image disappears and the 'set' link is restored, sometimes nothing happens at all.

Can you elaborate on this point? Any JS errors? Can you isolate any actions that cause the featured image to always update successfully or always break?

Replying to koopersmith:

Replying to DrewAPicture:

• If the featured image is already set, you can't always change it. Sometimes the image gets replaced with the new one in the metabox, sometimes the image disappears and the 'set' link is restored, sometimes nothing happens at all.

Can you elaborate on this point? Any JS errors? Can you isolate any actions that cause the featured image to always update successfully or always break?

Per my revelation ​in IRC, seems like replacing the featured image via Add Media works as expected, replacing via clicking the already-set featured image in the metabox doesn't work.

I also noticed that if I click the "Remove featured image" link and attempt to set a new one via Add Media, it doesn't load anything in the metabox, but that may be related to the first bullet point in comment:40.

This patch should fix all 3 issues.

#22636 was marked as a duplicate.

refresh at r22973

Replying to koopersmith:

This patch should fix all 3 issues.

21776.7-refresh.diff fixes all three for me.

Thanks for the refresh. Looks good.

Noticed two issues testing 21776.7-refresh with QuickPress:

• Clicking Add Media, the 'Select Files' button is missing, a la ​http://cl.ly/image/3t1P461P3s1s . Switching tabs and back again shows the button.

• Once you've selected a featured image and clicked the 'Set Featured image' button, you're sent to wp-admin/index.php# which jumps you to the bottom of the page forcing you to scroll back up.

In 22979:

Bring Featured Images back into the main media dialog.

Most users don't realize that the Featured Image meta box exists; if they do, few use it.

Restores the old meta box UI, including the admin_post_thumbnail_html filter. If a plugin is using _wp_post_thumbnail_html() in conjunction with Thickbox elsewhere, it will also magically still work.

Specific underlying changes:

• Converts the modal view to use the view manager, which means that a call to open() will automatically call render and attach if necessary.
• Doesn't automatically set a state in wp.media, to allow code to customize the states to be added before activation.

props koopersmith.
fixes #21776.

Patch updates gallery editing to work with the modal changes. Also adds nice handling for default states.

21776.galleries.diff​ looks good.

In 22984:

Update gallery editing to work with the modal changes. Add nice handling for default states.

Props koopersmith
see #21776

In 23058:

Admin ajax: Roll back new-style error sending in set-post-thumbnail. The JS handlers know to parse an unrecognized response (like -1 or 0) as a failure. see #21776. see #22750.