Upload/Insert media revamp

[nacin]

Revamp the media uploading/inserting workflows in 3.5.

koopersmith will be spearheading this effort and will post tasks, ideas, mockups, etc. This is an initial ticket to focus as an umbrella and reference point.

Take the existing Thickbox upload/insert dialog and split it into discrete workflows, including:

• Uploading an image (or multiple images)
• Browsing the media library to look for an image or multiple images
• Inserting a single selected image into the post (includes caption, alignment, size, link, alt text)
• Creating a gallery based on a selection of images, and adding more images to an existing gallery
• Selecting a single image (as a header, background, or featured image)
• Editing/cropping an image

Additionally:

• Editing a single image via Media > Library will need some changes, as it relies on the Thickbox contents. see #21391
• TinyMCE should be more responsive to dealing with media and galleries, such as previewing them with thumbnails rather than just placeholder boxes, and opening image or gallery edit windows directly from TinyMCE.

More to come.

[nacin]

Additional related efforts:

• Improve EXIF handling (various tickets)
• Go through open tickets in the Media and Upload components
• Turn off ms-files.php by default - #19235
• ImageMagick support - #6821, also #18543
• Preserving transparency, #13461

[nacin]

Retina images in content? #21038

[tar.gz]

Here is an issue that I would love to see improved in 3.5:

1) When several files are uploaded in bulk, they should allways be ordered sequentially by their filename (001.jpg, 002.jpg, 003.jpg ...).

2) The order that is displayed during the upload process should remain the same after hitting "Save all changes".

See #21643 (Uploaded media should keep alphabetic order)

[koopersmith]

In [21656]:

Improve consistency in wp.Uploader callbacks; pass file objects to all handlers. see #21390.

[nacin]

In [21679]:

Introduce wp_send_json() to json-encode a variable, print it, and die, for Ajax requests. Effectively replaces WP_Ajax_Response, which was an XML-based response.

Introduce wp_send_json_success() and wp_send_json_error(), which will allow us to fire appropriate done() or fail() callbacks in JS.

props koopersmith. see #21390.

[nacin]

In [21680]:

Introduce wp_prepare_attachment_for_js(). Prepares an attachment post object to be JSON-encoded and fitted into an Attachment model, for 3.5 media.

props koopersmith. see #21390.

[nacin]

In [21681]:

Add get-attachment and query-attachments Ajax handlers. props koopersmith. see #21390.

[koopersmith]

In [21682]:

Fix a misnamed variable, which caused the query-attachments ajax handler to ignore all input. see #21390.

[koopersmith]

In [21683]:

Add new media workflow scripts, styles, and templates.

Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:

new wp.media.controller.Workflow().render().modal.open();

The Javascript is broken up into two files, with the slugs media-models and media-views.

• media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.

• media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...

To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':

wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );

see #21390.

[jamescollins]

In case anyone is trying to get [21683] working, you must have SCRIPT_DEBUG set to true, because [21683] includes empty .min files and bumpbot hasn't regenerated them.

[scribu]

