<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[58081] trunk/src: Plugins: Show an admin notice on successful activation.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/58081">58081</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/58081","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>jorbin</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-05-02 17:03:36 +0000 (Thu, 02 May 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/changeset/57545">[57545]</a>.
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 <a href="https://core.trac.wordpress.org/ticket/60992">#60992</a>. See <a href="https://core.trac.wordpress.org/ticket/22316">#22316</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueueswpupdatesjs">trunk/src/js/_enqueues/wp/updates.js</a></li>
<li><a href="#trunksrcwpadmincsscommoncss">trunk/src/wp-admin/css/common.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueueswpupdatesjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/wp/updates.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/wp/updates.js 2024-05-02 16:27:32 UTC (rev 58080)
+++ trunk/src/js/_enqueues/wp/updates.js 2024-05-02 17:03:36 UTC (rev 58081)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1105,21 +1105,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.5.0
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @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.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @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.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> wp.updates.activatePluginSuccess = function( response ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var $message = $( '.plugin-card-' + response.slug + ', #plugin-information-footer' ).find( '.activating-message' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ isInModal = 'plugin-information-footer' === $message.parent().attr( 'id' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> buttonText = _x( 'Activated!', 'plugin' ),
</span><span class="cx" style="display: block; padding: 0 10px"> ariaLabel = sprintf(
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: %s: The plugin name. */
</span><span class="cx" style="display: block; padding: 0 10px"> '%s activated successfully.',
</span><span class="cx" style="display: block; padding: 0 10px"> response.pluginName
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ),
+ 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;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp.a11y.speak( __( 'Activation completed successfully.' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp.a11y.speak( __( 'Activation completed successfully. Some changes may not occur until you refresh the page.' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> $document.trigger( 'wp-plugin-activate-success', response );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $message
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1128,7 +1140,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .attr( 'aria-label', ariaLabel )
</span><span class="cx" style="display: block; padding: 0 10px"> .text( buttonText );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( isInModal ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> wp.updates.setCardButtonStatus(
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> status: 'activated-plugin',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1139,13 +1151,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ariaLabel: ariaLabel
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // 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 );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> setTimeout( function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $message.removeClass( 'activated-message' )
- .text( _x( 'Active', 'plugin' ) );
-
- if ( 'plugin-information-footer' === $message.parent().attr( 'id' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( isInModal ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> wp.updates.setCardButtonStatus(
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> status: 'plugin-active',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1159,6 +1184,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ } else {
+ $message.removeClass( 'activated-message' ).text( _x( 'Active', 'plugin' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }, 1000 );
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3254,6 +3281,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'undefined' !== typeof message.id && 'plugin-activated-successfully' === message.id ) {
+ wp.updates.addAdminNotice( message );
+ return;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if (
</span><span class="cx" style="display: block; padding: 0 10px"> 'undefined' !== typeof message.status &&
</span><span class="cx" style="display: block; padding: 0 10px"> 'undefined' !== typeof message.slug &&
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3486,5 +3518,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /**
+ * 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();
+ }
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> })( jQuery, window.wp, window._wpUpdatesSettings );
</span></span></pre></div>
<a id="trunksrcwpadmincsscommoncss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/common.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/common.css 2024-05-02 16:27:32 UTC (rev 58080)
+++ trunk/src/wp-admin/css/common.css 2024-05-02 17:03:36 UTC (rev 58081)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1513,6 +1513,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: -5px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+#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;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .update-message p:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .updating-message p:before,
</span><span class="cx" style="display: block; padding: 0 10px"> .updated-message p:before,
</span></span></pre>
</div>
</div>
</body>
</html>