Make WordPress Core

Opened 12 years ago

Closed 11 years ago

Last modified 9 years ago

#21390 closed task (blessed) (fixed)

Upload/Insert media revamp

Reported by: nacin's profile nacin Owned by: koopersmith's profile koopersmith
Milestone: 3.5 Priority: high
Severity: normal Version: 3.5
Component: Media Keywords:
Focuses: Cc:

Description (last modified by 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.

Attachments (10)

21390-difference-allowed.diff (617 bytes) - added by duck_ 11 years ago.
21390.diff (57.6 KB) - added by koopersmith 11 years ago.
21390.2.diff (58.4 KB) - added by koopersmith 11 years ago.
21390.3.diff (61.8 KB) - added by koopersmith 11 years ago.
21390.4.diff (62.1 KB) - added by koopersmith 11 years ago.
21390.5.diff (63.6 KB) - added by koopersmith 11 years ago.
21390.6.diff (63.8 KB) - added by koopersmith 11 years ago.
21390.7.diff (64.4 KB) - added by koopersmith 11 years ago.
21390.8.diff (65.5 KB) - added by koopersmith 11 years ago.
21390.9.diff (66.0 KB) - added by koopersmith 11 years ago.

Download all attachments as: .zip

Change History (370)

#1 @nacin
12 years ago

  • Description modified (diff)

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
Last edited 12 years ago by nacin (previous) (diff)

#2 @nacin
12 years ago

Retina images in content? #21038

#3 @nacin
12 years ago

  • Description modified (diff)

#4 @martythornley
12 years ago

  • Cc marty@… added

#5 follow-up: @DrewAPicture
12 years ago

  • Cc xoodrew@… added

#6 @sabreuse
12 years ago

  • Cc sabreuse@… added

#7 follow-up: @kovshenin
12 years ago

  • Cc kovshenin@… added

#8 @mikeschinkel
12 years ago

  • Cc mikeschinkel@… added

#9 @Mamaduka
12 years ago

  • Cc georgemamadashvili@… added

#10 @ipstenu
12 years ago

  • Cc ipstenu added

#11 @goto10
12 years ago

  • Cc dromsey@… added

#12 @wycks
12 years ago

  • Cc bob.ellison@… added

#13 @simonwheatley
12 years ago

  • Cc simon@… added

#14 @kuemerle5
12 years ago

  • Cc kuemerle5 added

#15 @pross
12 years ago

  • Cc pross@… added

#16 @kuemerle5
12 years ago

  • Cc kuemerle5 removed

#17 @kuemerle5
12 years ago

  • Cc kuemerle5@… added

#18 @azizur
12 years ago

  • Cc azizur added

#19 @ChaseWiseman
12 years ago

  • Cc ChaseWiseman added

#20 @desrosj
12 years ago

  • Cc desrosj@… added

#21 @blobaugh
12 years ago

  • Cc blobaugh added

#22 @lessbloat
12 years ago

  • Cc dave@… added

#23 @tar.gz
12 years ago

  • Cc code@… added

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)

#24 @ocean90
12 years ago

  • Cc ocean90 added

#25 @koopersmith
12 years ago

  • Owner set to koopersmith
  • Status changed from new to accepted

#26 follow-up: @koopersmith
12 years ago

In [21656]:

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

#27 follow-ups: @ethitter
12 years ago

  • Cc erick@… added

#28 follow-up: @jondavidjohn
12 years ago

  • Cc me@… added

#29 @nacin
12 years ago

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.

#30 follow-up: @nacin
12 years ago

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.

#31 @scribu
12 years ago

  • Cc scribu added

#32 follow-up: @nacin
12 years ago

In [21681]:

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

#33 @koopersmith
12 years ago

In [21682]:

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

#34 follow-up: @koopersmith
12 years ago

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.

#35 @jamescollins
12 years ago

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.

#36 follow-ups: @scribu
12 years ago

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?

#37 in reply to: ↑ 36 @SergeyBiryukov
12 years ago

Replying to scribu:

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

[21132], IRC chat.

#38 follow-up: @SergeyBiryukov
12 years ago

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

#39 @scribu
12 years ago

Thanks for the background links, Sergey.

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

