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.


git-svn-id: https://develop.svn.wordpress.org/trunk@22155 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/js/media-upload.js

@@ -90,7 +90,7 @@ var tb_position;
 // WordPress, TinyMCE, and Media
 // -----------------------------
 (function($){
-	// Stores the editors' `wp.media.controller.Workflow` instaces.
+	// Stores the editors' `wp.media.controller.Workflow` instances.
 	var workflows = {};
 
 	wp.mce.media = {

wp-includes/js/mce-view.js

@@ -546,7 +546,8 @@ window.wp = window.wp || {};
 				},
 
 				shortcode: function( attachments ) {
-					var attrs = _.pick( attachments.props.toJSON(), 'include', 'exclude', 'orderby', 'order' ),
+					var props = attachments.props.toJSON(),
+						attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
 						shortcode;
 
 					attrs.ids = attachments.pluck('id');
@@ -557,7 +558,11 @@ window.wp = window.wp || {};
 						type:   'single'
 					});
 
-					galleries[ shortcode.string() ] = attachments;
+					// Use a cloned version of the gallery.
+					galleries[ shortcode.string() ] = new wp.media.model.Attachments( attachments.models, {
+						props: props
+					});
+
 					return shortcode;
 				}
 			};
@@ -574,14 +579,18 @@ window.wp = window.wp || {};
 			parent: $('#post_ID').val(),
 
 			events: {
-				'click .close': 'remove'
+				'click .close': 'remove',
+				'click .edit':  'edit'
 			},
 
 			initialize: function() {
-				var	view      = mceview.get('gallery'),
+				this.update();
-					shortcode = this.options.shortcode;
+			},
 
-				this.attachments = view.gallery.attachments( shortcode, this.parent );
+			update: function() {
+				var	view = mceview.get('gallery');
+
+				this.attachments = view.gallery.attachments( this.options.shortcode, this.parent );
 				this.attachments.more().done( _.bind( this.render, this ) );
 			},
 
@@ -601,6 +610,34 @@ window.wp = window.wp || {};
 				};
 
 				this.$el.html( this.template( options ) );
+			},
+
+			edit: function() {
+				if ( ! wp.media.view || this.workflow )
+					return;
+
+				this.workflow = wp.media({
+					view:      'gallery',
+					selection: this.attachments.models,
+					title:     mceview.l10n.editGallery,
+					editing:   true,
+					multiple:  true
+				});
+
+				// Create a single-use workflow. If the workflow is closed,
+				// then detach it from the DOM and remove the reference.
+				this.workflow.on( 'close', function() {
+					this.workflow.detach();
+					delete this.workflow;
+				}, this );
+
+				// Update the `shortcode` and `attachments`.
+				this.workflow.on( 'update:gallery', function( selection ) {
+					var	view = mceview.get('gallery');
+
+					this.options.shortcode = view.gallery.shortcode( selection );
+					this.update();
+				}, this );
 			}
 		}
 	});

wp-includes/js/media-views.js

@@ -119,8 +119,8 @@
 
 		update: function( event ) {
 			this.close();
-			this.trigger( 'update', this.selection );
+			this.trigger( 'update', this.selection, this );
-			this.trigger( 'update:' + event, this.selection );
+			this.trigger( 'update:' + event, this.selection, this );
 			this.selection.clear();
 		},
 
@@ -217,18 +217,22 @@
 
 		attach: function() {
 			this.$el.appendTo( this.options.container );
+			this.controller.trigger( 'attach', this.controller );
 		},
 
 		detach: function() {
 			this.$el.detach();
+			this.controller.trigger( 'detach', this.controller );
 		},
 
 		open: function() {
 			this.$el.show();
+			this.controller.trigger( 'open', this.controller );
 		},
 
 		close: function() {
 			this.$el.hide();
+			this.controller.trigger( 'close', this.controller );
 		},
 
 		closeHandler: function( event ) {
@@ -277,8 +281,8 @@
 			// Make sure to detach the elements we want to reuse.
 			// Otherwise, `jQuery.html()` will unbind their events.
 			$( _.pluck( this._views, 'el' ) ).detach();
-			this.$primary.html( _.pluck( views.primary, 'el' ) );
+			this.$primary.html( _.pluck( views.primary || [], 'el' ) );
-			this.$secondary.html( _.pluck( views.secondary, 'el' ) );
+			this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
 
 			return this;
 		},
@@ -736,22 +740,12 @@
 		// appropriate workflow when the time comes, but is currently here
 		// to test multiple selections.
 		initToolbarView: function() {
-			var controller = this.controller;
+			var controller = this.controller,
-
+				editing = controller.get('editing'),
-			this.toolbarView = new media.view.Toolbar({
+				items = {
-				items: {
+					'update-gallery': {
-					'return-to-library': {
-						text:     l10n.returnToLibrary,
-						priority: -40,
-
-						click:  function() {
-							controller.render('library');
-						}
-					},
-
-					'insert-gallery-into-post': {
 						style:    'primary',
-						text:     l10n.insertGalleryIntoPost,
+						text:     editing ? l10n.updateGallery : l10n.insertGalleryIntoPost,
 						priority: 40,
 						click:    _.bind( controller.update, controller, 'gallery' )
 					},
@@ -760,7 +754,21 @@
 						text:     l10n.addImagesFromLibrary,
 						priority: 30
 					}
+				};
+
+			if ( ! editing ) {
+				items['return-to-library'] = {
+					text:     l10n.returnToLibrary,
+					priority: -40,
+
+					click:  function() {
+						controller.render('library');
 					}
+				};
+			}
+
+			this.toolbarView = new media.view.Toolbar({
+				items: items
 			});
 
 			this.$el.addClass('with-toolbar');

wp-includes/script-loader.php

@@ -330,6 +330,7 @@ function wp_default_scripts( &$scripts ) {
 		// Gallery
 		'returnToLibrary'       => __( 'Return to media library' ),
 		'insertGalleryIntoPost' => __( 'Insert gallery into post' ),
+		'updateGallery'         => __( 'Update gallery' ),
 		'addImagesFromLibrary'  => __( 'Add images from media library' ),
 	) );
 
@@ -337,6 +338,7 @@ function wp_default_scripts( &$scripts ) {
 	$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
 	did_action( 'init' ) && $scripts->localize( 'mce-view', '_wpMceViewL10n', array(
 		'contentWidth' => isset( $GLOBALS['content_width'] ) ? $GLOBALS['content_width'] : 800,
+		'editGallery'  => __( 'Edit Gallery' ),
 	) );
 
 	if ( is_admin() ) {