Changeset 50829

Timestamp:

05/07/2021 11:17:33 PM (3 years ago)

Author:

joedolson

Message:

Media: Remove infinite scroll from media library and modal.

Replace infinitely autoloading behavior on scroll with a user-controlled load more button. Fix a long standing accessibility issue in the media library. Infinite scroll poses a wide range of problems for accessibility, usability, and performance.

This change modifies the library to load 40 items in the initial view, with a load more button to load the next 40 items and a button to move focus from the load more region to the first of the most recently added items.

The text for communicating the jump target was broadly discussed, agreeing that the text incorporated here would most concisely and clearly convey the purpose of the button, and any further detail is learnable from use.

Props afercia, adamsilverstein, joedolson, audrasjb, francina
Fixes #50105. See #40330.

Location:

trunk/src

Files:

• js/media/models/attachments.js (modified) (1 diff)
• js/media/models/query.js (modified) (1 diff)
• js/media/views/attachments.js (modified) (6 diffs)
• js/media/views/attachments/browser.js (modified) (9 diffs)
• wp-admin/css/media.css (modified) (2 diffs)
• wp-admin/includes/ajax-actions.php (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (4 diffs)
• wp-includes/media.php (modified) (2 diffs)

trunk/src/js/media/models/attachments.js

@@ -349 +349 @@
     },
     /**
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
      * A custom Ajax-response parser.
      *
      * See trac ticket #24753
      *
-     * @param {Object|Array} resp The raw response Object/Array.
+     * Called automatically by Backbone whenever a collection's models are returned
+     * by the server, in fetch. The default implementation is a no-op, simply
+     * passing through the JSON response. We override this to add attributes to
+     * the collection items.
+     *
+     * Since WordPress 5.5, 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( resp, xhr ) {
-        if ( ! _.isArray( resp ) ) {
-            resp = [resp];
-        }
-
-        return _.map( resp, function( attrs ) {
+    parse: function( response, xhr ) {
+        if ( ! _.isArray( response.attachments ) ) {
+            response = [response.attachments];
+        }
+
+        this.totalAttachments = parseInt( response.totalAttachments, 10 );
+
+        return _.map( response.attachments, function( attrs ) {
             var id, attachment, newAttributes;
 

trunk/src/js/media/models/query.js

@@ -113 +113 @@
         options.remove = false;
 
-        return this._more = this.fetch( options ).done( function( resp ) {
-            if ( _.isEmpty( resp ) || -1 === this.args.posts_per_page || resp.length < this.args.posts_per_page ) {
+        return this._more = this.fetch( options ).done( function( response ) {
+            // Since WordPress 5.5, the response returns the attachments under `response.attachments`.
+            var attachments = response.attachments;
+
+            if ( _.isEmpty( attachments ) || -1 === this.args.posts_per_page || attachments.length < this.args.posts_per_page ) {
                 query._hasMore = false;
             }

trunk/src/js/media/views/attachments.js

@@ -1 +1 @@
 var View = wp.media.View,
     $ = jQuery,
-    Attachments;
+    Attachments,
+    infiniteScrolling = wp.media.view.settings.infiniteScrolling;
 
 Attachments = View.extend(/** @lends wp.media.view.Attachments.prototype */{
@@ -36 +37 @@
 
         /**
+
+
          * @param refreshSensitivity The time in milliseconds to throttle the scroll
          *                           handler.
@@ -50 +53 @@
          */
         _.defaults( this.options, {
+
             refreshSensitivity: wp.media.isTouchDevice ? 300 : 200,
             refreshThreshold:   3,
@@ -85 +89 @@
         this.controller.on( 'library:selection:add', this.attachmentFocus, this );
 
-        // Throttle the scroll handler and bind this.
-        this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
-
-        this.options.scrollElement = this.options.scrollElement || this.el;
-        $( this.options.scrollElement ).on( 'scroll', this.scroll );
+        if ( this.options.infiniteScrolling ) {
+            // Throttle the scroll handler and bind this.
+            this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
+
+            this.options.scrollElement = this.options.scrollElement || this.el;
+            $( this.options.scrollElement ).on( 'scroll', this.scroll );
+        }
 
         this.initSortable();
@@ -388 +394 @@
         } else {
             this.views.unset();
-            this.collection.more().done( this.scroll );
+            if ( this.options.infiniteScrolling ) {
+                this.collection.more().done( this.scroll );
+            }
         }
     },
@@ -401 +409 @@
      */
     ready: function() {
-        this.scroll();
+        if ( this.options.infiniteScrolling ) {
+            this.scroll();
+        }
     },
 

trunk/src/js/media/views/attachments/browser.js

@@ -3 +3 @@
     l10n = wp.media.view.l10n,
     $ = jQuery,
-    AttachmentsBrowser;
+    AttachmentsBrowser,
+    infiniteScrolling = wp.media.view.settings.infiniteScrolling,
+    __ = wp.i18n.__,
+    sprintf = wp.i18n.sprintf;
 
 /**
@@ -69 +72 @@
         }
 
-
         // Add a heading before the attachments list.
         this.createAttachmentsHeading();
 
-        // Create the list of attachments.
-        this.createAttachments();
+        // Create the attachments wrapper view.
+        this.createAttachmentsWrapperView();
+
+        if ( ! infiniteScrolling ) {
+            this.$el.addClass( 'has-load-more' );
+            this.createLoadMoreView();
+        }
 
         // For accessibility reasons, place the normal sidebar after the attachments, see ticket #36909.
@@ -92 +99 @@
 
         this.collection.on( 'add remove reset', this.updateContent, this );
+
+
+
+
 
         // The non-cached or cached attachments query has completed.
@@ -107 +118 @@
      */
     announceSearchResults: _.debounce( function() {
-        var count;
+        var count,
+            /* translators: Accessibility text. %d: Number of attachments found in a search. */
+            mediaFoundHasMoreResultsMessage = __( 'Number of media items displayed: %d. Click load more for more results.' );
+
+        if ( infiniteScrolling ) {
+            /* translators: Accessibility text. %d: Number of attachments found in a search. */
+            mediaFoundHasMoreResultsMessage = __( 'Number of media items displayed: %d. Scroll the page for more results.' );
+        }
 
         if ( this.collection.mirroring.args.s ) {
@@ -118 +136 @@
 
             if ( this.collection.hasMore() ) {
-                wp.a11y.speak( l10n.mediaFoundHasMoreResults.replace( '%d', count ) );
+                wp.a11y.speak( .replace( '%d', count ) );
                 return;
             }
@@ -393 +411 @@
 
         if ( this.controller.isModeActive( 'grid' ) ) {
+
             noItemsView = view.attachmentsNoResults;
         } else {
+
             noItemsView = view.uploader;
         }
@@ -434 +454 @@
     },
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     createAttachments: function() {
         this.attachments = new wp.media.view.Attachments({
@@ -452 +489 @@
         this.controller.on( 'attachment:details:shift-tab', _.bind( this.attachments.restoreFocus, this.attachments ) );
 
-        this.views.add( this.attachments );
-
+        this.views.add( '.attachments-wrapper', this.attachments );
 
         if ( this.controller.isModeActive( 'grid' ) ) {
@@ -466 +502 @@
             this.views.add( this.attachmentsNoResults );
         }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     },
 

trunk/src/wp-admin/css/media.css

@@ -421 +421 @@
 .media-frame.mode-grid,
 .media-frame.mode-grid .media-frame-content,
-.media-frame.mode-grid .attachments-browser .attachments,
+.media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
+.media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
 .media-frame.mode-grid .uploader-inline-content {
     position: static;
@@ -499 +500 @@
 }
 
-.media-frame.mode-select .attachments-browser.fixed .attachments {
+.media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
+.media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
     position: relative;
     top: 94px; /* prevent jumping up when the toolbar becomes fixed */

trunk/src/wp-admin/includes/ajax-actions.php

@@ -2994 +2994 @@
     $posts = array_filter( $posts );
 
-    wp_send_json_success( $posts );
+    $result = array(
+        'attachments'      => $posts,
+        'totalAttachments' => $query->found_posts,
+    );
+
+    wp_send_json_success( $result );
 }
 

trunk/src/wp-includes/css/media-views.css

@@ -1189 +1189 @@
 }
 
-.attachments-browser .attachments,
+.attachments-browser:not(.has-load-more) .attachments,
+.attachments-browser.has-load-more .attachments-wrapper,
 .attachments-browser .uploader-inline {
     position: absolute;
@@ -1266 +1267 @@
 .attachments-browser .no-media {
     padding: 2em 0 0 2em;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 }
 
@@ -2819 +2910 @@
         display: none;
     }
+
+
+
+
+
+
 }
 
@@ -2827 +2924 @@
         padding-top: 44px;
     }
+
+
+
+
+
+
 }
 

trunk/src/wp-includes/media.php

@@ -4307 +4307 @@
     }
 
