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].

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/trunk@58081


git-svn-id: http://core.svn.wordpress.org/trunk@57546 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

@@ -1112,14 +1112,26 @@
 	 */
 	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 );
 	};
@@ -3254,6 +3281,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 &&
@@ -3486,5 +3518,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.6-alpha-58079';
+$wp_version = '6.6-alpha-58081';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.