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.


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

wp-includes/css/media-views.css

@@ -277,6 +277,10 @@
 	font-family: sans-serif;
 }
 
+.media-toolbar-secondary .search {
+	margin-right: 16px;
+}
+
 /**
  * Attachments
  */
@@ -496,6 +500,14 @@
 	overflow: auto;
 }
 
+.attachments-browser .instructions {
+	display: inline-block;
+	margin-top: 16px;
+	line-height: 18px;
+	font-size: 13px;
+	color: #999;
+}
+
 
 /**
  * Progress Bar

wp-includes/js/media-views.js

@@ -263,11 +263,12 @@
 	// ---------------------------
 	media.controller.Library = media.controller.State.extend({
 		defaults: {
-			id:       'library',
-			multiple: false,
-			describe: false,
-			toolbar:  'main-attachments',
-			sidebar:  'settings'
+			id:         'library',
+			multiple:   false,
+			describe:   false,
+			toolbar:    'main-attachments',
+			sidebar:    'settings',
+			searchable: true
 		},
 
 		initialize: function() {
@@ -501,6 +502,7 @@
 			edge:       199,
 			editing:    false,
 			sortable:   true,
+			searchable: false,
 			toolbar:    'gallery-edit',
 			sidebar:    'settings'
 		},
@@ -809,6 +811,7 @@
 				collection: state.get('library'),
 				model:      state,
 				sortable:   state.get('sortable'),
+				search:     state.get('searchable'),
 
 				AttachmentView: state.get('AttachmentView')
 			}).render() );
@@ -945,14 +948,15 @@
 
 				// Batch states.
 				new media.controller.Library({
-					id:       'batch-edit',
-					multiple: false,
-					describe: true,
-					edge:     199,
-					sortable: true,
-					menu:     'batch',
-					toolbar:  'batch-edit',
-					sidebar:  'attachment-settings'
+					id:         'batch-edit',
+					multiple:   false,
+					describe:   true,
+					edge:       199,
+					sortable:   true,
+					searchable: false,
+					menu:       'batch',
+					toolbar:    'batch-edit',
+					sidebar:    'attachment-settings'
 				}),
 
 				new media.controller.Library( _.defaults({
@@ -2316,10 +2320,17 @@
 				this.toolbar.add( 'search', new media.view.Search({
 					controller: this.controller,
 					model:      this.collection.props,
-					priority:   -40
+					priority:   -60
 				}).render() );
 			}
 
+			if ( this.options.sortable ) {
+				this.toolbar.add( 'dragInfo', new Backbone.View({
+					el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
+					priority: -40
+				}) );
+			}
+
 			this.attachments = new media.view.Attachments({
 				controller: this.controller,
 				collection: this.collection,

wp-includes/media.php

@@ -1328,6 +1328,7 @@ function wp_enqueue_media() {
 		'cancel'      => __( 'Cancel' ),
 		'addImages'   => __( 'Add images' ),
 		'selected'    => __( 'selected' ),
+		'dragInfo'    => __( 'Drag and drop to reorder images.' ),
 
 		// Upload
 		'uploadFilesTitle'  => __( 'Upload Files' ),