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.

Built from https://develop.svn.wordpress.org/branches/6.5@58083


git-svn-id: http://core.svn.wordpress.org/branches/6.5@57548 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -1514,6 +1514,25 @@ div.error {
     margin-top: -5px;
 }
 
+#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,
 .updated-message p:before,

wp-admin/css/common.css

@@ -1513,6 +1513,25 @@ div.error {
     margin-top: -5px;
 }
 
+#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,
 .updated-message p:before,

wp-admin/js/updates.js

@@ -1105,21 +1105,33 @@
 	 *
 	 * @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(
 				/* translators: %s: The plugin name. */
 				'%s activated successfully.',
 				response.pluginName
-			);
+			),
+			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.' ) );
+		wp.a11y.speak( __( 'Activation completed successfully. Some changes may not occur until you refresh the page.' ) );
 		$document.trigger( 'wp-plugin-activate-success', response );
 
 		$message
@@ -1128,7 +1140,7 @@
 			.attr( 'aria-label', ariaLabel )
 			.text( buttonText );
 
-		if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) {
+		if ( isInModal ) {
 			wp.updates.setCardButtonStatus(
 				{
 					status: 'activated-plugin',
@@ -1139,13 +1151,26 @@
 					ariaLabel: ariaLabel
 				}
 			);
+
+			// 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(
 					{
 						status: 'plugin-active',
@@ -1159,6 +1184,8 @@
 						)
 					}
 				);
+			} else {
+				$message.removeClass( 'activated-message' ).text( _x( 'Active', 'plugin' ) );
 			}
 		}, 1000 );
 	};
@@ -3226,6 +3253,11 @@
 				return;
 			}
 
+			if ( 'undefined' !== typeof message.id && 'plugin-activated-successfully' === message.id ) {
+				wp.updates.addAdminNotice( message );
+				return;
+			}
+
 			if (
 				'undefined' !== typeof message.status &&
 				'undefined' !== typeof message.slug &&
@@ -3458,5 +3490,22 @@
 				} );
 			}
 		);
+
+		/**
+		 * 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 );

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.5.3-alpha-58080';
+$wp_version = '6.5.3-alpha-58083';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.