Changeset 58083

Timestamp:

05/02/2024 05:46:59 PM (5 months ago)

Author:

jorbin

Message:

Plugins: Show an admin notice on successful activation.

Plugin activation on the Plugins > Add New screen is performed using AJAX, no longer performing redirects. This means that users will not see a newly activated plugin's menu items, admin notices, or other UI elements until the user refreshes or navigates to another screen. Without adequate messaging and direction, users may be unsure of what to do next.

This shows an admin notice when a plugin is activated from its plugin card or modal, informing the user that the plugin was activated, and that some changes may not occur until they refresh the page.

Follow-up to [57545].

Reviewed by joedolson.
Merges [58081] to the 6.5 branch.

Props costdev, jorbin, jeherve, flixos90, joedolson, ironprogrammer, audrasjb, alanfuller, kevinwhoffman, devsahadat, afragen, adrianduffell, azaozz, jason_the_adams, JeffPaul, webdevmattcrom, DrewAPicture, justlevine, stevejonesdev, benlk, roytanck.
Fixes #60992. See #22316.

Location:

branches/6.5

Files:

• . (modified) (1 prop)
• src/js/_enqueues/wp/updates.js (modified) (7 diffs)
• src/wp-admin/css/common.css (modified) (1 diff)

branches/6.5/src/js/_enqueues/wp/updates.js

@@ -1106 +1106 @@
      * @since 6.5.0
      *
-     * @param {Object} response             Response from the server.
-     * @param {string} response.slug        Slug of the activated plugin.
-     * @param {string} response.pluginName  Name of the activated plugin.
-     * @param {string} response.plugin      The plugin file, relative to the plugins directory.
+     * @param {Object} response            Response from the server.
+     * @param {string} response.slug       Slug of the activated plugin.
+     * @param {string} response.pluginName Name of the activated plugin.
+     * @param {string} response.plugin     The plugin file, relative to the plugins directory.
      */
     wp.updates.activatePluginSuccess = function( response ) {
         var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.activating-message' ),
+            isInModal = 'plugin-information-footer' === $message.parent().attr( 'id' ),
             buttonText = _x( 'Activated!', 'plugin' ),
             ariaLabel = sprintf(
@@ -1118 +1119 @@
                 '%s activated successfully.',
                 response.pluginName
-            );
-
-        wp.a11y.speak( __( 'Activation completed successfully.' ) );
+            ),
+            noticeData = {
+                id: 'plugin-activated-successfully',
+                className: 'notice-success',
+                message: sprintf(
+                    /* translators: %s: The refresh link's attributes. */
+                    __( 'Plugin activated. Some changes may not occur until you refresh the page. <a %s>Refresh Now</a>' ),
+                    'href="#" class="button button-secondary refresh-page"'
+                ),
+                slug: response.slug
+            },
+            noticeTarget;
+
+        wp.a11y.speak( __( 'Activation completed successfully. Some changes may not occur until you refresh the page.' ) );
         $document.trigger( 'wp-plugin-activate-success', response );
 
@@ -1129 +1141 @@
             .text( buttonText );
 
-        if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) {
+        if ( isInModal ) {
             wp.updates.setCardButtonStatus(
                 {
@@ -1140 +1152 @@
                 }
             );
+
+            // Add a notice to the modal's footer.
+            $message.replaceWith( wp.updates.adminNotice( noticeData ) );
+
+            // Send notice information back to the parent screen.
+            noticeTarget = window.parent === window ? null : window.parent;
+            $.support.postMessage = !! window.postMessage;
+            if ( false !== $.support.postMessage && null !== noticeTarget && -1 === window.parent.location.pathname.indexOf( 'index.php' ) ) {
+                noticeTarget.postMessage(
+                    JSON.stringify( noticeData ),
+                    window.location.origin
+                );
+            }
+        } else {
+            // Add a notice to the top of the screen.
+            wp.updates.addAdminNotice( noticeData );
         }
 
         setTimeout( function() {
-            $message.removeClass( 'activated-message' )
-            .text( _x( 'Active', 'plugin' ) );
-
-            if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) {
+            if ( isInModal ) {
                 wp.updates.setCardButtonStatus(
                     {
@@ -1160 +1185 @@
                     }
                 );
+            } else {
+                $message.removeClass( 'activated-message' ).text( _x( 'Active', 'plugin' ) );
             }
         }, 1000 );
@@ -3227 +3254 @@
             }
 
+            if ( 'undefined' !== typeof message.id && 'plugin-activated-successfully' === message.id ) {
+                wp.updates.addAdminNotice( message );
+                return;
+            }
+
             if (
                 'undefined' !== typeof message.status &&
@@ -3459 +3491 @@
             }
         );
+
+        /**
+         * Click handler for page refresh link.
+         *
+         * @since 6.5.3
+         *
+         * @param {Event} event Event interface.
+         */
+        $document.on( 'click', '.refresh-page', function( event ) {
+            event.preventDefault();
+
+            if ( window.parent === window ) {
+                window.location.reload();
+            } else {
+                window.parent.location.reload();
+            }
+        } );
     } );
 })( jQuery, window.wp, window._wpUpdatesSettings );

branches/6.5/src/wp-admin/css/common.css

@@ -1514 +1514 @@
 }
 
+#plugin-information-footer #plugin-activated-successfully {
+    margin-bottom: 0;
+}
+
+#plugin-information-footer #plugin-activated-successfully p {
+    display: flex;
+    gap: 1em;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+}
+
+#plugin-information-footer #plugin-activated-successfully .refresh-page {
+    flex-grow: 0;
+    line-height: 2.15384615;
+    min-height: 0;
+    margin-bottom: 0;
+}
+
 .update-message p:before,
 .updating-message p:before,