Marketplace: Gray out incompatible plugins in search

[allilevine]

Some plugins are incompatible with WordPress.com (see https://wordpress.com/support/incompatible-plugins/). Currently we show a banner on the plugin details page, saying that it can't be installed. Let's gray out those plugins in search results so that the user isn't unpleasantly surprised when they get to the details page.

Slack thread: p1649419949583419-slack-C029JEQRVRT

Hardcoded plugins list:

wp-calypso/client/my-sites/plugins/plugin-compatibility.js

Lines 1 to 11 in a0d28ef

	/**
	* This is a list of plugins not supported on WordPress.com Atomic sites.
	*
	* If this list is modified, please ensure that the support document also reflects
	* any changes made:
	* - https://en.support.wordpress.com/incompatible-plugins
	*
	* Please keep this list alphabetized within the different categories!
	*/
	const incompatiblePlugins = new Set( [

Acceptance criteria:

• The incompatible plugins are grayed out in search results (use top gray badge version, but link to why):

[cpapazoglou]

I don't agree with hiding them. Not finding the plugin you want will decrease the trust users have in our marketplace. Also, without educating the user, they will eventually download it from .org and just upload it.

[lsl]

I tend to agree with that, @vinimotaa / @SaxonF could we get a design for how an incompatible plugin should be rendered?

I'm guessing like normal in search results but when you click through to install it the install / price CTA is greyed out.

[vinimotaa]

Hi folks, what do you think of something like this?

The option above has a label to notify users about the incompatibility, and the one below helps users to understand the reason why that/other plugins are not compatible with WordPress.com, linking them to: https://wordpress.com/support/incompatible-plugins/

I greyed out the overall plugin info, and do we deactivate the link to those as well? or do we still let the users check the plugin page?

cc @lsl @cpapazoglou @allilevine

[allilevine]

I don't agree with hiding them. Not finding the plugin you want will decrease the trust users have in our marketplace.

I'm guessing like normal in search results but when you click through to install it the install / price CTA is greyed out.

Thanks @cpapazoglou @lsl. Looping in @galakhyati and @ianstewart since they raised this need.

Hi folks, what do you think of something like this?

@vinimotaa Graying out the search result seems like a good middle ground to me. We still show the plugin and a link to why.

[lsl]

+1 greyed out card

I like the grey badge variation more as it's more assertive and clear about the problem but I think we still need a "Why?" link on the side/below/in so people can find the docs and explanation easily.