wordpress-develop icon indicating copy to clipboard operation
wordpress-develop copied to clipboard

Plugins: Show an admin notice on successful activation.

Open costdev opened this issue 1 year ago • 9 comments

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.

This also displays the admin notice on Plugins > Installed plugins when a dependency is installed by modal from its dependent's plugin row.

The benefits of this approach are:

  • AJAX-based activation remains as was intended by the Plugin Dependencies feature, and originally intended by the Shiny Updates feature.
  • The user is informed that changes may not occur until the page is refreshed.
  • The user's flow isn't assumed, and the user retains the choice of whether to continue installing and activating plugins, or to refresh the page.

Trac ticket: https://core.trac.wordpress.org/ticket/60992

costdev avatar Apr 17 '24 21:04 costdev

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • The Plugin and Theme Directories cannot be accessed within Playground.
  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance, it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

github-actions[bot] avatar Apr 17 '24 22:04 github-actions[bot]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props costdev, jorbin, jeherve.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions[bot] avatar Apr 17 '24 23:04 github-actions[bot]

The notice is displayed nicely, whether you're activating via the main page or via the modal. However, I do not think it will be noticed when folks install plugins via the modal, since they first have to exit the modal and scroll up to the top of the page:

https://github.com/WordPress/wordpress-develop/assets/426388/67d6ac66-abe5-4b7f-9193-10d53d720919

Maybe the notice should appear in the modal in this scenario?

jeherve avatar Apr 18 '24 09:04 jeherve

Thanks for the feedback @jeherve!

By default, adding an admin notice to the bottom of the modal means it'll appear in place of the disabled Active button, shown below.

@karmatosed Would you have time to offer your thoughts on whether this is fine, or if we should make some CSS tweaks so that the notice and the disabled Active button appear side-by-side?

image

costdev avatar Apr 18 '24 11:04 costdev

With the latest changes:

  1. A notice is added to the top of Plugins > Add New, with a button to refresh the page.

image

  1. A notice is added to the bottom of a plugin's modal, which replaces the previous Active button, and the notice contains a button to refresh the page.

image

A notice has not been added to the plugin's card as this felt noisy in testing. The notices detailed above are definitely needed, so these were kept.

costdev avatar Apr 24 '24 00:04 costdev

This tests well for me.

A notice is added to the bottom of a plugin's modal, which replaces the previous Active button, and the notice contains a button to refresh the page.

What would you think about aligning the button to the right, so it effectively replaces the "Active" button?

jeherve avatar Apr 25 '24 09:04 jeherve

@jeherve What would you think about aligning the button to the right, so it effectively replaces the "Active" button?

I've pushed a commit that aligns the button to the right of the notice. This keeps it in context with the notice's message. Let me know what you think. 🙂

costdev avatar Apr 25 '24 11:04 costdev

I like that, it looks better imo:

Screenshot 2024-04-25 at 15 00 23 Screenshot 2024-04-25 at 14 59 58

I think we could do one last thing with the non-modal view, to address this feedback from @aaronjorbin on the ticket:

I'm not sure that the notice at the top of the page is going to be sufficient to inform users. It feels easy to miss, especially on small screens where you are most likely to have scrolled down the page. I wonder if it would be best to be brought inline to the card? -- https://core.trac.wordpress.org/ticket/60992#comment:60

Either we could bring the notice to the card, or at least scroll up the page?

jeherve avatar Apr 25 '24 13:04 jeherve

@jeherve I spoke to Aaron about not adding a notice to the plugin card and he agreed that having a notice in three places would be quite noisy. Scrolling up the page might frustrate users who didn't want to have to scroll back down 😅. Ideally, with the admin redesign, we'll have a snackbar/toast-style notice which should improve the UX here.

@aaronjorbin Are you happy with how things are shown in this comment, or is there anything else you'd like to see?

costdev avatar Apr 25 '24 15:04 costdev

https://core.trac.wordpress.org/changeset/58081

johnbillion avatar May 13 '24 17:05 johnbillion