Design: "Add New" plugin cards

[costdev]

Brief

Before installing a plugin with dependencies, its dependencies must be installed and activated. Dependencies can be displayed in the dependent plugin's card on the "Add New" screen. The user should be able to install and activate the dependencies from the dependent plugin's card.

The feature plugin has a proof of concept, and design feedback and possible iteration is much appreciated.

Current visuals

WordPress trunk

Feature plugin

If a dependent has missing dependencies, the feature plugin currently changes the Install Now button to a disabled Cannot Install button. A notice is displayed which informs the user that additional plugins are required and contains an action button with either Install Now or Activate, relative to the dependency's current status.

Installing a dependency using the feature plugin

On click, the Install Now button sends an AJAX request and installs the dependency. If installation was successful, the Install Now button will change to Activate. This is consistent with Core's existing plugin card Install Now buttons.

installing-dependency-from-plugin-card.mp4

Dependency installation failure

If installation fails for a dependency, an error admin notice is displayed below the dependency. The Install Now button changes to Installation failed. and the notice provides the error message.

[karmatosed]

@costdev I'm going to review what is in this ticket but also ask some questions and be sure to loop back for conversation. I know the idea is to get this into alpha. My focus on feedback is - there is quite a bit I'd recommend ideal but today the focus is on what could be done and get in. We then iterate.

First, there seems to be an issue with a lot of information being in a very small place. This is really one of the burdens of WordPress cards. That makes me think a few things:

• How can we limit what we are adding?
• Are cards the right approach?

I wanted to put that out there first as my overall thinking as I began to go through the visuals.

Problem one: dense copy and multiple actions

Are you only able to have buttons and links here or could you include some different components? For example a checklist or other installing method? Could we do some show/hide visual? I don't want to recommend an accordion but right now this is a complex area. Another possibility here is to have some 'stepping through' interface. Just adding that as a possibility, but I would want to know my answer to the 'what is available'.

If I am correct the intention here is:

• Show there is a dependency
• Offer to install

Do we need to show multiples or could this be shown one by one? I realise this might be a little staggered in flow but considering our components are tight here it certainly might feel easier. My concern is both the complexity here and the scaling, what if someone had >5 as it doesn't look great with 2. I realise most will be 1.

Recommendations:

• Reduce copy.
• Consider different stepping interface if more than one dependency.
• If stepping can't be done can you consider a modal? This is a bit of a kill all but 'out there idea'. Could you show number of dependencies, click those and see modal to then go in? I realise I also hate modals but it's a pattern we have now.

Problem two: error message seemingly below action

Technically it's not, but due to position it really feels like it is.

Recommendation:

• Put above if can. I realise might not be able to and this area is problematic. I strongly think iteration after.

[afragen]

I've been working on a simpler version of the above.

Minimal additional text and links to the More details modal where the plugin can be installed or the install status noted in the button text.

The Dependencies tab card looks similarly.

[afragen]

@azaozz gave 👍 for this design