#40 in reply to: ↑ 38 @koopersmith
12 years ago

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.

#41 @koopersmith
12 years ago

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.

#42 follow-up: @koopersmith
12 years ago

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.

#43 @koopersmith
12 years ago

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.

#44 @koopersmith
12 years ago

  • Version set to trunk

#45 @scribu
12 years ago

  • Priority changed from normal to high

Yay, I can see the new thickbox content now.

#46 in reply to: ↑ 36 @koopersmith
12 years ago

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.

#47 @JerrySarcastic
12 years ago

  • Cc JerrySarcastic added

#48 @koopersmith
12 years ago

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.

#2 @koopersmith
12 years ago

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.

#3 @koopersmith
12 years ago

In [21771]:

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

#4 @koopersmith
12 years ago

In [21772]:

Add checks for attachment metadata when formatting attachments for JS.

Prevents notices from causing malformed ajax responses.

see #21390.

#5 follow-up: @koopersmith
12 years ago

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.

#6 @koopersmith
12 years ago

In [21784]:

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

#2 @koopersmith
12 years ago

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.

#3 @koopersmith
12 years ago

In [21786]:

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

#4 @alexvorn2
12 years ago

  • Cc alexvornoffice@… added

#5 follow-up: @koopersmith
12 years ago

Also see [21814] and #21868.

#6 @koopersmith
12 years ago

In [21820]:

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

#7 follow-up: @koopersmith
12 years ago

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.

#8 @tw2113
12 years ago

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.

#9 @scribu
12 years ago

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.

#10 @koopersmith
12 years ago

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.

#11 @alexvorn2
12 years ago

please add filters everywhere is possible...

#12 @alexvorn2
12 years ago

and add the option to insert multiple images at once.

#13 @alexvorn2
12 years ago

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

#14 @koopersmith
12 years ago

In [21901]:

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

#15 @koopersmith
12 years ago

In [21902]:

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

#16 @koopersmith
12 years ago

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.

#17 @koopersmith
12 years ago

In [21907]:

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

#18 @koopersmith
12 years ago

In [21908]:

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

#19 @koopersmith
12 years ago

In [21909]:

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

#20 @koopersmith
11 years ago

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.

#18 @koopersmith
11 years ago

In [22013]:

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

#19 @koopersmith
11 years ago

In [22021]:

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

#18 @koopersmith
11 years ago

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.

#19 @koopersmith
11 years ago

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.

#20 @koopersmith
11 years ago

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.

#19 @koopersmith
11 years ago

In [22029]:

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

#20 @koopersmith
11 years ago

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.

#3 @koopersmith
11 years ago

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.

#4 @koopersmith
11 years ago

In [22041]:

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

#5 follow-up: @koopersmith
11 years ago

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.

#6 @koopersmith
11 years ago

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.

#20 @koopersmith
11 years ago

In [22045]:

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

#20 @koopersmith
11 years ago

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.

#21 @koopersmith
11 years ago

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.

#22 @husobj
11 years ago

  • Cc ben@… added

#23 @koopersmith
11 years ago

In [22073]:

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

#24 @mordauk
11 years ago

  • Cc pippin@… added

#25 @koopersmith
11 years ago

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.

#26 follow-up: @alexvorn2
11 years ago

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...

#27 in reply to: ↑ 26 ; follow-ups: @koopersmith
11 years ago

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.

#28 in reply to: ↑ 27 ; follow-up: @alexvorn2
11 years ago

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...

#29 @koopersmith
11 years ago

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.

#30 in reply to: ↑ 27 ; follow-up: @husobj
11 years ago

Replying to koopersmith

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

Where do you select that image size?

#31 in reply to: ↑ 28 @koopersmith
11 years ago

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.

#32 in reply to: ↑ 30 ; follow-up: @koopersmith
11 years ago

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.

#33 in reply to: ↑ 32 @husobj
11 years ago

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!

#34 follow-up: @koopersmith
11 years ago

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.

#35 in reply to: ↑ 34 @duck_
11 years ago

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.

#36 follow-ups: @koopersmith
11 years ago

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.

#37 @koopersmith
11 years ago

In [22138]:

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

#38 follow-up: @koopersmith
11 years ago

In [22139]:

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

