diff --git a/src/js/_enqueues/wp/updates.js b/src/js/_enqueues/wp/updates.js index bbb52a66a3..3371e84d27 100644 --- a/src/js/_enqueues/wp/updates.js +++ b/src/js/_enqueues/wp/updates.js @@ -443,7 +443,8 @@ * decorated with an abort() method. */ wp.updates.updatePlugin = function( args ) { - var $updateRow, $card, $message, message; + var $updateRow, $card, $message, message, + $adminBarUpdates = $( '#wp-admin-bar-updates' ); args = _.extend( { success: wp.updates.updatePluginSuccess, @@ -471,6 +472,8 @@ $card.removeClass( 'plugin-card-update-failed' ).find( '.notice.notice-error' ).remove(); } + $adminBarUpdates.addClass( 'spin' ); + if ( $message.html() !== __( 'Updating...' ) ) { $message.data( 'originaltext', $message.html() ); } @@ -499,7 +502,8 @@ * @param {string} response.newVersion New version of the plugin. */ wp.updates.updatePluginSuccess = function( response ) { - var $pluginRow, $updateMessage, newText; + var $pluginRow, $updateMessage, newText, + $adminBarUpdates = $( '#wp-admin-bar-updates' ); if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) { $pluginRow = $( 'tr[data-plugin="' + response.plugin + '"]' ) @@ -521,6 +525,8 @@ .addClass( 'button-disabled updated-message' ); } + $adminBarUpdates.removeClass( 'spin' ); + $updateMessage .attr( 'aria-label', @@ -553,7 +559,8 @@ * @param {string} response.errorMessage The error that occurred. */ wp.updates.updatePluginError = function( response ) { - var $card, $message, errorMessage; + var $card, $message, errorMessage, + $adminBarUpdates = $( '#wp-admin-bar-updates' ); if ( ! wp.updates.isValidResponse( response, 'update' ) ) { return; @@ -631,6 +638,8 @@ } ); } + $adminBarUpdates.removeClass( 'spin' ); + wp.a11y.speak( errorMessage, 'assertive' ); $document.trigger( 'wp-plugin-update-error', response ); diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 30a048ad5d..e6422db1cf 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -588,6 +588,11 @@ html:lang(he-il) .rtl #wpadminbar * { top: 2px; } +#wpadminbar #wp-admin-bar-updates.spin .ab-icon:before { + display: inline-block; + animation: rotation 2s infinite linear; +} + /** * Search */