+
+
+
+
+
+
+
+
+
     $settings = array(
-        'tabs'             => $tabs,
-        'tabUrl'           => add_query_arg( array( 'chromeless' => true ), admin_url( 'media-upload.php' ) ),
-        'mimeTypes'        => wp_list_pluck( get_post_mime_types(), 0 ),
+        'tabs'             => $tabs,
+        'tabUrl'           => add_query_arg( array( 'chromeless' => true ), admin_url( 'media-upload.php' ) ),
+        'mimeTypes'        => wp_list_pluck( get_post_mime_types(), 0 ),
         /** This filter is documented in wp-admin/includes/media.php */
-        'captions'         => ! apply_filters( 'disable_captions', '' ),
-        'nonce'            => array(
+        'captions'         => ! apply_filters( 'disable_captions', '' ),
+        'nonce'            => array(
             'sendToEditor' => wp_create_nonce( 'media-send-to-editor' ),
         ),
-        'post'             => array(
+        'post'             => array(
             'id' => 0,
         ),
-        'defaultProps'     => $props,
-        'attachmentCounts' => array(
+        'defaultProps'     => $props,
+        'attachmentCounts' => array(
             'audio' => ( $show_audio_playlist ) ? 1 : 0,
             'video' => ( $show_video_playlist ) ? 1 : 0,
         ),
-        'oEmbedProxyUrl'   => rest_url( 'oembed/1.0/proxy' ),
-        'embedExts'        => $exts,
-        'embedMimes'       => $ext_mimes,
-        'contentWidth'     => $content_width,
-        'months'           => $months,
-        'mediaTrash'       => MEDIA_TRASH ? 1 : 0,
+        'oEmbedProxyUrl'    => rest_url( 'oembed/1.0/proxy' ),
+        'embedExts'         => $exts,
+        'embedMimes'        => $ext_mimes,
+        'contentWidth'      => $content_width,
+        'months'            => $months,
+        'mediaTrash'        => MEDIA_TRASH ? 1 : 0,
+        'infiniteScrolling' => ( $infinite_scrolling ) ? 1 : 0,
     );
 
@@ -4413 +4423 @@
         'searchMediaLabel'            => __( 'Search media' ),          // Backward compatibility pre-5.3.
         'searchMediaPlaceholder'      => __( 'Search media items...' ), // Placeholder (no ellipsis), backward compatibility pre-5.3.
+
         'mediaFound'                  => __( 'Number of media items found: %d' ),
-        'mediaFoundHasMoreResults'    => __( 'Number of media items displayed: %d. Scroll the page for more results.' ),
         'noMedia'                     => __( 'No media items found.' ),
         'noMediaTryNewSearch'         => __( 'No media items found. Try a different search.' ),