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.


git-svn-id: https://develop.svn.wordpress.org/trunk@58081 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Aaron Jorbin 2024-05-02 17:03:36 +00:00
parent 91c546d47a
commit 530b73ca94
2 changed files with 79 additions and 11 deletions

View File

@ -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 );
};
@ -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 );

View File

@ -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,