#39 @koopersmith
11 years ago

In [22141]:

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

#40 @koopersmith
11 years ago

In [22142]:

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

#41 @koopersmith
11 years ago

In [22143]:

Improve JavaScript object formatting. see #21390.

#42 follow-up: @koopersmith
11 years ago

In [22144]:

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

#43 @koopersmith
11 years ago

In [22145]:

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

#44 @duck_
11 years ago

In [22149]:

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

#45 @jondavidjohn
11 years ago

  • Cc me@… removed

#46 @koopersmith
11 years ago

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.

#24 @koopersmith
11 years ago

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.

#25 @koopersmith
11 years ago

In [22156]:

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

#2 @koopersmith
11 years ago

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.

#3 @koopersmith
11 years ago

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.

#4 @koopersmith
11 years ago

In [22160]:

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

Prevents undefined JS errors in the attachments view template.

see #21390.

#5 follow-up: @koopersmith
11 years ago

In [22161]:

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

#6 @koopersmith
11 years ago

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.

#26 follow-up: @koopersmith
11 years ago

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.

#27 follow-ups: @koopersmith
11 years ago

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.

#21 @koopersmith
11 years ago

In [22174]:

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

#22 @tw2113
11 years ago

  • Cc michael.d.beckwith@… added

#23 @tw2113
11 years ago

  • Cc michael.d.beckwith@… removed

#24 @koopersmith
11 years ago

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.

#25 @koopersmith
11 years ago

In [22176]:

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

#26 follow-up: @koopersmith
11 years ago

In [22177]:

Media Modal: Remove unused CSS. see #21390.

#27 follow-ups: @koopersmith
11 years ago

In [22178]:

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

#23 @koopersmith
11 years ago

In [22179]:

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

#24 @koopersmith
11 years ago

In [22180]:

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

#25 @koopersmith
11 years ago

In [22183]:

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

#26 follow-up: @koopersmith
11 years ago

In [22184]:

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

#27 follow-ups: @koopersmith
11 years ago

In [22200]:

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

#24 @koopersmith
11 years ago

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.

#25 @koopersmith
11 years ago

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.

#26 follow-up: @koopersmith
11 years ago

In [22212]:

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

#27 follow-ups: @jondavidjohn
11 years ago

  • Cc me@… added

#28 follow-up: @jondavidjohn
11 years ago

  • Cc me@… removed

#29 @koopersmith
11 years ago

In [22219]:

MCE Views: Add alignment styles for generic views.

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

see #21390, #21812, #21813.

#27 follow-ups: @koopersmith
11 years ago

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.

#28 follow-up: @koopersmith
11 years ago

In [22221]:

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

#29 @johnbillion
11 years ago

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.

#30 follow-up: @Ipstenu
11 years ago

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.

#31 @Ipstenu
11 years ago

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

#32 follow-up: @koopersmith
11 years ago

In [22242]:

Add button groups. see #21598, #21390.

#4 @koopersmith
11 years ago

In [22245]:

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

#5 follow-up: @billerickson
11 years ago

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?

#6 @koopersmith
11 years ago

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.

#7 follow-up: @tar.gz
11 years ago

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?

#8 @deltafactory
11 years ago

  • Cc jeff@… added

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

#9 in reply to: ↑ 7 @helenyhou
11 years ago

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

#10 @deltafactory
11 years ago

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().

#11 in reply to: ↑ 5 @husobj
11 years ago

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?

#12 @cliffpaulick
11 years ago

  • Cc tko@… added

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.

#13 @koopersmith
11 years ago

In [22267]:

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

#14 @joostdekeijzer
11 years ago

  • Cc joost@… added

#15 @blepoxp
11 years ago

  • Cc glenn@… added

#16 @koopersmith
11 years ago

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.

#17 @koopersmith
11 years ago

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.

#18 @koopersmith
11 years ago

In 22322:

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

#19 @koopersmith
11 years ago

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.

#20 @koopersmith
11 years ago

In 22324:

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

#21 @koopersmith
11 years ago

In 22325:

Improve attachment detailed preview styling. see #21390.

#22 @koopersmith
11 years ago

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.

#23 @koopersmith
11 years ago

In 22333:

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

