Changeset 35681

Timestamp:

11/18/2015 08:09:21 PM (8 years ago)

Author:

wonderboymusic

Message:

Plugins: add dismissible notices to update failures.

Adds unit test.

Props afercia, mehulkaklotar.
Fixes #33465.

Location:

trunk/src

Files:

• wp-admin/css/list-tables.css (modified) (1 diff)
• wp-admin/js/common.js (modified) (2 diffs)
• wp-admin/js/updates.js (modified) (2 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/css/list-tables.css

@@ -1579 +1579 @@
 }
 
+.plugin-card-update-failed .update-now {
+    font-weight: 600;
+}
+
+.plugin-card-update-failed .notice-error {
+    margin: 0;
+    padding-left: 16px;
+    -webkit-box-shadow: 0 -1px 0 #dedede;
+    box-shadow: 0 -1px 0 #dedede;
+}
+
+.plugin-card-update-failed .plugin-card-bottom {
+    display: none;
+}
+
 .plugin-card .column-rating {
     line-height: 23px;

trunk/src/wp-admin/js/common.js

@@ -401 +401 @@
 
     // Make notices dismissible
-    $( '.notice.is-dismissible' ).each( function() {
-        var $this = $( this ),
-            $button = $( '<button type="button" class="notice-dismiss"><span class="screen-reader-text"></span></button>' ),
-            btnText = commonL10n.dismiss || '';
-
-        // Ensure plain text
-        $button.find( '.screen-reader-text' ).text( btnText );
-
-        $this.append( $button );
-
-        $button.on( 'click.wp-dismiss-notice', function( event ) {
-            event.preventDefault();
-            $this.fadeTo( 100 , 0, function() {
-                $(this).slideUp( 100, function() {
-                    $(this).remove();
+    function makeNoticesDismissible() {
+        $( '.notice.is-dismissible' ).each( function() {
+            var $el = $( this ),
+                $button = $( '<button type="button" class="notice-dismiss"><span class="screen-reader-text"></span></button>' ),
+                btnText = commonL10n.dismiss || '';
+
+            // Ensure plain text
+            $button.find( '.screen-reader-text' ).text( btnText );
+            $button.on( 'click.wp-dismiss-notice', function( event ) {
+                event.preventDefault();
+                $el.fadeTo( 100, 0, function() {
+                    $el.slideUp( 100, function() {
+                        $el.remove();
+                    });
                 });
             });
-        });
+
+            $el.append( $button );
+        });
+    }
+
+    $document.on( 'wp-plugin-update-error', function() {
+        makeNoticesDismissible();
     });
 
@@ -896 +901 @@
     setPinMenu();
     currentMenuItemHasPopup();
+    makeNoticesDismissible();
 
     $document.on( 'wp-pin-menu wp-window-resized.pin-menu postboxes-columnchange.pin-menu postbox-toggled.pin-menu wp-collapse-menu.pin-menu wp-scroll-start.pin-menu', setPinMenu );

trunk/src/wp-admin/js/updates.js

@@ -147 +147 @@
      */
     wp.updates.updatePlugin = function( plugin, slug ) {
-        var $message, name;
+        var $message, name,
+            $card = $( '.plugin-card-' + slug );
+
         if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) {
             $message = $( '[data-slug="' + slug + '"]' ).next().find( '.update-message' );
         } else if ( 'plugin-install' === pagenow ) {
-            $message = $( '.plugin-card-' + slug ).find( '.update-now' );
+            $message = $card.find( '.update-now' );
             name = $message.data( 'name' );
             $message.attr( 'aria-label', wp.updates.l10n.updatingLabel.replace( '%s', name ) );
+            // Remove previous error messages, if any.
+            $card.removeClass( 'plugin-card-update-failed' ).find( '.notice.notice-error' ).remove();
         }
 
@@ -249 +253 @@
      */
     wp.updates.updateError = function( response ) {
-        var $message, name;
+        var $card = $( '.plugin-card-' + response.slug ),
+            $message,
+            $button,
+            name,
+            error_message;
+
         wp.updates.updateDoneSuccessfully = false;
+
         if ( response.errorCode && response.errorCode == 'unable_to_connect_to_filesystem' && wp.updates.shouldRequestFilesystemCredentials ) {
             wp.updates.credentialError( response, 'update-plugin' );
             return;
         }
+
+        error_message = wp.updates.l10n.updateFailed.replace( '%s', response.error );
+
         if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) {
             $message = $( '[data-slug="' + response.slug + '"]' ).next().find( '.update-message' );
+            $message.html( error_message ).removeClass( 'updating-message' );
         } else if ( 'plugin-install' === pagenow ) {
-            $message = $( '.plugin-card-' + response.slug ).find( '.update-now' );
-
-            name = $message.data( 'name' );
-            $message.attr( 'aria-label', wp.updates.l10n.updateFailedLabel.replace( '%s', name ) );
-        }
-        $message.removeClass( 'updating-message' );
-        $message.html( wp.updates.l10n.updateFailed.replace( '%s', response.error ) );
-        wp.a11y.speak( wp.updates.l10n.updateFailed );
+            $button = $card.find( '.update-now' );
+            name = $button.data( 'name' );
+
+            $card
+                .addClass( 'plugin-card-update-failed' )
+                .append( '<div class="notice notice-error is-dismissible"><p>' + error_message + '</p></div>' );
+
+            $button
+                .attr( 'aria-label', wp.updates.l10n.updateFailedLabel.replace( '%s', name ) )
+                .html( wp.updates.l10n.updateFailedShort ).removeClass( 'updating-message' );
+
+            $card.on( 'click', '.notice.is-dismissible .notice-dismiss', function() {
+                // Use same delay as the total duration of the notice fadeTo + slideUp animation.
+                setTimeout( function() {
+                    $card
+                        .removeClass( 'plugin-card-update-failed' )
+                        .find( '.column-name a' ).focus();
+                }, 200 );
+            });
+        }
+
+        wp.a11y.speak( error_message, 'assertive' );
 
         /*

trunk/src/wp-includes/script-loader.php

@@ -584 +584 @@
                 'updating'          => __( 'Updating...' ), // no ellipsis
                 'updated'           => __( 'Updated!' ),
+                'updateFailedShort' => __( 'Update Failed!' ),
                 /* translators: Error string for a failed update */
                 'updateFailed'      => __( 'Update Failed: %s' ),