did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(

I don't understand!

Also, how about moving the contents of wp_print_media_templates() into a separate file? We'll have quite a few of them, right?

[SergeyBiryukov]

Replying to scribu:

did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(

[21132], ​IRC chat.

[SergeyBiryukov]

I see the error in JS console on Edit Post screen:

Error: TypeError: attachments.on is not a function
Source File: http://trunk.wordpress/wp-includes/js/media-models.js?ver=3.5-alpha-21684
Line: 171

[scribu]

Thanks for the background links, Sergey.

I get the same error when trying to run new wp.media.controller.Workflow().render().modal.open();

[koopersmith]

Replying to SergeyBiryukov:

I see the error in JS console on Edit Post screen:

Error: TypeError: attachments.on is not a function
Source File: http://trunk.wordpress/wp-includes/js/media-models.js?ver=3.5-alpha-21684
Line: 171

Interesting, I'll take a look.

[koopersmith]

In [21689]:

Media JS: Attachments collection API improvements.

Rename watch() and unwatch() to observe() and unobserve(), respectively, to avoid conflicts with Firefox's proprietary Object.prototype.watch method.

Rename validate() to validator(), and changed() to validate(), as the latter will be more frequently used, and better explains its purpose. Also, make the new validate() more concise.

see #21390.

[koopersmith]

In [21691]:

Media: Use numeric timestamps instead of string-based timestamps when preparing an attachment for js.

We use the 'date' attribute to create Javascript Date objects. The Date() constructor has better cross-browser compatibility when numeric arguments are passed to the constructor.

see #21390.

[koopersmith]

In [21692]:

Add wp.media(), a function to create a default media workflow.

This will be the main entry point for basic media development, and should hopefully help less experienced developers wrangle the new media APIs.

If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:

wp.media();

Well, that certainly feels a lot nicer to type.

see #21390.

[scribu]

Yay, I can see the new thickbox content now.

[koopersmith]

Replying to scribu:

Also, how about moving the contents of wp_print_media_templates() into a separate file? We'll have quite a few of them, right?

I've thought about that. For the time being, I think we should leave them in media.php. If they become unwieldy, a new file is just an svn add away.

[koopersmith]

In [21769]:

Adds UI for media modal toolbars, buttons, and the selected item(s) status.

Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console:

wp.media({ multiple: true });

see #21390, #21808.

[koopersmith]

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.

[koopersmith]

In [21771]:

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

[koopersmith]

In [21772]:

Add checks for attachment metadata when formatting attachments for JS.

Prevents notices from causing malformed ajax responses.

see #21390.

[koopersmith]

In [21773]:

Media JS: Apply selection when Attachment models are initially rendered.

This allows us to automatically retain selections when the library context is changed (e.g. when searching. This changes the Attachment view's select() and deselect() methods so that they can be triggered directly.

see #21390.

[koopersmith]

In [21784]:

Use icons for non-image attachments in the new media modal. see #21836, #21390, #21808.

[koopersmith]

In [21785]:

Prevent img elements in the media modal from being draggable. see #21390.

Browsers natively support dragging img elements, which would then set off the drop zone in the modal. We disable this by setting the draggable attribute to false.

[koopersmith]

In [21786]:

Make browser text-selections ignore attachment views. see #21390.

[koopersmith]

Also see [21814] and #21868.

[koopersmith]

In [21820]:

Media JS: Add support for multiple views to the media workflow controller. see #21390.

[koopersmith]

In [21821]:

Media JS: When adding a view to a media workflow, add a shorthand for registering a view constructor with no options. see #21390.

[tw2113]

Was thinking it'd not be a bad idea to change the text of the Featured Image button, once there's an image chosen. Initially it says "choose a featured image" and it stays that way afterwards. I was thinking it'd make more sense to have it say "change featured image" after one is selected.

[scribu]

The media-views.css file is enqueued in the post editing screen (does it need to be?) and in it there's this code:

.attachment-thumbnail {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}

The attachment-thumbnail class is added to any call to wp_get_attachment_image(), so that CSS affects plugins that do things with attachments.

[koopersmith]

In [21898]:

Allow JS Attachments models to be searchable and sortable.

Moves wp.media.model.Query sorting and searching to the parent wp.media.model.Attachments.

Query parameters are stored in attachments.props, which is a Backbone.Model, and supports order ('ASC' or 'DESC'), orderby (any Attachment model property name), search (a search term), and query (a boolean value that ties the Attachments collection to the server).

wp.media.query( args ) now returns an Attachments set that is mapped to a Query collection instead of the Query collection itself. This allows you to change the query arguments by updating attachments.props instead of fetching the mirrored arguments, changing them, and passing them to wp.media.query() again.

fixes #21921, see #21390, #21809.

[alexvorn2]

please add filters everywhere is possible...

[alexvorn2]

and add the option to insert multiple images at once.

[alexvorn2]

I mean into the post, sorry but I can't edit the comments...

[koopersmith]

In [21901]:

Media JS: Improve signature for Workspace.add() to accept two arguments instead of an ambiguous object. see #21390, [21820], [21821].

[koopersmith]

In [21902]:

Media JS: Improve auto-add functionality in Workspace.render(). see #21390, [21901].

[koopersmith]

In [21906]:

The first inklings of a gallery management screen.

• Adds view.Workspace.Library and view.Workspace.Gallery as extensions of view.Workspace to implement the individual screens
• Shifts the toolbar logic that was library-specific from the generic Workspace view to Workspace.Library.
• Adds a toolbar to the Gallery view.
• 'Create a gallery' and 'Return to media library' buttons toggle between the two views.
• 'Insert gallery into post' closes the modal, but does not actually perform its namesake action.
• Note that elements can still be deselected in the gallery view. This will be fixed in a future commit.

Improvements to avoid over-eager event unbinding:

• Modal views now properly detach their contents before replacing them with a new element.
• Likewise, Workspace views detach their main content blocks when re-rendering the view.

To test the gallery workflow (which is incomplete), run the following in your browser's console:

wp.media({ multiple: true });

see #21809, #21390.

[koopersmith]

In [21907]:

Correct alignment of new buttons in media modal. see #21390.

[koopersmith]

In [21908]:

Media JS: Prevent infinite scroll events from being unbound when Attachments views are re-rendered. see #21390.

[koopersmith]

In [21909]:

Rename the attachment-thumbnail class in the media modal Attachment view to prevent conflicts with wp_get_attachment_image(). see #21390.

[koopersmith]

In [22012]:

First pass on TinyMCE attachment in-editor UI.

• Adds in-editor UI for image attachments. Most of this UI should be able to migrate to all images in a future commit.
• Removes the wpeditimage TinyMCE plugin from the default plugins array.
• Add wp.media.fit, a helper method to constrain dimensions based upon a maximum width and/or height.
• Add html attribute parsing and string generation utilities (currently stored in mce-views).
• Calling remove on a TinyMCE views now ensures that the the parent and references are removed as well.
• Fixes a bug where we weren't sending the full array of results to matches in wp.mce.view.

see #21390, #21812, #21813.

[koopersmith]

In [22013]:

Media JS: Use correct reference to search term in the Attachments model search filter. see #21390.

[koopersmith]

In [22021]:

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

[koopersmith]

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.

[koopersmith]

In [22023]:

Remove internal TinyMCE attributes when generating the HTML for attachment views.

Moves the HTML utility functions to the top of mce-views.js. Also adds wp.mce.view.removeInternalAttrs( attrs ) and wp.mce.view.attrs( content ).

see #21390, #21812, #21813.

[koopersmith]

In [22027]:

Media JS: Improve UX for which buttons show when inserting media into a post.

'Insert into post' is the primary action when either one item is selected, or any number of non-image items are selected. If multiple images are selected, 'Insert into post' becomes secondary, and 'Create a new gallery' takes the primary spot.

Adds a method to get Button views from the Toolbar. Adds a model for certain button attributes to allow size, style, and text to be easily changed.

see #21390, #21808, #21809.

[koopersmith]

In [22029]:

Apply localized strings to media modal. see #21390, #21808.

[koopersmith]

In [22036]:

BUTTON.

Add a "Beta Media" button to the post editor. Currently, it is only capable of inserting images. Other attachment types and galleries need not apply... yet.

• Added wp.media.string.image( attachment, props ) for generating an image as a string from an attachment and relevant attachment display properties.
• Properly localized the gallery workflow.
• Added Workflow.update(), which closes the modal, triggers an update event, and resets the selection.
• Added wp.mce.media to manage the various media workflows for editors.

see #21813, #21814, #21390.

[koopersmith]

In [22040]:

Automatically add any uploading media files to the group of selected files.

This also automatically adds any files uploaded on the gallery screen to that gallery.

see #21390.

[koopersmith]

In [22041]:

When uploading files through the Plupload bridge, attempt to detect images on upload. see #21390.

[koopersmith]

In [22043]:

Use the attachment id to look up the mime type icon instead of the raw mime type string, as wp_mime_type_icon() runs a broader search when using an id. see #21390.

[koopersmith]

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.

[koopersmith]

In [22045]:

Media JS: Give the master Workspace view control over which Attachment view it uses. see #21390, #21807, #21809.

[koopersmith]

In [22046]:

Media JS: Use a custom Attachment views for both the media library and gallery screens.

To do so, the Attachment view code had to be shifted above the Workspace view code to ensure the subview is defined (preventing errors).

Also corrects an error in wp.media.view.Attachments.add where it was still using the default Attachment view.

see #21390, #21809.

[koopersmith]

In [22053]:

Add quick insert buttons to attachment views in the library and remove buttons to attachment views in the gallery editor. see #21390, #21809.

[koopersmith]

In [22073]:

Move wp_max_upload_size and dependencies to wp-includes. props johnjamesjacoby. see #21390, fixes #21867.

[koopersmith]

In [22101]:

Allow galleries to be reordered by drag and drop.

An Attachments view now accepts a sortable property. Manual sorting is only enabled when the corresponding collection doesn't have a comparator.

jQuery UI sortable must be enqueued for sorting to work.

see #21390, #21809.

[alexvorn2]

I noticed the modifications of uploading new images and so on, It is really cool but a lot of bugs, like:

• In the post edit page -> feature image: after you click upload an image, the window disappears... and you need click again and to select the image.

• When selecting multiple images for inserting, the images are inserted as a gallery, with thumbnails 150x150 pixels, what if a user just what to not to insert a gallery, just multiple full size images.

uploading doesn't seems faster, for me it took exactly! 29 seconds for new and old upload form for a small list of images.

I know that this feature is like in alpha mode but like at the moment the thing look worse that it was...

[koopersmith]

Replying to alexvorn2:

I noticed the modifications of uploading new images and so on, It is really cool but a lot of bugs...

Hi Alex, thanks for the feedback.

---

In the post edit page -> feature image: after you click upload an image, the window disappears... and you need click again and to select the image.

This is a bug and will be addressed before 3.5 is released. The window is disappearing because we auto-select uploading attachments (even before they've been sent to the server). The featured images UI responds to selections by closing the modal. We need to add an inline upload progress indicator once the featured images modal has closed.

---

When selecting multiple images for inserting, the images are inserted as a gallery, with thumbnails 150x150 pixels, what if a user just what to not to insert a gallery, just multiple full size images.

I'm not sure what the question is here. Currently when multiple images are selected, two buttons are visible — "Create a new gallery", which takes you to the gallery management page (and is not fully functional yet) and "Insert into post", which inserts multiple images at whatever was the last image size you selected.

---

uploading doesn't seems faster, for me it took exactly! 29 seconds for new and old upload form for a small list of images.

Behind the scenes, uploading is currently the same. Hopefully we'll gain a few optimizations before 3.5 is released.

---

I know that this feature is like in alpha mode but like at the moment the thing look worse that it was...

I'm sorry to hear it! Hopefully you'll be happier with subsequent releases as development progresses.

[alexvorn2]

Replying to koopersmith:

Replying to alexvorn2:

uploading doesn't seems faster, for me it took exactly! 29 seconds for new and old upload form for a small list of images.

Behind the scenes, uploading is currently the same. Hopefully we'll gain a few optimizations before 3.5 is released.

why just not try to upload more images at once? like 4 or 5...

[koopersmith]

In [22102]:

MCE Views: Use default shortcode properties when the shortcode parameter is set.

Prevents devs from having to manually extend the default shortcode property object.

see #21390, #21812.

[husobj]

Replying to koopersmith

"...which inserts multiple images at whatever was the last image size you selected."

Where do you select that image size?

[koopersmith]

Replying to alexvorn2:

why just not try to upload more images at once? like 4 or 5...

We already have support for uploading multiple images. Generally, the number of requests is not the bottleneck; the issue is the time it takes to process each image.

[koopersmith]

Replying to husobj:

Replying to koopersmith

"...which inserts multiple images at whatever was the last image size you selected."

Where do you select that image size?

This hasn't been added to the new media UI yet, but is available when inserting images using the 3.4 modal.

[husobj]

Replying to koopersmith:

Replying to husobj:

Replying to koopersmith

"...which inserts multiple images at whatever was the last image size you selected."

Where do you select that image size?

This hasn't been added to the new media UI yet, but is available when inserting images using the 3.4 modal.

I understand it's still work-in-progress. Looking good!

[koopersmith]

In [22120]:

Use the new media modal to insert galleries into TinyMCE and the text editor.

Galleries

• Gallery insertion from the new media modal (into TinyMCE, the text editor, etc).
• Gallery previews in TinyMCE now use the wp.mce.views API.
• Disables the TinyMCE wpgallery plugin.
• Gallery previews consist of the first image of the gallery and the appearance of a stack. This will later be fleshed out to include more images/functionality (including editing the gallery, gallery properties, and showing the number of images in the gallery).
• Multiple galleries can be added to a single post.
• The gallery MCE view provides a bridge between the wp.shortcode and Attachments representation of a gallery, which allows the existing collection to persist when a gallery is initially created (preventing a request to the server for the query).

Shortcodes

• Renames wp.shortcode.Match to wp.shortcode to better expose the shortcode constructor.
• The wp.shortcode constructor now accepts an object of options instead of a wp.shortcode.regexp() match.
• A wp.shortcode instance can be created from a wp.shortcode.regexp() match by calling wp.shortcode.fromMatch( match ).
• Adds wp.shortcode.string(), which takes a set of shortcode parameters and converts them into a string.* Renames wp.shortcode.prototype.text() to wp.shortcode.prototype.string().
• Adds an additional capture group to wp.shortcode.regexp() that records whether or not the shortcode has a closing tag. This allows us to improve the accuracy of the syntax used when transforming a shortcode object back into a string.

Media Models

• Prevents media Query models from observing the central Attachments.all object when query args without corresponding filters are set (otherwise, queries quickly amass false positives).
• Adds post__in, post__not_in, and post_parent as acceptable JS attachment Query args.
• Attachments.more() always returns a $.promise object.

see #21390, #21809, #21812, #21815, #21817.

[duck_]

Replying to koopersmith:

• Prevents media Query models from observing the central Attachments.all object when query args without corresponding filters are set (otherwise, queries quickly amass false positives).

This seems to have stopped images being displayed in the modal once they upload:

1. Upload image
2. It is not shown under "Select one or more media files:", but you can see it was selected automatically

It looks like passing allowed to difference() in media-models.js was lost, see the attached patch.

[koopersmith]

In [22137]:

Better thumbnail previews in the image editor.

• Images are auto-cropped, then fit to the preview on hover (with a slight delay). This is an experiment; we'll see how it turns out.
• Various style changes.

see #21390.

[koopersmith]

In [22138]:

Remove the attachment quick-insert button from the media modal. see #21390.

[koopersmith]

In [22139]:

On second thought, we're going to need the library-specific attachment view. see #21390, [22138].

[koopersmith]

In [22141]:

Change the cursor to a pointer when hovering above an attachment in the media modal. see #21390.

[koopersmith]

In [22142]:

Increase the delay on the attachment zooming in the media modal. see #21390.

[koopersmith]

In [22143]:

Improve JavaScript object formatting. see #21390.

[koopersmith]

In [22144]:

Improve media modal title bar styling. props helenyhou, see #21390.

[koopersmith]

In [22145]:

Media modal search box style updates. props helenyhou, see #21390.

[duck_]

In [22149]:

Remove allowed query args before checking isEmpty() in Query model. See #21390.

[koopersmith]

In [22154]:

Improve styling and markup for gallery and attachment MCE views.

Attachment views can now inherit from the theme's editor-style.css — just have any rules that apply to the img tag apply to .editor-attachment as well.

Adds a non-functional edit button to gallery views.

see #21390, #21813, #21815.

[koopersmith]

In [22155]:

Gallery editing in the media modal.

The edit button on gallery MCE views will open a new instance of the media modal. Images can be removed, uploaded, and reordered. However, the "Add images from media library" button is not yet functional.

see #21390, #21809, #21815.

[koopersmith]

In [22156]:

Reset the media modal to the library view after inserting a gallery. fixes #22151, see #21390, #21809.

[koopersmith]

In [22158]:

Media JS: Improve markup and CSS of the modal view's title.

Also improves the accuracy of closing the modal when the backdrop is clicked (which became error-prone around the title bar in [22144]).

see #21390.

[koopersmith]

In [22159]:

Show filenames for non-image attachments in the new media modal.

Also passes all attachment model attributes to the attachment view template by default (instead of selecting specific values).

see #21390, #21836.

[koopersmith]

In [22160]:

Media JS: Ensure the subtype key has a default set.

Prevents undefined JS errors in the attachments view template.

see #21390.

[koopersmith]

In [22161]:

Media JS: More default Attachments view template values. see #21390.

[koopersmith]

In [22162]:

Add a class to the TinyMCE view end marker.

Certain TinyMCE plugins scan for all spans in the document and remove any that do not have classes (or a handful of other attributes). This is quite aggressive, and breaks the regex used to scan for MCE views when transforming them back to plain text. Adding a class ensures that any plugins that do so will not break MCE views.

see #21812, #21390.

[koopersmith]

In [22170]:

Correctly insert non-image attachments as links.

• Adds wp.media.string.link( attachment ) for printing attachment links.
• Adds the link attribute to Attachment models that corresponds to the link to the attachment post.

see #21390, #21836.

[koopersmith]

In [22173]:

Caption editing in the media modal library.

• Adds a describe option to the workflow controller to support inline caption editing.
• For images, descriptions are mapped to the caption attribute.
• For other media items, descriptions are mapped to the title attribute.
• Descriptions are saved when the textarea's change event fires (i.e. when the textarea is blurred).

fixes #21807, see #21390.

[koopersmith]

In [22174]:

Add caption and title default values for the attachment view template. see #21390, #21807.

[koopersmith]

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.

[koopersmith]

In [22176]:

Media Modal: Show progress bars for uploading images, and adjust progress bar styles to compensate for the darker attachment background. see #21390.

[koopersmith]

In [22177]:

Media Modal: Remove unused CSS. see #21390.

[koopersmith]

In [22178]:

Media Modal: Reduce height on the attachment captions from three lines to two. see #21390, #21807.

[koopersmith]

In [22179]:

Media Modal: Increase delay of attachment zoom. see #21390.

[koopersmith]

In [22180]:

Media Modal: Remove the outline from the modal's close button. props lessbloat, see #21390.

[koopersmith]

In [22183]:

Media Modal: Attachments on the gallery page now inherit general events with the exception of click-to-select. see #21390.

[koopersmith]

In [22184]:

Media Modal: Improve attachment remove button styles. see #21390.

[koopersmith]

In [22200]:

Media Modal: Check for empty keys when saving attachment captions. see #21390, #21807.

[koopersmith]

In [22208]:

MCE Views: Add selection/deselection when a view is clicked.

These methods should be expanded to prevent content from being inserted into the view by blocking and rerouting keystrokes as appropriate as well as repositioning the caret before content is inserted.

see #21390, #21812, #21813, #21815.

[koopersmith]

In [22210]:

MCE Views: First pass at keystroke and insertion handling.

• When a MCE view is selected, normal keystrokes (those without command/control) are blocked.
• Backspace/delete will successfully remove the view.
• Arrow handling will be added at a later point.
• When a MCE view is selected and content is pasted or injected (e.g. when an attachment is added), the content is added to the first text node after the view. If the view is at the end of the document or the next element is another view, a text node is injected into the DOM immediately after the selected view.

see #21390, #21812, #21813, #21815.

[koopersmith]

In [22212]:

Add a nonce to wp_ajax_save_attachment. see #21390, #21807.

[koopersmith]

In [22219]:

MCE Views: Add alignment styles for generic views.

Adds alignnone, aligncenter, alignleft, and alignright by default.

see #21390, #21812, #21813.

[koopersmith]

In [22220]:

Properly align MCE attachment views.

• Adds a $wrapper property to MCE views to allow them to manipulate the wrapper on render. This should be used sparingly — only for layout changes that cannot be accomplished through altering the wrapper's children — and likely only for adding/removing classes.
• Uses wp.html.string() in wp.mce.view.toView().

see #21390, #21812, #21813.

[koopersmith]

In [22221]:

Display gallery and attachment MCE views as inline blocks. Make gallery MCE view wrappers block level. see #21390, #21813, #21815.

[johnbillion]

There are some issues with media items in the editor at the moment:

1. After inserting media into the post, it becomes impossible to continue editing the post.
2. After left/center/right aligning an image and then un-aligning it again the image remains aligned in the visual editor although the left/center/right align CSS classes are removed from it.
3. The left/center/right alignment buttons in the toolbar don't get an active state when aligning images.

All of the above may have been caused by changes in [22219], [22220] or [22221], but I'm not sure.

[Ipstenu]

On one of my sites (ipstenu.org) I'm running into an issue with the uploader just hanging.

I tested on a clean install and it works, so I'm sure it's got to be a plugin, but turning on all my plugins on the clean install did not reproduce the issue. There are no errors in my PHP error log and nothing pops up with debug on. I thought it was from w3tc, but when I installed that, nothing happened. I made the two as near a replica as possible.

It just hangs like this: ​http://cl.ly/image/0A2H0I173P0x

The only real difference between the sites is one is .htaccess and the other nginx.

[Ipstenu]

FML, fixed by turning on SUexec on my PHP config. That said, we should have an actually error vs just hanging like a guppy.

[koopersmith]

In [22242]:

Add button groups. see #21598, #21390.

[koopersmith]

In [22245]:

Add a down arrow button. see #21598, #21390, #21813.

[billerickson]

When 3.5 comes out, will we have more image meta than just the description?

I often add additional fields to the media uploader ( ​http://www.billerickson.net/wordpress-add-custom-fields-media-gallery/ ). Before 3.5 comes out, I wanted to test if these would be visible in the new interface, and if not, what I need to do to make them visible.

But it doesn't look like there's an area yet for image meta. You're not able to select image alignment, link URL... Are these on the to-do list, or are they being excluded from the new media uploader?

[koopersmith]

In [22247]:

Add attachment display settings to the media modal.

• Add a media view for button groups.
• Add button dropdown containers.
• Add a dropdown property to the button media model.

fixes #22206, #21814, see #21390, #21813, #21598.

[tar.gz]

Currently in [22252] all image files I upload remain "unattached", they aren't linked to the post they were uploaded into. If we link them through the Media Library, there is no visible indication in the uploader window about which images are attached, and which are just part of the global library.

Is this going to change, or do we face a radical break with the way the image management was working?

In the latter case, I see a big issue for "smart" portfolio themes that automatically create galleries from the image files attached to a post.

Also, we would lose the convenience of simply uploading a gazillion of images and clicking the "insert gallery" button, which used to create a [gallery] tag. Currently with the new uploader we have to toggle each single image - that's a gazillion of clicks vs 1 click for the same operation.

Other questions:

• Will drag-and-drop re-ordering in the uploader window be possible?
• Same question as billerickson above: what about the title/description metadata? Can it be modified from the uploader, or only through the Media Library?

[deltafactory]

Noticing the same thing as @tar.gz. Had assumed main UI development was still underway so it wasn't addressed yet.

[helenyhou]

Replying to tar.gz:

Currently in [22252] all image files I upload remain "unattached", they aren't linked to the post they were uploaded into.

#22085

[deltafactory]

Noticing that wp_plupload_default_settings() is called twice in /wp-admin/post.php

• /wp-admin/edit-form-advanced.php, line 23 and
• /wp-includes/media.php, line 388 in media_buttons()

Not sure if there's an easy way to consolidate these calls into one through a hook or script enqueue, similar to add_thickbox().

[husobj]

Replying to billerickson:

When 3.5 comes out, will we have more image meta than just the description?
...it doesn't look like there's an area yet for image meta.

+1 to billerickson's question about image meta - I can't remember seeing any discussion/visuals about this but I've only been checking in to see what's happening with the media revamp occasionally.

Things like editing the title/alt description for an image are important for accessibility and it makes sense to allow people to do this at the point of uploading an image (otherwise people tend to forget). Are those fields going to be editable via the upload window?

[cliffpaulick]

I really like 3.5's improved uploader/organizer, but I'd like to see a post-independent 'gallery manager' sort of tab under Media menu. This would serve for creating custom galleries and inserting them into any/multiple post(s). Additionally the same attachment ID (e.g. /wp-content/uploads/picture.jpg) could include the Media manager's default title, alt, and caption attributes or, within each gallery, these 3 attributes could be customized while still serving the same picture.jpg. It'd be good to detect which posts each gallery is inserted into as well (so you don't edit/delete a gallery that is still in use somewhere you didn't expect).

Thanks for all your hard work. Hope my suggestions help.

[koopersmith]

In [22267]:

Correctly assign post_parent to attachments uploaded in the new media modal. fixes #22085, see #21390.

[koopersmith]

In 22320:

Give media a heart transplant.

Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the Frame, which is a hybrid view and state machine.

The state machine is a collection of states, which are just generic instances of Backbone.Model. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships).

The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events.

This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view).

Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch.

Adds events to detect dragging changes in wp.Uploader and adds methods to detect and leverage browser support for CSS3 transitions.

see #21390, #21809.

[koopersmith]

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.

[koopersmith]

In 22322:

Add inline uploader UI to media modal sidebar. see #21390.

[koopersmith]

In 22323:

Add attachment details to the media sidebar.

• Also moves most of the Frame view's createSelection method to a real Selection model (which inherits from the Attachments model).
• Properly assigns the library within the Gallery state, allowing for the Gallery state to inherit from the Library state.

see #21390.

[koopersmith]

In 22324:

Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390.

[koopersmith]

In 22325:

Improve attachment detailed preview styling. see #21390.

[koopersmith]

In 22332:

Improve selection UI/behavior in the media modal.

• Moves handling which models are in the selection into the Library state.
• Adds highlight for the last-selected view in a multi-view state.
• A view must be the last-selected view before it can be deselected.

see #21390.

[koopersmith]

In 22333:

Media JS: Remove unused Attachment view events. see #21390.

[koopersmith]

In 22335:

Media JS: Improve handling of single attachments in selections.

• Adds wp.media.model.Selection.single() to specify a single item used in a multi-item selection.
• Fixes a bug where the details class would not be removed when "Clear Selection" was clicked.

see #21390.

[koopersmith]

In 22336:

Media CSS: Remove inner shadow when attachment is selected. see #21390.

[koopersmith]

In 22337:

Media JS: Properly build detail views when the selection's single model changes. see #21390.

[koopersmith]

In 22338:

Media JS: Properly fire the Attachment view details method on render. see #21390.

[koopersmith]

In 22339:

Media JS: Several improvements to the Attachment views.

• Bind Attachment details updates to the Attachments initialize method.
• Improve Attachment view unbinding.
• Re-render Attachment views when titles and captions are updated.

see #21390.

[azaozz]

#19389 was marked as a duplicate.

[tar.gz]

I just wrote a summary of things that, in my eyes, are currently still missing from the awesome new uploader: ​http://ms-studio.net/notes/on-the-wordpress-3-5-media-uploader/

The main feature requests:

• Provide a view of the "default gallery", showing only the attached images (not the full media library). This "default gallery" view should also allow re-ordering.
• Allow single-click re-ordering for galleries. Allow us to display the title when needed (can be useful for re-ordering). Allow us to set a smaller preview size (useful when working with large galleries).
• Allow us to display the file metadata we need (title, description, alt-text), and let us edit it.

[koopersmith]

In 22340:

Add gallery settings to the media modal.

• Abstracts wp.media.view.AttachmentDisplaySettings into wp.media.view.Settings for managing lists of settings with button groups and select boxes. Settings can optionally be tied to a user setting (i.e. using getUserSetting).
• Adds wp.media.view.Settings.AttachmentDisplay.
• Adds wp.media.view.Settings.Gallery.

see #21390, #21815.

[koopersmith]

In 22341:

Make gallery columns fallback a string, as the accepted values are strings. see #21390.

[koopersmith]

In 22342:

Remove dead gallery settings code. see #21390.

[koopersmith]

In 22343:

Fix positioning of attachment thumbnail overlays.

Prevents the overlay from blocking buttons inside the attachment preview, such as the remove button in the gallery editor.

see #21390.

[koopersmith]

In 22344:

Media JS: When editing a gallery, prevent attachments from being selected as they are removed. see #21390.

[koopersmith]

In 22345:

Media: Reduce button size for the link gallery setting. see #21390.

[koopersmith]

In 22348:

Media: Update gallery editing to work with the new frame view. see #21390.

[koopersmith]

In 22356:

Media: Update the gallery "add images" state. see #21390.

[koopersmith]

In 22362:

Streamlining media, part I.

The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.

This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.

The fine print follows.

---

Styles

• Tightened padding around the modal to optimize for a smaller default screen size.
• Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated upload state).
• Add a size for hero buttons.
• Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).

---

Code

wp.media.controller.StateManager

• Don't fire activate and deactivate if attempting to switch to the current state.

wp.media.controller.State

• Add a base state class to bind default methods (as not all states will inherit from the Library state).
• On activate, fire activate(), menu(), content(), sidebar(), and toolbar().
• The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's menu attribute.
• menu() automatically fetches the state's menu attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's id.

wp.media.controller.Library

• Now inherits from wp.media.controller.State.

wp.media.controller.Upload

• A new state to improve the upload experience.
• Displays a large dropzone when empty (a UploaderInline view).
• When attachments are uploaded, displays management interface (a library state restricted to attachments uploaded during the current session).

wp.media.view.Frame

• In menu(), content(), sidebar(), and toolbar(), only change the view if it differs from the current view. Also, ensure hide-* classes are properly removed.

*

wp.media.view.PriorityList

• A new container view used to sort and render child views by the priority property.
• Used by wp.media.view.Sidebar and wp.media.view.Menu.
• Next step: Use two instances to power wp.media.view.Toolbar.

wp.media.view.Menu and wp.media.view.MenuItem

• A new PriorityList view that renders a list of views used to switch between states.
• MenuItem instances have id attributes that are tied directly to states.
• Separators can be added as plain Backbone.View instances with the separator class.
• Supports any type of Backbone.View.

media.view.Menu.Landing

• The landing menu for the 'insert media' workflow.
• Includes an inactive link to an "Embed from URL" state.
• Next steps: only use in select cases to allot for other workflows (such as featured images).

wp.media.view.AttachmentsBrowser

• A container to render an Attachments view with accompanying UI controls (similar to what the Attachments view was when it contained the $list property).
• Currently only renders a Search view as a control.
• Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.

wp.media.view.Attachments

• If the Attachments scroll buffer is not filled with Attachment views, continue loading more attachments.
• Use this.model instead of this.controller.state() to allow Attachments views to have differing edge and gutter properties.
• Add edge(), a method used to calculate the optimal dimensions for an attachment based on the current width of the Attachments container element.
• edge() is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
• Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.

wp.media.view.UploaderWindow

• Now generates a $browser element as the browse button (instead of a full UploaderInline view). Using a portable browse button prevents us from having to create a new wp.Uploader instance every time we want access to a browse button.

wp.media.view.UploaderInline

• No longer directly linked to the UploaderWindow view or its wp.Uploader instance.
• Used as the default upload state view.

wp.media.view.Selection

• An interactive representation of the selected Attachments.
• Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of SelectionPreview.

---

see #21390.

[koopersmith]

In 22363:

Media: Show an inline uploader when the media library is empty.

Merges most of wp.media.controller.Upload into wp.media.controller.Library, so we always create an inline uploader instead of an attachments browser if the state's library is empty.

props rzen, fixes #22323, see #21390.

[alexvorn2]

I updated to the last version, and it does not work at all...

[ethitter]

Replying to alexvorn2:

I updated to the last version, and it does not work at all...

Add define( 'SCRIPT_DEBUG', true ); to your wp-config.php and the problem is resolved for now.

Seems the bot that creates the compressed versions of scripts hasn't run since some change was made, causing this error which appears to originate in Underscore.js according to Chrome:

Uncaught TypeError: Cannot call method 'replace' of undefined

[koopersmith]

In 22397:

Media JS: Move state-related logic from sidebar views to the state controllers. see #21390.

[koopersmith]

In 22415:

Use Mustache-insipired template tags.

Underscore's default ERB-style templates are incompatible with PHP when asp_tags is enabled. As a result, we've settled on an alternative syntax that should be familiar to devs: Mustache-inspired for interpolating and escaping content, and ERB-inspired for execution.

{{{a}}} - interpolating
{{ a }} - escaping
<# a #> - execution

props rmccue. fixes #22344, see #21390.

[koopersmith]

In 22437:

Media: Integrate the gallery workflow with the media menu.

wp.media.model.Query.more()

• If a request has already been sent out for more attachments, return that request object instead of creating another.

wp.media.controller.Region

• A region allows views to be swapped in and out of a section of the page without either view having to know about the other.
• Application components can use the same callbacks and resources by leveraging Region.mode(), which triggers a set of callbacks to create or transform the current view, but only if necessary.

wp.media.view.Frame

• Leverage Region controllers instead of forcing states to swap view objects, which causes states to fit more comfortably in the controller-camp.
• Add previous(), a method to fetch the previous state id.
• Separate out the default settings over several objects (so blank frames can be instantiated).

wp.media.view.MediaFrame

• The base Frame used for media management: handles integration with the Modal and UploaderWindow views.

wp.media.view.MediaFrame.Post

• Includes all default media states and callbacks necessary for inserting media into a post.

see #21390.

[koopersmith]

In 22454:

Media: Improve memory management of views, events, and DOM nodes. see #21390.

[tar.gz]

A few quick observations - let me know if I should open tickets for those, or continue reporting here.

(1) Inserting gallery when cursor isn't in the editing field fails silently.

If we launch the Beta Media UI when the cursor isn't inside the post editor field, creating and inserting a gallery will have no effect at all. Nothing is inserted.

The behavior with the old uploader: the gallery gets appended at the end of the post.

We should either display some warning, or keep the old behavior.

(2) Invisible modifications occur in post content

When there is a [gallery] shortcode in the post content, it's impossible to leave the editor page without a "Are you sure? This page is asking you... to confirm" pop-up message. This happens even if the user has introduced no changes to the content.

• This occurs only in the "Visual" editor, not in "Text" mode.
• This occurs only with gallery shortcodes in the post content.

(3) Line return modifications occur when switching from "Text" to "Visual"

Example 1:

• Create a new post with the editor in "Text" mode.
• Insert a gallery. The gallery shortcode will be on the first line. It's the only content of the post.
• Enter into "Visual" mode. You will notice an empty line at the top. It's impossible to remove it in the visual editor.
• Go back to "Text" mode. You can observe that a   has been inserted on the first line.
• When the post is rendered on the front-end, this will result in a <p>&nbsp;</p> on the first line.

Example 2:

Enter the following into the "Text" editor:

some paragraph

[gallery link="post" columns="3" ids="287,286"]

another paragraph

Switch to "Visual". The result:

some paragraph

[gallery link="post" columns="3" ids="287,286"]another paragraph

[koopersmith]

In 22466:

Media: Improve sidebar handling and make attachment display properties attachment-specific.

wp.mce.media

• Watch all workflows for the insert event and attempt to insert the current state's selection if it exists.
• Fetch and pass attachment display properties through to wp.media.string.image().

wp.media.controller.Region

• Separate the concept of events and modes.
• All events triggered on a Region trigger both event and event:mode callbacks.
• When a mode is deactivated, deactivate and deactivate:mode events are fired.
• When a mode is activated, activate and activate:mode events are fired.

wp.media.controller.Library

• Remove the details(), buildDetails(), and clearDetails() methods that juggled sidebar views. Instead, handle the sidebar views using modes.

wp.media.controller.Gallery

• Shift the overloaded sidebar() method to use modes.

wp.media.view.MediaFrame.Post

• Declare activate:mode event bindings using an nested object to reduce repetition.
• Update sidebar activation callbacks.

wp.media.view.Settings

• Refactor to leverage HTML data attributes and implicit values (instead of setting the fallback whenever an object was created). This has the additional benefit that gallery shortcode parameters are not output when the user has left them set to the default.

see #21390.

[koopersmith]

In 22467:

Media JS: Add media.model.Composite, to aid in the representation of joint views. see #21390.

[azaozz]

Replying to tar.gz:

A few quick observations - let me know if I should open tickets for those, or continue reporting here.

Been looking at these (and other) irregularities for some time, patches coming up soon.

(1) Inserting gallery when cursor isn't in the editing field fails silently.

Thinking the previous behaviour is the correct one: adding the gallery at the end of the content.

(2) Invisible modifications occur in post content

There is already a ticket for that #22266.

(3) Line return modifications occur when switching from "Text" to "Visual"

This one should be fixed together with the fix for placing the caret before/after the view wrapper, #22257.

[koopersmith]

In 22477:

Media JS: Add JIT composite library creation/destruction to states to allow for dynamically excluded Attachment models. see #21390.

[koopersmith]

In 22480:

Media: Add batch insertion workflow. see #21390.

[koopersmith]

In 22482:

Media: In the main media library in the insert media dialog, only show attachment display settings when one attachment is selected. see #21390.

[koopersmith]

In 22485:

Media: Rename the "Beta Media" button to "Add Media". fixes #19956, see #21390.

[koopersmith]

In 22487:

Media: Ensure search box reflects actual search state.

• Also switches search box to use <input type="search" /> to take advantage of browser UI to clear the field.

fixes #22315, see #21390.

[koopersmith]

In 22489:

Media: Add wp_enqueue_media to easily include all media dependencies.

Also, media templates now print on wp_footer.

props sushkov. fixes #22060, see #21390.

[koopersmith]

In 22490:

Media: Ensure media and its dependencies are included when a post type supports the editor or featured images. see #21390.

[koopersmith]

In 22493:

Media: Add size dropdown to attachment display settings in the media modal. fixes #22206, see #21390.

[koopersmith]

In 22494:

Media: Add a basic starting frame for upload/library selection.

media.view.MediaFrame.Select is a frame class with a handful of sensible defaults to handle selecting and uploading items in the media library.

see #21390.

[koopersmith]

In 22495:

Media JS: Use basic upload/library by default.

wp.media now recognizes the frame attribute (currently a string; either'select' or 'post') and defaults to using a basic select frame. It also checks for the existence of classes in a safer fashion, as it does not assume the MediaFrame property exists.

see #21390.

[koopersmith]

In 22496:

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

[koopersmith]

In 22499:

Media: Output correct link html when inserting attachments. see #21390.

[koopersmith]

In 22500:

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

[koopersmith]

In 22501:

Media JS: Only block button events by default if the button does not link to anything. see #21390.

[koopersmith]

In 22502:

Integrate media with the custom background page. fixes #21818, see #21390.

[koopersmith]

In 22503:

Custom Background: Remove dead code for thickbox. see #21818, #21390.

[koopersmith]

In 22505:

Integrate media with the custom header page. fixes #21820, see #21390.

[koopersmith]

In 22506:

Media: Correctly set the edit gallery's library. see #21390.

[koopersmith]

In 22507:

Media: When printing a gallery shortcode, hide the implicit orderby value. see #21390.

[koopersmith]

In 22508:

Media: Keep track of gallery display properties in a separate model instead of mixed in with the query parameters. This allows for arbitrary gallery arguments and a more flexible data structure. see #21390.

[koopersmith]

In 22509:

Media JS: Pass the region instance through when firing the activate and deactivate events. see #21390.

[koopersmith]

In 22523:

Media: Backwards compatibility for media_upload_tabs.

• Adds createIframeStates() to the MediaFrame view. It creates states and bindings for the media_upload_tabs output, and is included on MediaFrame.Post by default.
• Hijacks tb_remove() when the media modal is open to ensure the modal closes correctly.
• Adds a chromeless parameter to thickbox media tab URLs to render the UI without the old row of tabs.

see #22186, #21390.

[koopersmith]

In 22528:

Media: Keep the selected featured image in the media modal in sync with the page. fixes #22404, see #21390.

[koopersmith]

In 22529:

Media: Add instructions to drag and drop to reorder images on gallery and batch edit pages.

Removes search boxes from these pages as well.

see #21390.

[koopersmith]

In 22530:

Media: Account for a race condition when deleting an edit gallery frame. see #21390.

[koopersmith]

In 22532:

Media: Add title, caption, and alt text, and attachment info to sidebar.

• Improve sidebar styles.
• Separate the hybrid title/caption field.
• Improve the sidebar image thumbnail.
• Remove filenames from inside the non-image icon thumbnail.
• Properly sync title/caption/alt.

see #21390.

[koopersmith]

In 22533:

Media: Watch additional search events. Properly captures clearing the search box. see #21390.

[koopersmith]

In 22534:

Media: Allow the modal sidebar to scroll. see #21390.

[koopersmith]

In 22535:

Media: Automatically strip any non-image items from the collection when creating a gallery.

Also changes the rules for when the "new gallery" button shows:

• More than two items must be selected.
• At least one of them must be an image.

see #21390.

[koopersmith]

In 22539:

Media templates: Alter escaping regular expression to prevent it from aggresively consuming input meant for interpolation. see #22344, #21390.

[koopersmith]

In 22542:

Media in QuickPress: Ensure wpActiveEditor is set when the "Add Media" button is clicked. fixes #22021, see #21390.

[koopersmith]

In 22543:

Media: Ensure variables in the attachment details template have defined defaults.

• Adds styling to the upload progress bar in the attachment details template.
• Defines the filename attribute when Plupload creates the client-side Attachment model.

fixes #22410, see #21390.

[bobbravo2]

UX Feedback on the Insert Media page with files attached

1. I think that having the upload file button is helpful - especially because for a novice user it is not evident that I can continue adding media using this interface. Suggested placement:
2. pressing ESC does not close the overlay

TinyMCE / editor feedback on galleries

• Unable to select the gallery plugin object in the editor
  • as a result it cannot be moved

[koopersmith]

In 22547:

Media: Add Embed from URL tab.

Note: There is a bug that currently blocks adding several successive embeds.

see #21390.

[koopersmith]

In 22552:

Media: Add an "upload more files" button to upload states. see #21390.

[koopersmith]

In 22556:

Media: Improve backwards compatibility for image_size_names_choose filter. see #22186, #21390.

[koopersmith]

In 22557:

Media: Add support for applicable *-upload-ui hooks.

Supports pre-upload-ui, pre-plupload-upload-ui, post-plupload-upload-ui, post-upload-ui.

see #22186, #21390.

[koopersmith]

In 22558:

Media: Better image detection in the embed from URL tab. see #21390.

[koopersmith]

In 22561:

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

[koopersmith]

In 22567:

Media: Restore 3.4 editor behavior and remove TinyMCE views.

• Reactivates the wpgallery and wpeditimage TinyMCE plugins. Deactivates the wpviews TinyMCE plugin.
• Moves still-relevant logic from mce-views.js to media-upload.js and shortcode.js.
• No longer include wp-includes/js/mce-views.js. This code will not be used in 3.5, and should be considered unstable.
• Currently, this is the real 3.4 experience; as such, editing triggers the old modals. Changing this is the next major step.

When reassessing views, we should look over all of these tickets and anticipate these bugs accordingly.

fixes #21813, #22123, #22155, #22161, #22257, #22266, #22318, #22407, see #21390.

[koopersmith]

In 22568:

Media: Make edit gallery button use new media. see #21390.

[koopersmith]

In 22569:

Media: Declare wp.media.string methods in a single object. see #21390.

[koopersmith]

In 22570:

Media: Remove border from inline media uploader. see #21390.

[koopersmith]

In 22578:

Media: Convert templates to use a data variable instead of with statements. see #21390.

[koopersmith]

[22578] also removed the dead MCE views templates.

[koopersmith]

In 22580:

Media: Improve image size-related UI and code.

• Add dimensions to the "sizes" dropdown.
• Ensure a full size is generated in wp_prepare_attachment_for_js().
• Print the dimensions for the full size in the attachment summary (instead of those for the current size).
• When generating the attachment view's template, map imageSize() to the size property instead of overriding the default data.

see #21390.

[koopersmith]

In 22583:

Media: Unify the "Insert" and "Insert.Post" toolbars. see #21390.

[koopersmith]

In 22594:

Media: Enter batch insert workflow by editing the selection instead of having an explicit button. see #21390.

[koopersmith]

In 22595:

Media: Prevent text from being selected in the menu. see #21390.

[koopersmith]

In 22597:

Media: Only show the edit selection link for the media library. Make the upload attachments list sortable. Only retain the silent option when running Attachments.validate(). see #21390.

[pavelevap]

Where is "Gallery" tab? How can I see all pictures uploaded (attached) to any post?

[azaozz]

In 22602:

TinyMCE: fix and improve the popup buttons for editing images and galleries show/hide for touch devices, fix inconsistency in iOS when "touching" an image inside a link, see #21390

[koopersmith]

In 22603:

Media: Update in-grid captions.

• Use input fields instead of textboxes (which provide better handling for smaller attachments).
• Provide data-setting properties to properly sync the changes.

see #21390.

[koopersmith]

In 22604:

Media: RTL styles for the media modal. props ocean90. see #22453, #21390.

[koopersmith]

In 22605:

Media: Remove dead CSS. props ocean90, see #21390.

[koopersmith]

In 22608:

Media: Wrap the embed screen's alignment setting in a div instead of a label to avoid default browser selection behavior. see #21390.

[koopersmith]

In 22609:

Media: Only display "Drop files" text when the browser supports drag and drop. see #22446, #21390.

[koopersmith]

In 22610:

Media: Add an explicit border to menus to show a divider in older browsers. see #22446, #21390.

[koopersmith]

In 22611:

Media: The zIndex arms race.

Adjusts zIndexes to be not-as-absurd as before, in the process moving the modal below the plupload flash shims (which do not have customizable zIndexes or classes, sadly).

fixes #22441, see #22446, #21390.

[koopersmith]

In 22612:

Media: zIndex peace was only temporary.

Revert [22611] in favor of using plupload's container setting. Turns out, plupload's flash shim is forced to the exact same index as the admin bar, so balancing the two is better solved by nesting the shim.

see #22441, #22446, #21390.

[tar.gz]

One thing I notice, when I select an image in the upload: in the right sidebar, the Caption field cannot be resized - the CSS has the "resize" property set to "none".

Is there any valid reason for that? I think that the user should be allowed to make a vertical resize (if he has a large screen and wants to write an long caption), so "resize: vertical" would be appropriate. It's in media-view.css under .media-sidebar .setting textarea, .compat-item .field textarea...

[koopersmith]

In 22648:

Media: Add a base view class.

• Centralizes view and subview management, unifying several disjointed constructs.
• Utilizes the dispose functionality found in Backbone master, providing a standard method for memory management.

see #21390.

[koopersmith]

In 22649:

Media: Allow for the views manager to be extended. see #21390.

[koopersmith]

In 22651:

Media: Move Attachments view preventDefault handler to the events object. see #21390.

[koopersmith]

In 22652:

Media: Make TinyMCE attachment and gallery controls always show when the corresponding view is selected. props SergeyBiryukov. fixes #22463, see #21390.

[koopersmith]

In 22654:

Media: Remove redundant sorting logic from composite models. see #21390.

[koopersmith]

In 22655:

Media: Optimize media models.

• Merge Composite model with general Attachments model, as Attachments.validate and Composite.evaluate were functionally equivalent.
• Queries should only watch wp.Uploader.queue, as watching Attachments.all results in queries attempting to add attachments before their properties are set (which then results a few too many irrelevant adds/removes). Attachments.all should potentially be removed or rethought.

see #21390.

[koopersmith]

In 22656:

Media: Remove debug cruft from [22655]. see #21390.

[koopersmith]

In 22658:

Media: Remove unused batch edit states and strings. see #21390.

[koopersmith]

In 22659:

Media: Convert the attachments browser view's destroy method to the newer dispose method. see #21390.

[koopersmith]

In 22660:

Media: Allow subviews to be inserted at a specific index. see #21390.

[koopersmith]

In 22662:

Media: Add default render method to views.

• Use default render method in the Frame view.
• Rename Views.attach to Views.insert.
• Add Views.all to retrieve all subviews.
• Add Views.detach to detach all subviews.
• Detect whether views are going to be reused in View.set and detach them instead of calling dispose.

see #21390.

[koopersmith]

In 22665:

Media: Blur the "Add Images" button when the media modal is opened. fixes #22445, see #21390.

[koopersmith]

In 22666:

Media: Use correct variable name. see #21390.

[koopersmith]

In 22667:

Media: Properly display selected featured image data if the featured image is not in the first section of the library. see #22494, #21390.

[koopersmith]

In 22671:

Media: Only show the alignment setting when viewing an image. fixes #21836, see #21390.

[koopersmith]

In 22672:

Media: Insert each attachment into the editor individually.

This allows the wpeditimage plugin to correctly identify caption shortcodes.

fixes #22459, see #21390.

[nacin]

In 22675:

wp_mime_type_icon() is faster when given a mime type, rather than a post ID. see #21390.

[nacin]

In 22677:

Revert [22675]. wp_mime_type_icon() is more accurate when given a post ID, rather than a mime type. The "speed" mostly comes down to the ordering of cache hits, rather than any performance issues like #22503. see #21390.

[koopersmith]

In 22681:

Media: Add documentation to media.Views. see #21390.

[koopersmith]

In 22682:

Media: Add a method to fetch the first subview. see #21390.

[koopersmith]

In 22684:

Media: Add silent options to the views; improve documentation. see #21390.

[koopersmith]

In 22690:

Media: Add render tracking to views. see #21390.

[koopersmith]

In 22692:

Media: Detect when views are added to the DOM and fire a ready event. see #21390.

[koopersmith]

In 22694:

Media: Prevent undefined errors when media scripts are enqueued outside of wp_enqueue_media(). fixes #22495, see #21390.

[koopersmith]

In 22699:

Media: Improve media buttons on the front end.

• Use a less specific selector (the body, actually) to delegate opening the media dialog.
• Allow the editor ID to be the empty string so the media_buttons action can be called without arguments.

see #22284, #21390.

[nacin]

In 22702:

Add media_view_settings and media_view_strings hooks. fixes #21092 for 3.5. see #21390.

[koopersmith]

In 22703:

Media: Allow textareas to be vertically resized. see #21390.

[koopersmith]

The time has finally come to mark this ticket as fixed.

If you find a bug, please open a new ticket.

[alexvorn2]

Cool!

[koopersmith]

In 22706:

Media: Attachment checkboxes now function as such. fixes #22462, see #21390.

[koopersmith]

In 22707:

Buttons: Remove unused button arrows and dropdowns. see #21598, #21390.

[koopersmith]

In 22708:

Media: Remove dead dropdown code from button view. see #21390.

[koopersmith]

In 22709:

Media Uploader: Change an uploaded attachment's 'updating' key with the rest of the returned attributes to allow events bound to 'change:updating' to access the new properties. see #21390.

[koopersmith]

In 22710:

Media: Refresh the attachment display settings when the active attachment finishes uploading. fixes #22452, see #21390.

[koopersmith]

In 22712:

Media: Add filters to the media library. fixes #22514, see #21390.

[koopersmith]

In 22713:

Media: Allow all galleries to be sortable. fixes #22488, see #21390.

[koopersmith]

In 22714:

Media: Correctly fetch the default post ID when editing a gallery. see #21390.

[koopersmith]

In 22715:

Media: Remove default gallery shortcode attributes when generating shortcode output. see #21390.

[koopersmith]

In 22716:

Media: Maintain event bindings in the main embed view. see #21390.

[koopersmith]

In 22733:

Media: Set a max width on select elements in the sidebar. fixes #22517, see #21390.

[koopersmith]

In 22737:

Media: Prevent type and search attachments filters from short circuiting.

Moves the reference to the source collection out of the props model. If it was translated over to a query (which was potentially possible) which then fired an ajax request, jQuery would attempt to serialize an object recursively, which caused an infinite loop and much sadness for my browser.

see #21390.

[koopersmith]

In 22738:

Media: Dropping images on the edit gallery view will automatically add those images to the gallery. fixes #22521, see #21390.

[koopersmith]

In 22741:

Media: Remove debug cruft. props ocean90. see #21390.

[koopersmith]

In 22743:

Media: Dynamically generate attachment filters using get_post_mime_types().

Moves get_post_mime_types() from wp-admin/includes/post.php to wp-includes/post.php.

fixes #22514, see #21390.

[koopersmith]

In 22745:

Media: Add filters for image-only libraries. see #22514, #21390.

[koopersmith]

In 22746:

Media: Make mirroring a collection of attachments a special case of observing a collection of attachments. see #21390.

[koopersmith]

In 22750:

Media: Remove redundant code.

Make the composite gallery library use mirror instead of observe, as one method now invokes the other. Also, make mirror return the attachment collection for chaining.

see #21390.

[koopersmith]

In 22753:

Media: Ensure Attachments.mirror returns true. see #21390.

[koopersmith]

Whoops. [22753] should say this instead of true.

[koopersmith]

In 22758:

Media: Make the attachment object optional when using the wp.media.string methods. see #21390.

[koopersmith]

In 22760:

Media: Use the wp.media.string functions when generating embed strings. Embed captions now work. see #21390.

[koopersmith]

In 22761:

Media: Backwards compatibility for the disable_captions filter. see #22186, #21390.

[koopersmith]

In 22762:

Media: Calculate image width and height when embedding images. see #21390.

[koopersmith]

In 22768:

Media: Backwards compatibility for the many send_to_editor filters. props nacin. see #22186, #21390.

[koopersmith]

In 22770:

Media: Move the new sections of media-upload.js to media-editor.js to allow the media modal to be used on the front end and prevent dependency conflicts with older themes and plugins. see #21390.

[koopersmith]

In 22771:

Media: The media views CSS depends on the button styles. see #21390.

[koopersmith]

In 22772:

Media: Remove dead thickbox code from media-editor.js. see #21390.

[koopersmith]

In 22773:

Media: Remove unused link-formatting function from media-editor.js. see #21390.

[koopersmith]

In 22774:

Media: Move send_to_editor to wp.media.editor.insert to prevent redeclaration.

Maintains backwards compatibility by delegating to window.send_to_editor and window.tb_remove if they exist.

see #21390.

[koopersmith]

In 22775:

Make jQuery a Backbone dependency. see #21390.

[koopersmith]

In 22776:

Media: Make media views dependent on jQuery UI sortable. see #22284, #21390.

[nacin]

In 22778:

Remove legacy media uploader bits from custom-header.php and custom-background.php. see #22186, #21390.

[koopersmith]

In 22779:

Media: Use a more specific class for toolbar buttons. see #22284, #21390.

[koopersmith]

In 22780:

Media: Add base form element CSS. props lessbloat. see #22284, #21390.

[koopersmith]

In 22781:

Media: Make the upload state a dedicated screen, instead of including its own library view. see #21390.

[koopersmith]

In 22782:

Media: Normalize font sizes, link colors, and other styles. props lessbloat, see #22284, #21390.

[koopersmith]

In 22786:

Media: Remove unused variable for state attributes. see #21390.

[koopersmith]

In 22787:

Media: Make inline uploader use main dispose method. see #21390.

[koopersmith]

In 22788:

Uploader: Correctly trigger error callback. see #21390.

[koopersmith]

In 22789:

Uploader: Route plupload errors to the correct handler and prevent naming conflicts. see #21390.

[cliffpaulick]

Replying to cliffpaulick:
Why am I still receiving these updates via email?
Thank you.

[koopersmith]

In 22791:

Media: Refresh the window-wide uploader whenever a state is activated. Properly unbind controller events. fixes #22504, see #21390.

[koopersmith]

In 22792:

Media: Rename PriorityList's add/remove methods to set/unset (to prevent the default remove from being overridden). see #21390.

[koopersmith]

In 22802:

Media: Make priority list views leverage the subview management class. see #21390.

[koopersmith]

In 22804:

Media: Convert the attachments browser to use internal views. see #21390.

[koopersmith]

In 22806:

Media: Check to see if we need more attachments when the browser is attached to the DOM. fixes #22480, see #21390.

[MZAWeb]

Replying to koopersmith:

In 22737:

Media: Prevent type and search attachments filters from short circuiting.

Moves the reference to the source collection out of the props model. If it was translated over to a query (which was potentially possible) which then fired an ajax request, jQuery would attempt to serialize an object recursively, which caused an infinite loop and much sadness for my browser.

see #21390.

Not sure if related, but the search bar is getting on top of the first picture on iPad portrait ​http://screenshots.mzaweb.com/hIpi

[koopersmith]

In 22809:

Media: Move sidebar from the frame view to the attachment browser view. Prevents juggling sidebar visibility state, and makes managing sidebar contents more reasonable. see #21390.

[koopersmith]

In 22816:

Media: Add global upload progress to the sidebar. see #21390.

[koopersmith]

In 22818:

Media: Display WordPress and plupload error messages whenever an upload fails. see #22243, #22186, #21390.

[koopersmith]

In 22819:

Media: Make the pre-upload-ui hooks share an element with the post-upload-ui hooks. see #22186, #21390.

[koopersmith]

In 22821:

Media: Make friends with media_upload_form. Adds notices for browser incompatibility, upload limits, maximum file size, and large file issues to the uploader. fixes #22243, see #22186, #21390.

[koopersmith]

In 22822:

Uploader: Display a more specific error message when a file exceeds the file size limit. see #21390.

[koopersmith]

In 22823:

Media: Properly render any pre-existing upload errors in the uploader status. see #21390.

[koopersmith]

In 22824:

Media: Add uploader error detection to the inline uploader view as well. see #21390.

[koopersmith]

In 22825:

Media: Use a full uploader status view in the inline uploader. see #21390.

[nacin]

In 22828:

Mustn't forget to hide the legacy media uploader! see #21390.

[koopersmith]

In 22832:

Add print_media_templates action to allow custom templates to be added. props ocean90. fixes #22565, see #21390.

[nacin]

In 22834:

Use correct variable in wp_ajax_save_attachment(). see #21390.

[azaozz]

In 22857:

TinyMCE: improve hiding of the image/gallery popup buttons, fix selecting a gallery in IE, don't leave empty paragraph after deleting an image with the popup button, fixes #22463, see #21390

[koopersmith]

In 22887:

Responsive CSS for the media modal. props azaozz. see #22615, #21390.

[nacin]

In 22895:

Media: Rename the dialog to 'Add Media' from 'Insert Media' to match the button. see #21390.

[nacin]

One more thing.

This is being re-opened for a final round of UX improvements. This is not done lightly — this comes after some extensive testing, research, and enlightenment, and thanks to lots of feedback from support forums on both WordPress.org and WordPress.com. It started with issues in the selection workflow (it was too easy to accidentally select-and-insert multiple images). It led to issues ranging from how this UI was going to be used by plugins (more buttons in the main view, or more views) to the realization that this is a now-or-never situation. We just won't be able to change this without breaking a ton in the future. Now it is.

A number of us have been testing out the patches above today, and believe it is ready to go in. It separates the workflows in a slightly different way to account for real-world usage. The first step of this was actually the Featured Image changes over the weekend. This is the final capstone. If all goes well this will be merged onto WP.com in a few hours, and will go out with RC3 tonight. Sorry (kind of) for breaking everyone's screenshots.

[markjaquith]

+1

Had a long discussion last night about this. This was my takeaway about the outstanding issues:

• The selection mechanism (click to select/focus, click again to deselect) was not very friendly for inserting a single image. We'd inadvertently optimized the selection process for the new multi-image insert feature (which is a bit of a power user feature). It was too easy to accidentally insert multiple images. It was frustrating for the more common use case: inserting a single image. By splitting between insert/gallery, we can offer a single-image optimized selection pattern for insertion (and let cmd/ctrl/shift clicks do multi-image insertion for power users), and offer a gallery-optimized selection pattern for gallery creation/addition.
• It was odd for the sidebar to have a mixture of sources and actions. Now it'll be actions. The upload/library choice gets made in the main pane.
• When thinking about how people would extend this, we feared that "adding a new action button to the lower-right" (LTR) would be the approach. There wasn't room for it. But there is room in the sidebar. Lots of room.
• By moving the screen title inside the lightbox, it becomes more visible and more useful. This also let us make the lightbox bigger, which gives users more room to see their images.

[lessbloat]

Replying to nacin:

One more thing.

+1.

I pounded on this for a while. It's looking/working great. Huge improvement overall.

[ryan]

Things I like about this:

• Each flow gets its own selection model. Gallery can do one click multi select without needing keyboard modifiers, insert can use a traditional shift/cmd/ctl+click multi-select model, featured image, custom background, and custom header can use a model allowing only one image to be selected. This avoids a common problem we were seeing on wordpress.com, accidentally inserting multiple images.
• The fields shown for each view can be customized. There is no need to show the insert/display related fields in the featured image flow, for example.
• It avoids button profusion from plugins. There won't be Create Gallery, Create Slideshow, Create Foo buttons all crowding one media library screen. Instead, those can create their own flows. This is a problem we ran into on wordpress.com when trying to fit custom galleries into the new media UI.
• It doesn't conflate actions with sources. Actions are in the left sidebar, sources are above the media list. Pick one and then pick the other. No more jumping around mixed sources and actions in the left sidebar.
• The header provides needed context.

+1

[helenyhou]

Another +1 after a few rounds of rolling with it. Way more sensible for workflows and specific views, including/especially header and background, and power-multi-select is working really well for me.

[sabreuse]

Another +1 here. This is looking and feeling really polished -- and just as important, like something I can explain to people without either their heads or mine exploding ;)

[ryan]

In 23006:

Final round of media UX improvements.

Props koopersmith
fixes #21390 #22502

[pavelevap]

Is there really need for these "different" strings (last commit): "Add to Gallery" and "Add to gallery"?

[tar.gz]

While testing RC3, I noticed some inconsistencies in the code that gets produced when using "Insert Media". Since it's a very specific issue, I created a new ticket for that: #22720. It's pretty minor, so guess it can wait for a future 3.5.x release.

Apart from that, the recent improvements make a lot of sense. It's looking great!

[nacin]

Replying to pavelevap:

Is there really need for these "different" strings (last commit): "Add to Gallery" and "Add to gallery"?

"Title Case" strings are served for the left sidebar of actions and the titles of each screen, while "Sentence case" is used for submit buttons. Humor us, it's only one more string. :-)

[pavelevap]

Yes, I noticed it, but it is not only one string, see #22623.

Similar example is "Create Gallery" and "Create a new gallery". Not such a big deal, but translators are sometimes annoyed because of these tricks an they have to search why :-)

[helen]

#19678 was marked as a duplicate.