#24 @koopersmith
11 years ago

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.

#25 @koopersmith
11 years ago

In 22336:

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

#26 follow-up: @koopersmith
11 years ago

In 22337:

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

#27 follow-ups: @koopersmith
11 years ago

In 22338:

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

#28 follow-up: @koopersmith
11 years ago

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.

#29 @prettyboymp
11 years ago

  • Cc mpretty@… added

#30 follow-up: @azaozz
11 years ago

#19389 was marked as a duplicate.

#31 @tar.gz
11 years ago

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.

#32 follow-up: @koopersmith
11 years ago

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.

#33 @koopersmith
11 years ago

In 22341:

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

#34 follow-up: @koopersmith
11 years ago

In 22342:

Remove dead gallery settings code. see #21390.

#35 @koopersmith
11 years ago

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.

#36 follow-ups: @koopersmith
11 years ago

In 22344:

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

#37 @koopersmith
11 years ago

In 22345:

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

#38 follow-up: @koopersmith
11 years ago

In 22348:

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

#39 @koopersmith
11 years ago

In 22356:

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

#40 @koopersmith
11 years ago

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.

#41 @koopersmith
11 years ago

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.

#42 follow-up: @alexvorn2
11 years ago

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

#43 in reply to: ↑ 42 @ethitter
11 years ago

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

#44 @koopersmith
11 years ago

In 22397:

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

#45 @koopersmith
11 years ago

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.

#46 @koopersmith
11 years ago

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.

#47 @koopersmith
11 years ago

In 22454:

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

#48 @tar.gz
11 years ago

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 &nbsp; 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

#49 @koopersmith
11 years ago

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.

#50 @koopersmith
11 years ago

In 22467:

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

#51 @azaozz
11 years ago

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.

#52 @koopersmith
11 years ago

In 22477:

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

#53 @koopersmith
11 years ago

In 22480:

Media: Add batch insertion workflow. see #21390.

#54 @koopersmith
11 years ago

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.

#55 @koopersmith
11 years ago

In 22485:

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

#56 @koopersmith
11 years ago

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.

#57 @koopersmith
11 years ago

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.

#58 @koopersmith
11 years ago

In 22490:

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

#59 @koopersmith
11 years ago

In 22493:

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

#60 @koopersmith
11 years ago

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.

#61 @koopersmith
11 years ago

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.

#62 @koopersmith
11 years ago

In 22496:

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

#63 @koopersmith
11 years ago

In 22499:

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

#64 @koopersmith
11 years ago

In 22500:

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

#65 @koopersmith
11 years ago

In 22501:

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

#66 @koopersmith
11 years ago

In 22502:

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

#67 @koopersmith
11 years ago

In 22503:

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

#68 @koopersmith
11 years ago

In 22505:

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

#69 @koopersmith
11 years ago

In 22506:

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

#70 @koopersmith
11 years ago

In 22507:

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

#71 @koopersmith
11 years ago

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.

#72 @koopersmith
11 years ago

In 22509:

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

#73 @deltafactory
11 years ago

  • Cc jeff@… removed

#74 @koopersmith
11 years ago

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.

#75 @koopersmith
11 years ago

In 22528:

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

#76 @koopersmith
11 years ago

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.

#77 @koopersmith
11 years ago

In 22530:

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

#78 @koopersmith
11 years ago

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.

#79 @koopersmith
11 years ago

In 22533:

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

#80 @koopersmith
11 years ago

In 22534:

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

#81 @koopersmith
11 years ago

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.

#82 @koopersmith
11 years ago

In 22539:

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

#83 @koopersmith
11 years ago

In 22542:

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

#84 @koopersmith
11 years ago

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.

#85 @bobbravo2
11 years ago

  • Cc bob@… added

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: http://f.cl.ly/items/1n1A20341N3v19050W45/21390.mockup.jpg
  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
Last edited 11 years ago by bobbravo2 (previous) (diff)

#86 @koopersmith
11 years ago

In 22547:

Media: Add Embed from URL tab.

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

see #21390.

#87 @koopersmith
11 years ago

In 22552:

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

#88 @koopersmith
11 years ago

In 22556:

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

#89 @koopersmith
11 years ago

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.

