Make WordPress Core

Changeset 58081


Ignore:
Timestamp:
05/02/2024 05:03:36 PM (7 weeks 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].

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:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/wp/updates.js

    r58064 r58081  
    11061106     * @since 6.5.0
    11071107     *
    1108      * @param {Object} response             Response from the server.
    1109      * @param {string} response.slug        Slug of the activated plugin.
    1110      * @param {string} response.pluginName  Name of the activated plugin.
    1111      * @param {string} response.plugin      The plugin file, relative to the plugins directory.
     1108     * @param {Object} response            Response from the server.
     1109     * @param {string} response.slug       Slug of the activated plugin.
     1110     * @param {string} response.pluginName Name of the activated plugin.
     1111     * @param {string} response.plugin     The plugin file, relative to the plugins directory.
    11121112     */
    11131113    wp.updates.activatePluginSuccess = function( response ) {
    11141114        var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.activating-message' ),
     1115            isInModal = 'plugin-information-footer' === $message.parent().attr( 'id' ),
    11151116            buttonText = _x( 'Activated!', 'plugin' ),
    11161117            ariaLabel = sprintf(
     
    11181119                '%s activated successfully.',
    11191120                response.pluginName
    1120             );
    1121 
    1122         wp.a11y.speak( __( 'Activation completed successfully.' ) );
     1121            ),
     1122            noticeData = {
     1123                id: 'plugin-activated-successfully',
     1124                className: 'notice-success',
     1125                message: sprintf(
     1126                    /* translators: %s: The refresh link's attributes. */
     1127                    __( 'Plugin activated. Some changes may not occur until you refresh the page. <a %s>Refresh Now</a>' ),
     1128                    'href="#" class="button button-secondary refresh-page"'
     1129                ),
     1130                slug: response.slug
     1131            },
     1132            noticeTarget;
     1133
     1134        wp.a11y.speak( __( 'Activation completed successfully. Some changes may not occur until you refresh the page.' ) );
    11231135        $document.trigger( 'wp-plugin-activate-success', response );
    11241136
     
    11291141            .text( buttonText );
    11301142
    1131         if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) {
     1143        if ( isInModal ) {
    11321144            wp.updates.setCardButtonStatus(
    11331145                {
     
    11401152                }
    11411153            );
     1154
     1155            // Add a notice to the modal's footer.
     1156            $message.replaceWith( wp.updates.adminNotice( noticeData ) );
     1157
     1158            // Send notice information back to the parent screen.
     1159            noticeTarget = window.parent === window ? null : window.parent;
     1160            $.support.postMessage = !! window.postMessage;
     1161            if ( false !== $.support.postMessage && null !== noticeTarget && -1 === window.parent.location.pathname.indexOf( 'index.php' ) ) {
     1162                noticeTarget.postMessage(
     1163                    JSON.stringify( noticeData ),
     1164                    window.location.origin
     1165                );
     1166            }
     1167        } else {
     1168            // Add a notice to the top of the screen.
     1169            wp.updates.addAdminNotice( noticeData );
    11421170        }
    11431171
    11441172        setTimeout( function() {
    1145             $message.removeClass( 'activated-message' )
    1146             .text( _x( 'Active', 'plugin' ) );
    1147 
    1148             if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) {
     1173            if ( isInModal ) {
    11491174                wp.updates.setCardButtonStatus(
    11501175                    {
     
    11601185                    }
    11611186                );
     1187            } else {
     1188                $message.removeClass( 'activated-message' ).text( _x( 'Active', 'plugin' ) );
    11621189            }
    11631190        }, 1000 );
     
    32553282            }
    32563283
     3284            if ( 'undefined' !== typeof message.id && 'plugin-activated-successfully' === message.id ) {
     3285                wp.updates.addAdminNotice( message );
     3286                return;
     3287            }
     3288
    32573289            if (
    32583290                'undefined' !== typeof message.status &&
     
    34873519            }
    34883520        );
     3521
     3522        /**
     3523         * Click handler for page refresh link.
     3524         *
     3525         * @since 6.5.3
     3526         *
     3527         * @param {Event} event Event interface.
     3528         */
     3529        $document.on( 'click', '.refresh-page', function( event ) {
     3530            event.preventDefault();
     3531
     3532            if ( window.parent === window ) {
     3533                window.location.reload();
     3534            } else {
     3535                window.parent.location.reload();
     3536            }
     3537        } );
    34893538    } );
    34903539})( jQuery, window.wp, window._wpUpdatesSettings );
  • trunk/src/wp-admin/css/common.css

    r57697 r58081  
    15141514}
    15151515
     1516#plugin-information-footer #plugin-activated-successfully {
     1517    margin-bottom: 0;
     1518}
     1519
     1520#plugin-information-footer #plugin-activated-successfully p {
     1521    display: flex;
     1522    gap: 1em;
     1523    align-items: center;
     1524    justify-content: space-between;
     1525    margin: 0;
     1526}
     1527
     1528#plugin-information-footer #plugin-activated-successfully .refresh-page {
     1529    flex-grow: 0;
     1530    line-height: 2.15384615;
     1531    min-height: 0;
     1532    margin-bottom: 0;
     1533}
     1534
    15161535.update-message p:before,
    15171536.updating-message p:before,
Note: See TracChangeset for help on using the changeset viewer.