Make WordPress Core

Changeset 38119


Ignore:
Timestamp:
07/20/2016 04:31:50 PM (8 years ago)
Author:
ocean90
Message:

Plugins: Improve Ajax search of new plugins.

Fixes a few accessibility issues, restores the "Search Results" tab and the search type selector, and improves compatibility with older browsers.

Props rahulsprajapati, swissspidy, adamsilverstein, ocean90
See #37233.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/ajax-actions.php

    r38118 r38119  
    38823882    ob_start();
    38833883    $wp_list_table->display();
     3884    $status['count'] = (int) $wp_list_table->get_pagination_arg( 'total_items' );
    38843885    $status['items'] = ob_get_clean();
    38853886
  • trunk/src/wp-admin/includes/class-wp-plugin-install-list-table.php

    r38071 r38119  
    286286    </ul>
    287287
    288     <?php install_search_form( isset( $views['plugin-install-search'] ) ); ?>
     288    <?php install_search_form(); ?>
    289289</div>
    290290<?php
  • trunk/src/wp-admin/includes/plugin-install.php

    r38025 r38119  
    215215    <?php display_plugins_table(); ?>
    216216
     217    <div class="plugins-popular-tags-wrapper">
    217218    <h2><?php _e( 'Popular tags' ) ?></h2>
    218219    <p><?php _e( 'You may also browse based on the most popular tags in the Plugin Directory:' ) ?></p>
     
    240241        echo wp_generate_tag_cloud($tags, array( 'single_text' => __('%s plugin'), 'multiple_text' => __('%s plugins') ) );
    241242    }
    242     echo '</p><br class="clear" />';
    243 }
    244 
    245 /**
    246  * Display search form for searching plugins.
     243    echo '</p><br class="clear" /></div>';
     244}
     245
     246/**
     247 * Displays a search form for searching plugins.
    247248 *
    248249 * @since 2.7.0
    249  *
    250  * @param bool $type_selector
    251  */
    252 function install_search_form( $type_selector = true ) {
    253     $type = isset($_REQUEST['type']) ? wp_unslash( $_REQUEST['type'] ) : 'term';
    254     $term = isset($_REQUEST['s']) ? wp_unslash( $_REQUEST['s'] ) : '';
    255     $input_attrs = '';
    256     $button_type = 'button screen-reader-text';
    257 
    258     // assume no $type_selector means it's a simplified search form
    259     if ( ! $type_selector ) {
    260         $input_attrs = 'class="wp-filter-search" placeholder="' . esc_attr__( 'Search Plugins' ) . '" ';
    261     }
    262 
     250 * @since 4.6.0 The `$type_selector` parameter was deprecated.
     251 *
     252 * @param bool $deprecated Not used.
     253 */
     254function install_search_form( $deprecated = true ) {
     255    $type = isset( $_REQUEST['type'] ) ? wp_unslash( $_REQUEST['type'] ) : 'term';
     256    $term = isset( $_REQUEST['s'] ) ? wp_unslash( $_REQUEST['s'] ) : '';
    263257    ?><form class="search-form search-plugins" method="get">
    264258        <input type="hidden" name="tab" value="search" />
    265         <?php if ( $type_selector ) : ?>
     259        <label class="screen-reader-text" for="typeselector"><?php _e( 'Search plugins by:' ); ?></label>
    266260        <select name="type" id="typeselector">
    267             <option value="term"<?php selected('term', $type) ?>><?php _e('Keyword'); ?></option>
    268             <option value="author"<?php selected('author', $type) ?>><?php _e('Author'); ?></option>
    269             <option value="tag"<?php selected('tag', $type) ?>><?php _ex('Tag', 'Plugin Installer'); ?></option>
     261            <option value="term"<?php selected( 'term', $type ); ?>><?php _e( 'Keyword' ); ?></option>
     262            <option value="author"<?php selected( 'author', $type ); ?>><?php _e( 'Author' ); ?></option>
     263            <option value="tag"<?php selected( 'tag', $type ); ?>><?php _ex( 'Tag', 'Plugin Installer' ); ?></option>
    270264        </select>
    271         <?php endif; ?>
    272         <label><span class="screen-reader-text"><?php _e('Search Plugins'); ?></span>
    273             <input type="search" name="s" value="<?php echo esc_attr($term) ?>" <?php echo $input_attrs; ?>/>
     265        <label><span class="screen-reader-text"><?php _e( 'Search Plugins' ); ?></span>
     266            <input type="search" name="s" value="<?php echo esc_attr( $term ) ?>" class="wp-filter-search" placeholder="<?php esc_attr_e( 'Search Plugins' ); ?>" />
    274267        </label>
    275         <?php submit_button( __( 'Search Plugins' ), $button_type, false, false, array( 'id' => 'search-submit' ) ); ?>
     268        <?php submit_button( __( 'Search Plugins' ), 'button hide-if-js', false, false, array( 'id' => 'search-submit' ) ); ?>
    276269    </form><?php
    277270}
  • trunk/src/wp-admin/js/updates.js

    r38091 r38119  
    15991599
    16001600    $( function() {
    1601         var $pluginFilter    = $( '#plugin-filter' ),
    1602             $bulkActionForm  = $( '#bulk-action-form' ),
    1603             $filesystemModal = $( '#request-filesystem-credentials-dialog' ),
    1604             $pluginSearch    = $( '.plugins-php .wp-filter-search' );
     1601        var $pluginFilter        = $( '#plugin-filter' ),
     1602            $bulkActionForm      = $( '#bulk-action-form' ),
     1603            $filesystemModal     = $( '#request-filesystem-credentials-dialog' ),
     1604            $pluginSearch        = $( '.plugins-php .wp-filter-search' ),
     1605            $pluginInstallSearch = $( '.plugin-install-php .wp-filter-search' );
    16051606
    16061607        /*
     
    20222023        } );
    20232024
     2025        if ( $pluginInstallSearch.length ) {
     2026            $pluginInstallSearch.attr( 'aria-describedby', 'live-search-desc' );
     2027        }
     2028
    20242029        /**
    20252030         * Handles changes to the plugin search box on the new-plugin page,
     
    20282033         * @since 4.6.0
    20292034         */
    2030         $( '.plugin-install-php .wp-filter-search' ).on( 'keyup search', _.debounce( function() {
    2031             var $form = $( '#plugin-filter' ).empty(),
    2032                 data  = _.extend( {
    2033                     _ajax_nonce: wp.updates.ajaxNonce,
    2034                     s:           $( this ).val(),
    2035                     tab:         'search',
    2036                     type:        $( '#typeselector' ).val(),
    2037                     pagenow:     pagenow
    2038                 }, { type: 'term' } );
    2039 
    2040             if ( wp.updates.searchTerm === data.s ) {
     2035        $pluginInstallSearch.on( 'keyup input', _.debounce( function( event, eventtype ) {
     2036            var $searchTab = $( '.plugin-install-search' ), data, searchLocation;
     2037
     2038            data = {
     2039                _ajax_nonce: wp.updates.ajaxNonce,
     2040                s:           event.target.value,
     2041                tab:         'search',
     2042                type:        $( '#typeselector' ).val(),
     2043                pagenow:     pagenow
     2044            };
     2045            searchLocation = location.href.split( '?' )[ 0 ] + '?' + $.param( _.omit( data, [ '_ajax_nonce', 'pagenow' ] ) );
     2046
     2047            // Clear on escape.
     2048            if ( 'keyup' === event.type && 27 === event.which ) {
     2049                event.target.value = '';
     2050            }
     2051
     2052            if ( wp.updates.searchTerm === data.s && 'typechange' !== eventtype ) {
    20412053                return;
    20422054            } else {
     2055                $pluginFilter.empty();
    20432056                wp.updates.searchTerm = data.s;
    20442057            }
    20452058
    2046             if ( history.pushState ) {
    2047                 history.pushState( null, '', location.href.split( '?' )[ 0 ] + '?' + $.param( _.omit( data, [ '_ajax_nonce', 'pagenow' ] ) ) );
     2059            if ( window.history && window.history.pushState ) {
     2060                window.history.pushState( null, '', searchLocation );
     2061            }
     2062
     2063            if ( ! $searchTab.length ) {
     2064                $searchTab = $( '<li class="plugin-install-search" />' )
     2065                    .append( $( '<a />', {
     2066                        'class': 'current',
     2067                        'href': searchLocation,
     2068                        'text': wp.updates.l10n.searchResultsLabel
     2069                    } ) );
     2070
     2071                $( '.wp-filter .filter-links .current' )
     2072                    .removeClass( 'current' )
     2073                    .parents( '.filter-links' )
     2074                    .prepend( $searchTab );
     2075
     2076                $pluginFilter.prev( 'p' ).remove();
     2077                $( '.plugins-popular-tags-wrapper' ).remove();
    20482078            }
    20492079
     
    20552085            wp.updates.searchRequest = wp.ajax.post( 'search-install-plugins', data ).done( function( response ) {
    20562086                $( 'body' ).removeClass( 'loading-content' );
    2057                 $form.append( response.items );
     2087                $pluginFilter.append( response.items );
    20582088                delete wp.updates.searchRequest;
     2089
     2090                if ( 0 === response.count ) {
     2091                    wp.a11y.speak( wp.updates.l10n.noPluginsFound );
     2092                } else {
     2093                    wp.a11y.speak( wp.updates.l10n.pluginsFound.replace( '%d', response.count ) );
     2094                }
    20592095            } );
    20602096        }, 500 ) );
    20612097
    2062         if ( $pluginSearch.length > 0 ) {
     2098        if ( $pluginSearch.length ) {
    20632099            $pluginSearch.attr( 'aria-describedby', 'live-search-desc' );
    20642100        }
     
    20882124            }
    20892125
    2090             if ( history.pushState ) {
    2091                 history.pushState( null, '', location.href.split( '?' )[ 0 ] + '?s=' + data.s );
     2126            if ( window.history && window.history.pushState ) {
     2127                window.history.pushState( null, '', location.href.split( '?' )[ 0 ] + '?s=' + data.s );
    20922128            }
    20932129
     
    21332169            event.preventDefault();
    21342170
    2135             $( 'input.wp-filter-search' ).trigger( 'search' );
     2171            $( 'input.wp-filter-search' ).trigger( 'input' );
    21362172        } );
    21372173
     
    21422178         */
    21432179        $( '#typeselector' ).on( 'change', function() {
    2144             $( 'input[name="s"]' ).trigger( 'search' );
     2180            var $search = $( 'input[name="s"]' );
     2181
     2182            if ( $search.val().length ) {
     2183                $search.trigger( 'input', 'typechange' );
     2184            }
    21452185        } );
    21462186
  • trunk/src/wp-admin/plugin-install.php

    r37914 r38119  
    7171'title'     => __('Overview'),
    7272'content'   =>
    73     '<p>' . sprintf(__('Plugins hook into WordPress to extend its functionality with custom features. Plugins are developed independently from the core WordPress application by thousands of developers all over the world. All plugins in the official <a href="%s" target="_blank">WordPress Plugin Directory</a> are compatible with the license WordPress uses. You can find new plugins to install by searching or browsing the Directory right here in your own Plugins section.'), 'https://wordpress.org/plugins/') . '</p>'
     73    '<p>' . sprintf( __('Plugins hook into WordPress to extend its functionality with custom features. Plugins are developed independently from the core WordPress application by thousands of developers all over the world. All plugins in the official <a href="%s" target="_blank">WordPress Plugin Directory</a> are compatible with the license WordPress uses.' ), 'https://wordpress.org/plugins/' ) . '</p>' .
     74    '<p>' . __( 'You can find new plugins to install by searching or browsing the directory right here in your own Plugins section.' ) . ' <span id="live-search-desc" class="hide-if-no-js">' . __( 'The search results will be updated as you type.' ) . '</span></p>'
     75
    7476) );
    7577get_current_screen()->add_help_tab( array(
  • trunk/src/wp-includes/script-loader.php

    r38090 r38119  
    610610                /* translators: %s: Search string */
    611611                'searchResults'              => __( 'Search results for &#8220;%s&#8221;' ),
     612                'searchResultsLabel'         => __( 'Search Results' ),
    612613                'noPlugins'                  => __( 'You do not appear to have any plugins available at this time.' ),
    613614                'noItemsSelected'            => __( 'Please select at least one item to perform this action on.' ),
  • trunk/tests/qunit/fixtures/updates.js

    r38075 r38119  
    33    'l10n': {
    44        'searchResults': 'Search results for &#8220;%s&#8221;',
     5        'searchResultsLabel': 'Search Results',
    56        'noPlugins': 'You do not appear to have any plugins available at this time.',
    67        'noItemsSelected': 'Please select at least one item to perform this action on.',
Note: See TracChangeset for help on using the changeset viewer.