#90 @koopersmith
11 years ago

In 22558:

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

#91 @koopersmith
11 years ago

In 22561:

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

#92 @koopersmith
11 years ago

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.

#93 @koopersmith
11 years ago

In 22568:

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

#94 @koopersmith
11 years ago

In 22569:

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

#95 @koopersmith
11 years ago

In 22570:

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

#96 @koopersmith
11 years ago

In 22578:

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

#97 @koopersmith
11 years ago

[22578] also removed the dead MCE views templates.

#98 @koopersmith
11 years ago

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.

#99 @koopersmith
11 years ago

In 22583:

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

#100 @koopersmith
11 years ago

In 22594:

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

#101 @koopersmith
11 years ago

In 22595:

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

#102 @koopersmith
11 years ago

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.

#103 @pavelevap
11 years ago

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

#104 @azaozz
11 years ago

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

#105 @koopersmith
11 years ago

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.

#106 @koopersmith
11 years ago

In 22604:

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

#107 @koopersmith
11 years ago

In 22605:

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

#108 @koopersmith
11 years ago

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.

#109 @koopersmith
11 years ago

In 22609:

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

#110 @koopersmith
11 years ago

In 22610:

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

#111 @koopersmith
11 years ago

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.

#112 @koopersmith
11 years ago

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.

#113 @tar.gz
11 years ago

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...

#114 @koopersmith
11 years ago

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.

#115 @koopersmith
11 years ago

In 22649:

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

#116 @koopersmith
11 years ago

In 22651:

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

#117 @koopersmith
11 years ago

In 22652:

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

#118 @koopersmith
11 years ago

In 22654:

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

#119 @koopersmith
11 years ago

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.

#120 @koopersmith
11 years ago

In 22656:

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

#121 @koopersmith
11 years ago

In 22658:

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

#122 @koopersmith
11 years ago

In 22659:

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

#123 @koopersmith
11 years ago

In 22660:

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

#124 @koopersmith
11 years ago

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.

#125 @koopersmith
11 years ago

In 22665:

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

#126 @koopersmith
11 years ago

In 22666:

Media: Use correct variable name. see #21390.

#127 @koopersmith
11 years ago

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.

#128 @koopersmith
11 years ago

In 22671:

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

#129 @koopersmith
11 years ago

In 22672:

Media: Insert each attachment into the editor individually.

This allows the wpeditimage plugin to correctly identify caption shortcodes.

fixes #22459, see #21390.

#130 @nacin
11 years ago

In 22675:

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

#131 @nacin
11 years ago

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.

#132 @koopersmith
11 years ago

In 22681:

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

#133 @koopersmith
11 years ago

In 22682:

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

#134 @koopersmith
11 years ago

In 22684:

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

#135 @koopersmith
11 years ago

In 22690:

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

#136 @koopersmith
11 years ago

In 22692:

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

#137 @koopersmith
11 years ago

In 22694:

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

#138 @koopersmith
11 years ago

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.

#139 @nacin
11 years ago

In 22702:

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

#140 @koopersmith
11 years ago

In 22703:

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

#141 follow-up: @koopersmith
11 years ago

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

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

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

#142 in reply to: ↑ 141 @alexvorn2
11 years ago

Cool!

#143 @koopersmith
11 years ago

In 22706:

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

#144 @koopersmith
11 years ago

In 22707:

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

#145 @koopersmith
11 years ago

In 22708:

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

#146 @koopersmith
11 years ago

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.

#147 @koopersmith
11 years ago

In 22710:

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

#148 @koopersmith
11 years ago

In 22712:

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

#149 @koopersmith
11 years ago

In 22713:

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

#150 @koopersmith
11 years ago

In 22714:

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

#151 @koopersmith
11 years ago

In 22715:

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

#152 @koopersmith
11 years ago

In 22716:

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

#153 @koopersmith
11 years ago

In 22733:

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

#154 follow-up: @koopersmith
11 years ago

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.

#155 @koopersmith
11 years ago

In 22738:

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

#156 @koopersmith
11 years ago

In 22741:

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

#157 @koopersmith
11 years ago

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.

#158 @koopersmith
11 years ago

In 22745:

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

#159 @koopersmith
11 years ago

