Make WordPress Core


Ignore:
Timestamp:
05/07/2021 11:17:33 PM (4 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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media.php

    r50820 r50829  
    43074307    }
    43084308
     4309    /**
     4310     * Filters whether the Media Library grid has infinite scrolling. Default `false`.
     4311     *
     4312     * @since 5.7.0
     4313     *
     4314     * @param bool $value The filtered value, defaults to `false`.
     4315     */
     4316    $infinite_scrolling = apply_filters( 'media_library_infinite_scrolling', false );
     4317
    43094318    $settings = array(
    4310         'tabs'             => $tabs,
    4311         'tabUrl'           => add_query_arg( array( 'chromeless' => true ), admin_url( 'media-upload.php' ) ),
    4312         'mimeTypes'        => wp_list_pluck( get_post_mime_types(), 0 ),
     4319        'tabs'              => $tabs,
     4320        'tabUrl'            => add_query_arg( array( 'chromeless' => true ), admin_url( 'media-upload.php' ) ),
     4321        'mimeTypes'         => wp_list_pluck( get_post_mime_types(), 0 ),
    43134322        /** This filter is documented in wp-admin/includes/media.php */
    4314         'captions'         => ! apply_filters( 'disable_captions', '' ),
    4315         'nonce'            => array(
     4323        'captions'          => ! apply_filters( 'disable_captions', '' ),
     4324        'nonce'             => array(
    43164325            'sendToEditor' => wp_create_nonce( 'media-send-to-editor' ),
    43174326        ),
    4318         'post'             => array(
     4327        'post'              => array(
    43194328            'id' => 0,
    43204329        ),
    4321         'defaultProps'     => $props,
    4322         'attachmentCounts' => array(
     4330        'defaultProps'      => $props,
     4331        'attachmentCounts'  => array(
    43234332            'audio' => ( $show_audio_playlist ) ? 1 : 0,
    43244333            'video' => ( $show_video_playlist ) ? 1 : 0,
    43254334        ),
    4326         'oEmbedProxyUrl'   => rest_url( 'oembed/1.0/proxy' ),
    4327         'embedExts'        => $exts,
    4328         'embedMimes'       => $ext_mimes,
    4329         'contentWidth'     => $content_width,
    4330         'months'           => $months,
    4331         'mediaTrash'       => MEDIA_TRASH ? 1 : 0,
     4335        'oEmbedProxyUrl'    => rest_url( 'oembed/1.0/proxy' ),
     4336        'embedExts'         => $exts,
     4337        'embedMimes'        => $ext_mimes,
     4338        'contentWidth'      => $content_width,
     4339        'months'            => $months,
     4340        'mediaTrash'        => MEDIA_TRASH ? 1 : 0,
     4341        'infiniteScrolling' => ( $infinite_scrolling ) ? 1 : 0,
    43324342    );
    43334343
     
    44134423        'searchMediaLabel'            => __( 'Search media' ),          // Backward compatibility pre-5.3.
    44144424        'searchMediaPlaceholder'      => __( 'Search media items...' ), // Placeholder (no ellipsis), backward compatibility pre-5.3.
     4425        /* translators: %d: Number of attachments found in a search. */
    44154426        'mediaFound'                  => __( 'Number of media items found: %d' ),
    4416         'mediaFoundHasMoreResults'    => __( 'Number of media items displayed: %d. Scroll the page for more results.' ),
    44174427        'noMedia'                     => __( 'No media items found.' ),
    44184428        'noMediaTryNewSearch'         => __( 'No media items found. Try a different search.' ),
Note: See TracChangeset for help on using the changeset viewer.