Make WordPress Core

Changeset 58083


Ignore:
Timestamp:
05/02/2024 05:46:59 PM (7 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:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/6.5

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

    r57714 r58083  
    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 );
     
    32273254            }
    32283255
     3256            if ( 'undefined' !== typeof message.id && 'plugin-activated-successfully' === message.id ) {
     3257                wp.updates.addAdminNotice( message );
     3258                return;
     3259            }
     3260
    32293261            if (
    32303262                'undefined' !== typeof message.status &&
     
    34593491            }
    34603492        );
     3493
     3494        /**
     3495         * Click handler for page refresh link.
     3496         *
     3497         * @since 6.5.3
     3498         *
     3499         * @param {Event} event Event interface.
     3500         */
     3501        $document.on( 'click', '.refresh-page', function( event ) {
     3502            event.preventDefault();
     3503
     3504            if ( window.parent === window ) {
     3505                window.location.reload();
     3506            } else {
     3507                window.parent.location.reload();
     3508            }
     3509        } );
    34613510    } );
    34623511})( jQuery, window.wp, window._wpUpdatesSettings );
  • branches/6.5/src/wp-admin/css/common.css

    r57697 r58083  
    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.