In 22746:

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

#160 @koopersmith
11 years ago

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.

#161 @koopersmith
11 years ago

In 22753:

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

#162 @koopersmith
11 years ago

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

#163 follow-up: @cliffpaulick
11 years ago

  • Cc tko@… removed

#164 @koopersmith
11 years ago

In 22758:

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

#165 @koopersmith
11 years ago

In 22760:

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

#166 @koopersmith
11 years ago

In 22761:

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

#167 @koopersmith
11 years ago

In 22762:

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

#168 @koopersmith
11 years ago

In 22768:

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

#169 @koopersmith
11 years ago

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.

#170 @koopersmith
11 years ago

In 22771:

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

#171 @koopersmith
11 years ago

In 22772:

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

#172 @koopersmith
11 years ago

In 22773:

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

#173 @koopersmith
11 years ago

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.

#174 @koopersmith
11 years ago

In 22775:

Make jQuery a Backbone dependency. see #21390.

#175 @koopersmith
11 years ago

In 22776:

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

#176 @nacin
11 years ago

In 22778:

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

#177 @koopersmith
11 years ago

In 22779:

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

#178 @koopersmith
11 years ago

In 22780:

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

#179 @koopersmith
11 years ago

In 22781:

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

#180 @koopersmith
11 years ago

In 22782:

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

#181 @koopersmith
11 years ago

In 22786:

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

#182 @koopersmith
11 years ago

In 22787:

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

#183 @koopersmith
11 years ago

In 22788:

Uploader: Correctly trigger error callback. see #21390.

#184 @koopersmith
11 years ago

In 22789:

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

#185 in reply to: ↑ 163 @cliffpaulick
11 years ago

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

#186 @koopersmith
11 years ago

In 22791:

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

#187 @koopersmith
11 years ago

In 22792:

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

#188 @koopersmith
11 years ago

In 22802:

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

#189 @koopersmith
11 years ago

In 22804:

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

#190 @koopersmith
11 years ago

In 22806:

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

#191 in reply to: ↑ 154 @MZAWeb
11 years ago

  • Cc wordpress@… added

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

#192 @koopersmith
11 years ago

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.

#193 @koopersmith
11 years ago

In 22816:

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

#194 @koopersmith
11 years ago

In 22818:

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

#195 @koopersmith
11 years ago

In 22819:

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

#196 @koopersmith
11 years ago

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.

#197 @koopersmith
11 years ago

In 22822:

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

#198 @koopersmith
11 years ago

In 22823:

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

#199 @koopersmith
11 years ago

In 22824:

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

#200 @koopersmith
11 years ago

In 22825:

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

#201 @nacin
11 years ago

In 22828:

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

#202 @koopersmith
11 years ago

In 22832:

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

#203 @nacin
11 years ago

In 22834:

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

#204 @azaozz
11 years ago

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

#205 @koopersmith
11 years ago

In 22887:

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

#206 @nacin
11 years ago

In 22895:

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

@koopersmith
11 years ago

@koopersmith
11 years ago

@koopersmith
11 years ago

@koopersmith
11 years ago

@koopersmith
11 years ago

@koopersmith
11 years ago

@koopersmith
11 years ago

@koopersmith
11 years ago

@koopersmith
11 years ago

#207 follow-up: @nacin
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#208 @markjaquith
11 years ago

+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.

#209 in reply to: ↑ 207 @lessbloat
11 years ago

Replying to nacin:

One more thing.

+1.

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

#210 @ryan
11 years ago

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

#211 @helenyhou
11 years ago

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.

#212 @sabreuse
11 years ago

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 ;)

#213 @ryan
11 years ago

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

In 23006:

Final round of media UX improvements.

Props koopersmith
fixes #21390 #22502

#214 follow-up: @pavelevap
11 years ago

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

#215 @tar.gz
11 years ago

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!

#216 in reply to: ↑ 214 @nacin
11 years ago

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. :-)

#217 @pavelevap
11 years ago

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 :-)

This ticket was mentioned in IRC in #wordpress-ui by ericandrewlewis. View the logs.


10 years ago

#219 @helen
9 years ago

#19678 was marked as a duplicate.

Note: See TracTickets for help on using tickets.