Media: Restore AJAX response data shape in media library.

Restore the original shape of the AJAX response data in the media library after removing infinite scroll, and pass total number of attachments in the response headers `X-WP-Total` and `X-WP-TotalPages`. 

Improve backwards compatibility for plugins intercepting the ajax response. Headers match the structure and count calculation used in REST API responses.

Fix an issue with hiding the spinner after the load is completed and ensure that the load more view is created when changing tabs in the media library modal.

Follow up to [50829].

props adamsilverstein, spacedmonkey, joedolson.
Fixes #50105.
Built from https://develop.svn.wordpress.org/trunk@51145


git-svn-id: http://core.svn.wordpress.org/trunk@50754 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/ajax-actions.php

@@ -2990,17 +2990,27 @@ function wp_ajax_query_attachments() {
 	 * @param array $query An array of query variables.
 	 */
 	$query = apply_filters( 'ajax_query_attachments_args', $query );
-	$query = new WP_Query( $query );
+	$attachments_query = new WP_Query( $query );
 
-	$posts = array_map( 'wp_prepare_attachment_for_js', $query->posts );
+	$posts = array_map( 'wp_prepare_attachment_for_js', $attachments_query->posts );
 	$posts = array_filter( $posts );
+	$total_posts = $attachments_query->found_posts;
 
-	$result = array(
-		'attachments'      => $posts,
-		'totalAttachments' => $query->found_posts,
-	);
+	if ( $total_posts < 1 ) {
+		// Out-of-bounds, run the query again without LIMIT for total count.
+		unset( $query['paged'] );
 
-	wp_send_json_success( $result );
+		$count_query = new WP_Query();
+		$count_query->query( $query_args );
+		$total_posts = $count_query->found_posts;
+	}
+
+	$max_pages = ceil( $total_posts / (int) $attachments_query->query['posts_per_page'] );
+
+	header( 'X-WP-Total: ' . (int) $total_posts );
+	header( 'X-WP-TotalPages: ' . (int) $max_pages );
+
+	wp_send_json_success( $posts );
 }
 
 /**

wp-includes/js/media-models.js

@@ -754,21 +754,15 @@ var Attachments = Backbone.Collection.extend(/** @lends wp.media.model.Attachmen
 	 * passing through the JSON response. We override this to add attributes to
 	 * the collection items.
 	 *
-	 * @since 5.8.0 The response returns the attachments under `response.attachments` and
-	 *              `response.totalAttachments` holds the total number of attachments found.
-	 *
 	 * @param {Object|Array} response The raw response Object/Array.
 	 * @param {Object} xhr
 	 * @return {Array} The array of model attributes to be added to the collection
 	 */
 	parse: function( response, xhr ) {
-		if ( ! _.isArray( response.attachments ) ) {
-			response = [ response.attachments ];
+		if ( ! _.isArray( response ) ) {
+			  response = [response];
 		}
-
-		this.totalAttachments = parseInt( response.totalAttachments, 10 );
-
-		return _.map( response.attachments, function( attrs ) {
+		return _.map( response, function( attrs ) {
 			var id, attachment, newAttributes;
 
 			if ( attrs instanceof Backbone.Model ) {
@@ -788,9 +782,24 @@ var Attachments = Backbone.Collection.extend(/** @lends wp.media.model.Attachmen
 			return attachment;
 		});
 	},
+
+	// Customize fetch so we can extract the total post count from the response headers.
+	fetch: function(options) {
+		var collection = this;
+		var fetched = Backbone.Collection.prototype.fetch.call(this, options)
+			.done( function() {
+				if ( this.hasOwnProperty( 'getResponseHeader' ) ) {
+					collection.totalAttachments = parseInt( this.getResponseHeader( 'X-WP-Total' ), 10 );
+				} else {
+					collection.totalAttachments = 0;
+				}
+			} );
+		return fetched;
+	},
+
 	/**
 	 * If the collection is a query, create and mirror an Attachments Query collection.
-	 * 
+	 *
 	 * @access private
 	 * @param {Boolean} refresh Deprecated, refresh parameter no longer used.
 	 */
@@ -1330,9 +1339,7 @@ Query = Attachments.extend(/** @lends wp.media.model.Query.prototype */{
 		options.remove = false;
 
 		return this._more = this.fetch( options ).done( function( response ) {
-			var attachments = response.attachments;
-
-			if ( _.isEmpty( attachments ) || -1 === this.args.posts_per_page || attachments.length < this.args.posts_per_page ) {
+			if ( _.isEmpty( response ) || -1 === query.args.posts_per_page || response.length < query.args.posts_per_page ) {
 				query._hasMore = false;
 			}
 		});

wp-includes/js/media-views.js

@@ -2074,6 +2074,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 		}
 
 		this.updateContent();
+		this.updateLoadMoreView();
 
 		if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) {
 			this.$el.addClass( 'hide-sidebar' );
@@ -2621,11 +2622,10 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 		});
 
 		view.loadMoreSpinner.show();
-
-		this.collection.more().done( function() {
-			// Within done(), `this` is the returned collection.
+		this.collection.once( 'attachments:received', function() {
 			view.loadMoreSpinner.hide();
 		} );
+		this.collection.more();
 	},
 
 	/**

wp-includes/js/wp-util.js

@@ -115,7 +115,7 @@ window.wp = window.wp || {};
 					}
 
 					if ( _.isObject( response ) && ! _.isUndefined( response.success ) ) {
-						deferred[ response.success ? 'resolveWith' : 'rejectWith' ]( this, [response.data] );
+						deferred[ response.success ? 'resolveWith' : 'rejectWith' ]( deferred.jqXHR, [response.data] );
 					} else {
 						deferred.rejectWith( this, [response] );
 					}

wp-includes/js/wp-util.min.js

@@ -1,2 +1,2 @@
 /*! This file is auto-generated */
-window.wp=window.wp||{},function(i){var e="undefined"==typeof _wpUtilSettings?{}:_wpUtilSettings;wp.template=_.memoize(function(t){var n,s={evaluate:/<#([\s\S]+?)#>/g,interpolate:/\{\{\{([\s\S]+?)\}\}\}/g,escape:/\{\{([^\}]+?)\}\}(?!\})/g,variable:"data"};return function(e){return(n=n||_.template(i("#tmpl-"+t).html(),s))(e)}}),wp.ajax={settings:e.ajax||{},post:function(e,t){return wp.ajax.send({data:_.isObject(e)?e:_.extend(t||{},{action:e})})},send:function(e,n){var t;return _.isObject(e)?n=e:(n=n||{}).data=_.extend(n.data||{},{action:e}),n=_.defaults(n||{},{type:"POST",url:wp.ajax.settings.url,context:this}),(e=(t=i.Deferred(function(t){n.success&&t.done(n.success),n.error&&t.fail(n.error),delete n.success,delete n.error,t.jqXHR=i.ajax(n).done(function(e){"1"!==e&&1!==e||(e={success:!0}),_.isObject(e)&&!_.isUndefined(e.success)?t[e.success?"resolveWith":"rejectWith"](this,[e.data]):t.rejectWith(this,[e])}).fail(function(){t.rejectWith(this,arguments)})})).promise()).abort=function(){return t.jqXHR.abort(),this},e}}}(jQuery);
+window.wp=window.wp||{},function(i){var e="undefined"==typeof _wpUtilSettings?{}:_wpUtilSettings;wp.template=_.memoize(function(t){var n,s={evaluate:/<#([\s\S]+?)#>/g,interpolate:/\{\{\{([\s\S]+?)\}\}\}/g,escape:/\{\{([^\}]+?)\}\}(?!\})/g,variable:"data"};return function(e){return(n=n||_.template(i("#tmpl-"+t).html(),s))(e)}}),wp.ajax={settings:e.ajax||{},post:function(e,t){return wp.ajax.send({data:_.isObject(e)?e:_.extend(t||{},{action:e})})},send:function(e,n){var t;return _.isObject(e)?n=e:(n=n||{}).data=_.extend(n.data||{},{action:e}),n=_.defaults(n||{},{type:"POST",url:wp.ajax.settings.url,context:this}),(e=(t=i.Deferred(function(t){n.success&&t.done(n.success),n.error&&t.fail(n.error),delete n.success,delete n.error,t.jqXHR=i.ajax(n).done(function(e){"1"!==e&&1!==e||(e={success:!0}),_.isObject(e)&&!_.isUndefined(e.success)?t[e.success?"resolveWith":"rejectWith"](t.jqXHR,[e.data]):t.rejectWith(this,[e])}).fail(function(){t.rejectWith(this,arguments)})})).promise()).abort=function(){return t.jqXHR.abort(),this},e}}}(jQuery);

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.8-beta1-51144';
+$wp_version = '5.8-beta1-51145';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.