Marketplace: Plugin Collections (Section Component)

[vinimotaa]

This issue is a breakdown of the section component for the Plugin Collections on the landing page. The context and more information about this initiative can be found here pdh6GB-1TT-p2.

Collections will be hosted as a section on the landing page. Collections will have a different product card compared to the other categories. We need to design this new product card to simplify the information so the users can quickly assess the proposition of each plugin.

01 – Every collection will have a name and a description, following the same pattern as the other sections on the landing page.

02 – Collections will host up to 6 plugins with the possibility to click on "Browse Collection" to explore all the plugins available on that specific collection. Each plugin will host the Plugin name and a very short description of the plugin. Because we want to tailor these Collections, we should ideally not only pick the most relevant plugins for each Collection but also shortly describe its core proposition. This simple structure will allow users to quickly assess at a glance how that collection or specific plugin will help them to achieve their goal in that context.

03 – Here is where the users click to see the Collection’s page. The number in parenthesis is the number of plugins within that specific collection.

Collections Page Each collection will have its own page listing all the plugins. The page design will follow the Categories page, with the main title, description, and product cards below.

Product Card specs

In case the description or product description has more than the stipulated number of characters, we add "..."

Final state

Acceptance criteria:

• [x] There is a plugin collection on /plugins (using the group added in https://github.com/Automattic/wp-calypso/issues/67925)
• [x] The group has the correct placement on the page.
• [x] The group follows the specs outlined.
• [x] Clicks on "Browse collection" and individual plugins are tracked with unique event names, so we can track Collections use.

The smaller card design can be a follow-up in https://github.com/Automattic/wp-calypso/issues/67979

[vinimotaa]

First Collections:

Setting up your local business These plugins are here to keep your business on track

• Yoast SEO Premium
• WooCommerce Bookings (or StartBooking, once that has launched)
• Professional Email
• MailPoet
• GravityForms

Powering your online store Tools that will set you up to optimize your online business

• WooCommerce Subscriptions
• Xero
• AutomateWoo
• Shipment tracking by Automattic
• WooCommerce USPS Shipping Method
• OptinMonster

Supercharging and monetizing your blog Building a money-making blog doesn’t have to be as hard as you might think

• Yoast SEO Premium
• GiveWP or Payments Blocks (could position both)
• Premium Content Block
• Gravity Forms
• Astra Pro or WPBakery (for easy ways to improve the design)
• Sensei Pro

[lsl]

@vinimotaa can you link to the figma? (Is this the one maybe? f84fqtCG4pCnCh2Hq0But5-fi-4273%3A39668)

Should we be making these icon color block things plugin icons or adding some repeating color blocks images and using those for icons?

These collection items aren't plugins:

• Premium Content Block
• Professional email
• WP Bakery
• Astra Pro
• Gravity Forms

Removed from the initial implementation, can add replacements later.

Should we be linking to somewhere outside /plugins?

This might change how we planned to implement this.

[lsl]

First pass at this in https://github.com/Automattic/wp-calypso/pull/68884, can probably ship as is?

There is a few things we still need to figure out before we can close this issue.

Todo:

• Replacement plugins (see above) - removed the non existing ones for now, can add later
• Icons vs color blocks (see above) - hardcoded existing icons for now, long term we should fetch these from plugin data
• Should we be fetching plugin info from network? I hardcoded all the icon / description / names based on the shorter text seen in the figma. Not sure this is a great way to do this. Also not sure how to fetch multiple plugins by slug, that might be beyond what our search setup can do. Needs looking into and if it can't be done we'll need to do some parallel fetching based on hardcoded slugs.
• Tracks events - I didn't look at these, there is probably some existing ones in play (it's all the same components underneath). We probably need to add some for the browse link once we figure out where that is going.
• Collections vs categories and browse all. I set these collections up as a new hardcoded list thing but I'm realizing the collection name/slug will probably conflict with the category one if we want to re-use the same /plugins/browse/:category route. We'll need a new /plugins/collections/:collection route, or maybe we should look at merging collections into categories (with a hard coded list of plugin slugs instead of a list of category tags to lookup) - I think this is probably the best option.

Update also add issues for:

• Recheck design spec's - re-using the existing compact view means I missed a few things in the spec above

[paulopmt1]

From pr #68884, should we use another plugin as the first item on Setting up your local business so we can avoid too much repetition of the same product @vinimotaa?

[vinimotaa]

Hi @paulopmt1, is fine if we re-shuffle the order. We'll display all six anyways. Feel free to suggest

[DustyReagan]

Collections vs categories and browse all. I set these collections up as a new hardcoded list thing but I'm realizing the collection name/slug will probably conflict with the category one if we want to re-use the same /plugins/browse/:category route. We'll need a new /plugins/collections/:collection route, or maybe we should look at merging collections into categories (with a hard coded list of plugin slugs instead of a list of category tags to lookup) - I think this is probably the best option.

Could collections just be categories we hide from the "More" drop down? We could have 3 new categories named "monetization-collection", "local-business-collection", and "online-store-collection". Maybe we don't even need to hide them from the "More" drop down... maybe we don't even need the "collection" suffix. 😅 I think collections could just be categories we've decided to feature.

[lsl]

We can hide these from the drop down in the same way we hide paid / featured, they're also defined as categories.

The merging/storing this list with the useCategories hook isn't a big issue for me. The bigger concern I have is how we load plugin info via our list vs turning off the existing plugin list / information loading via usePlugins.

If that part can't be done simply or easily I don't think the need to merge or store these in the same way is really there.

[lsl]

Todos:

• [ ] https://github.com/Automattic/wp-calypso/issues/68942
• [ ] https://github.com/Automattic/wp-calypso/issues/68943
• [x] https://github.com/Automattic/wp-calypso/issues/68944
• [ ] https://github.com/Automattic/wp-calypso/issues/68945
• [ ] https://github.com/Automattic/wp-calypso/issues/68946
• [x] https://github.com/Automattic/wp-calypso/issues/68947
• [x] https://github.com/Automattic/wp-calypso/issues/68948

New tracks event were not required in the end as I already set a collections- prefix to the listName but we will need to do something new for browse all links.

[lsl]

I think we've got this "done" enough to close out. Rest of todo's are still on the board. Just want to move this over to the other side.