sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updates: Improve bulk update failure notice

Browse Source 
When doing a bulk update, if there are failures the user needs to know about that. This makes it clearer that you can click on the notification to see more details, especially for screen reader users.

Fixes #37510.
Props  juhise, Ankit K Gupta, afercia, jorbin, ocean90. 



git-svn-id: https://develop.svn.wordpress.org/trunk@38185 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Aaron Jorbin 2016-08-03 22:23:50 +00:00
parent cc524820be
commit 10906c673f
3 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/wp-admin/css/common.css
View File

@ -3024,7 +3024,8 @@ img {
/* Metabox collapse arrow indicators */
.js .sidebar-name .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox .toggle-indicator:before {
.js .meta-box-sortables .postbox .toggle-indicator:before,
.bulk-action-notice .toggle-indicator:before {
content: "\f142";
display: inline-block;
font: normal 20px/1 dashicons;
@ -3035,7 +3036,8 @@ img {
}
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
content: "\f140";
}
@ -3065,6 +3067,12 @@ img {
text-indent: 1px; /* account for the dashicon alignment */
}
.bulk-action-notice .toggle-indicator:before {
line-height: 16px;
vertical-align: top;
color: #72777c;
}
.js .postbox .handlediv:focus {
-webkit-box-shadow: none;
box-shadow: none;

26
src/wp-admin/includes/update.php
View File

@ -634,7 +634,7 @@ function wp_print_admin_notice_templates() {
<div <# if ( data.id ) { #>id="{{ data.id }}"<# } #> class="notice {{ data.className }}"><p>{{{ data.message }}}</p></div>
</script>
<script id="tmpl-wp-bulk-updates-admin-notice" type="text/html">
<div id="{{ data.id }}" class="notice <# if ( data.errors ) { #>notice-error<# } else { #>notice-success<# } #>">
<div id="{{ data.id }}" class="{{ data.className }} notice <# if ( data.errors ) { #>notice-error<# } else { #>notice-success<# } #>">
<p>
<# if ( data.successes ) { #>
<# if ( 1 === data.successes ) { #>
@ -664,25 +664,25 @@ function wp_print_admin_notice_templates() {
<# } #>
<# } #>
<# if ( data.errors ) { #>
<# if ( 1 === data.errors ) { #>
<button class="button-link">
<button class="button-link bulk-action-errors-collapsed" aria-expanded="false">
<# if ( 1 === data.errors ) { #>
<?php
/* translators: %s: Number of failures */
printf( __( '%s failure.' ), '{{ data.errors }}' );
/* translators: %s: Number of failed updates */
printf( __( '%s update failed.' ), '{{ data.errors }}' );
?>
</button>
<# } else { #>
<button class="button-link">
<# } else { #>
<?php
/* translators: %s: Number of failures */
printf( __( '%s failures.' ), '{{ data.errors }}' );
/* translators: %s: Number of failed updates */
printf( __( '%s updates failed.' ), '{{ data.errors }}' );
?>
</button>
<# } #>
<# } #>
<span class="screen-reader-text"><?php _e( 'Show more details' ); ?></span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<# } #>
</p>
<# if ( data.errors ) { #>
<ul class="hidden">
<ul class="bulk-action-errors hidden">
<# _.each( data.errorMessages, function( errorMessage ) { #>
<li>{{ errorMessage }}</li>
<# } ); #>

18
src/wp-admin/js/updates.js
View File

@ -526,7 +526,7 @@
$card.removeClass( 'plugin-card-install-failed' ).find( '.notice.notice-error' ).remove();
$document.trigger( 'wp-plugin-installing', args );
return wp.updates.ajax( 'install-plugin', args );
};
@ -718,7 +718,7 @@
wp.a11y.speak( wp.updates.l10n.deleting, 'polite' );
$document.trigger( 'wp-plugin-deleting', args );
return wp.updates.ajax( 'delete-plugin', args );
};
@ -1043,7 +1043,7 @@
$( '.install-theme-info, [data-slug="' + args.slug + '"]' ).removeClass( 'theme-install-failed' ).find( '.notice.notice-error' ).remove();
$document.trigger( 'wp-theme-installing', args );
return wp.updates.ajax( 'install-theme', args );
};
@ -1174,7 +1174,7 @@
$( '.theme-info .update-message' ).remove();
$document.trigger( 'wp-theme-deleting', args );
return wp.updates.ajax( 'delete-theme', args );
};
@ -1982,7 +1982,7 @@
$bulkActionForm.find( '.manage-column [type="checkbox"]' ).prop( 'checked', false );
$document.trigger( 'wp-' + type + '-bulk-' + bulkAction, itemsSelected );
// Find all the checkboxes which have been checked.
itemsSelected.each( function( index, element ) {
var $checkbox = $( element ),
@ -2023,6 +2023,7 @@
wp.updates.addAdminNotice( {
id: 'bulk-action-notice',
className: 'bulk-action-notice',
successes: success,
errors: error,
errorMessages: errorMessages,
@ -2030,7 +2031,12 @@
} );
$bulkActionNotice = $( '#bulk-action-notice' ).on( 'click', 'button', function() {
$bulkActionNotice.find( 'ul' ).toggleClass( 'hidden' );
// $( this ) is the clicked button, no need to get it again.
$( this )
.toggleClass( 'bulk-action-errors-collapsed' )
.attr( 'aria-expanded', ! $( this ).hasClass( 'bulk-action-errors-collapsed' ) );
// Show the errors list.
$bulkActionNotice.find( '.bulk-action-errors' ).toggleClass( 'hidden' );
} );
if ( error > 0 && ! wp.updates.queue.length ) {