Plugins: Improve Ajax search of installed plugins.

Fixes a few accessibility issues, tweaks the design of the search form to match other Ajax search fields and improves compatibility with older browsers.

See #37230.

git-svn-id: https://develop.svn.wordpress.org/trunk@38033 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Pascal Birchler 2016-07-11 21:49:30 +00:00
parent 1991213da7
commit 68cff6ac40
8 changed files with 75 additions and 7 deletions

View File

@ -582,6 +582,7 @@ code {
color: #555d66;
font-size: 14px;
font-weight: 400;
line-height: 1;
}
.wrap .add-new-h2, /* deprecated */

View File

@ -564,6 +564,16 @@ p.search-box {
margin: 0 4px 0 0;
}
.js.plugins-php .search-box .wp-filter-search {
margin: 0;
width: 280px;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
padding: 3px 5px;
height: 32px;
}
input[type="text"].ui-autocomplete-loading,
input[type="email"].ui-autocomplete-loading {
background-image: url(../images/loading.gif);

View File

@ -3810,6 +3810,7 @@ function wp_ajax_search_plugins() {
ob_start();
$wp_list_table->display();
$status['count'] = count( $wp_list_table->items );
$status['items'] = ob_get_clean();
wp_send_json_success( $status );

View File

@ -341,6 +341,37 @@ class WP_Plugins_List_Table extends WP_List_Table {
_e( 'You do not appear to have any plugins available at this time.' );
}
/**
* Display the search box.
*
* @since 4.6.0
* @access public
*
* @param string $text The search button text
* @param string $input_id The search input id
*/
public function search_box( $text, $input_id ) {
if ( empty( $_REQUEST['s'] ) && ! $this->has_items() ) {
return;
}
$input_id = $input_id . '-search-input';
if ( ! empty( $_REQUEST['orderby'] ) ) {
echo '<input type="hidden" name="orderby" value="' . esc_attr( $_REQUEST['orderby'] ) . '" />';
}
if ( ! empty( $_REQUEST['order'] ) ) {
echo '<input type="hidden" name="order" value="' . esc_attr( $_REQUEST['order'] ) . '" />';
}
?>
<p class="search-box">
<label class="screen-reader-text" for="<?php echo $input_id ?>"><?php echo $text; ?>:</label>
<input type="search" id="<?php echo $input_id ?>" class="wp-filter-search" name="s" value="<?php _admin_search_query(); ?>" placeholder="<?php echo esc_attr( 'Search installed plugins...' ); ?>"/>
<input type="submit" id="search-submit" class="button hide-if-js" value="<?php echo esc_attr( $text ); ?>">
</p>
<?php
}
/**
*
* @global string $status

View File

@ -1584,7 +1584,8 @@
$( function() {
var $pluginFilter = $( '#plugin-filter' ),
$bulkActionForm = $( '#bulk-action-form' ),
$filesystemModal = $( '#request-filesystem-credentials-dialog' );
$filesystemModal = $( '#request-filesystem-credentials-dialog' ),
$pluginSearch = $( '.plugins-php .wp-filter-search' );
/*
* Whether a user needs to submit filesystem credentials.
@ -1972,7 +1973,7 @@
*
* @since 4.6.0
*/
$( 'input.wp-filter-search, .wp-filter input[name="s"]' ).on( 'keyup search', _.debounce( function() {
$( '.plugin-install-php .wp-filter-search' ).on( 'keyup search', _.debounce( function() {
var $form = $( '#plugin-filter' ).empty(),
data = _.extend( {
_ajax_nonce: wp.updates.ajaxNonce,
@ -1987,7 +1988,9 @@
wp.updates.searchTerm = data.s;
}
history.pushState( null, '', location.href.split( '?' )[0] + '?' + $.param( _.omit( data, '_ajax_nonce' ) ) );
if ( history.pushState ) {
history.pushState( null, '', location.href.split( '?' )[ 0 ] + '?' + $.param( _.omit( data, '_ajax_nonce' ) ) );
}
if ( 'undefined' !== typeof wp.updates.searchRequest ) {
wp.updates.searchRequest.abort();
@ -2001,25 +2004,36 @@
} );
}, 500 ) );
if ( $pluginSearch.length > 0 ) {
$pluginSearch.attr( 'aria-describedby', 'live-search-desc' );
}
/**
* Handles changes to the plugin search box on the Installed Plugins screen,
* searching the plugin list dynamically.
*
* @since 4.6.0
*/
$( '#plugin-search-input' ).on( 'keyup search', _.debounce( function() {
$pluginSearch.on( 'keyup input', _.debounce( function( event ) {
var data = {
_ajax_nonce: wp.updates.ajaxNonce,
s: $( '<p />' ).html( $( this ).val() ).text()
s: event.target.value
};
// Clear on escape.
if ( 'keyup' === event.type && 27 === event.which ) {
event.target.value = '';
}
if ( wp.updates.searchTerm === data.s ) {
return;
} else {
wp.updates.searchTerm = data.s;
}
history.pushState( null, '', location.href.split( '?' )[0] + '?s=' + data.s );
if ( history.pushState ) {
history.pushState( null, '', location.href.split( '?' )[ 0 ] + '?s=' + data.s );
}
if ( 'undefined' !== typeof wp.updates.searchRequest ) {
wp.updates.searchRequest.abort();
@ -2045,6 +2059,12 @@
$( 'body' ).removeClass( 'loading-content' );
$bulkActionForm.append( response.items );
delete wp.updates.searchRequest;
if ( 0 === response.count ) {
wp.a11y.speak( wp.updates.l10n.noPluginsFound );
} else {
wp.a11y.speak( wp.updates.l10n.pluginsFound.replace( '%d', response.count ) );
}
} );
}, 500 ) );

View File

@ -371,6 +371,7 @@ get_current_screen()->add_help_tab( array(
'title' => __('Overview'),
'content' =>
'<p>' . __('Plugins extend and expand the functionality of WordPress. Once a plugin is installed, you may activate it or deactivate it here.') . '</p>' .
'<p>' . __( 'The search for installed plugins will search for terms in their name, description, or author.' ) . ' <span id="live-search-desc" class="hide-if-no-js">' . __( 'The search results will be updated as you type.' ) . '</span></p>' .
'<p>' . sprintf(
/* translators: %s: WordPress Plugin Directory URL */
__( 'If you would like to see more plugins to choose from, click on the &#8220;Add New&#8221; button and you will be able to browse or search for additional plugins from the <a href="%s" target="_blank">WordPress.org Plugin Directory</a>. Plugins in the WordPress.org Plugin Directory are designed and developed by third parties, and are compatible with the license WordPress uses. Oh, and they&#8217;re free!' ),

View File

@ -653,6 +653,8 @@ function wp_default_scripts( &$scripts ) {
'activateTheme' => is_network_admin() ? __( 'Network Enable' ) : __( 'Activate' ),
'activateImporter' => __( 'Activate importer' ),
'unknownError' => __( 'An unknown error occured' ),
'pluginsFound' => __( 'Number of plugins found: %d' ),
'noPluginsFound' => __( 'No plugins found. Try a different search.' ),
),
) );

View File

@ -39,7 +39,9 @@ window._wpUpdatesSettings = {
'activatePlugin': 'Activate',
'activateTheme': 'Activate',
'activateImporter': 'Activate importer',
'unknownError': 'An unknown error occured'
'unknownError': 'An unknown error occured',
'pluginsFound': 'Number of plugins found: %d',
'noPluginsFound': 'No plugins found. Try a different search.'
}
};
window._wpUpdatesItemCounts = {