Marketplace: Add CollectionListView

[lsl]

Proposed Changes

• Adds collection list view component Marketplace: Add CollectionListView component #68800 Marketplace: Plugin Collections (Section Component) #67987
• Adds some hard coded collections Marketplace: Add setting up your local business plugin collection #67925 Marketplace: Add powering your online store collection #67980 Marketplace: Add supercharging and monetizing your blog collection #67982 - Note missing some per this comment. We can add more later.
• Shrinks the compact plugin list view to 3 columns based on figma f84fqtCG4pCnCh2Hq0But5-fi-3620%3A32644 Marketplace: Implement compact card design #67979
• Drops the short list constant to 4 from 6 to match figma Marketplace: Drop single list view plugin count to 4 from 6 #68877

Testing Instructions

• Plugins screen should render the new collections sections
• Old sections should be shrunk to 4 from 6

Fixes #68800
Fixes #67979
Fixes #67925
Fixes #67980
Fixes #67982
Fixes #68877

Related to #67987

Before

After

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-45980

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-45980&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~882 bytes added 📈 [gzipped])

name     parsed_size           gzip_size
plugins      +3242 B  (+0.1%)     +882 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7575186

Thank you @lsl for including a screenshot in the description! This is really helpful for our translators.

[allilevine]

@vinimotaa Adding your feedback here to address:

Hi @lsl, thanks for this, is this ready for a design review? Product cards seem a bit off from the design specs provided. If the team is still working on it, it's ok, otherwise, we could double-check check paddings, font sizes, thumbnail sizes, etc. Happy to help

@lsl had also asked here about icons.

[DustyReagan]

Product cards seem a bit off from the design specs provided

@vinimotaa I think I see what you're referring to. I updated the CSS to decrease the size of the compact icon to 40px, and adjusted the margin a bit to suit the smaller icon size. Please let us know if there's more you see. ☺️

[DustyReagan]

Yoast is a bit over-represented, and we're still waiting on some translations, but otherwise, it looks good to me! 👍

[paulopmt1]

Good job, everyone! Agree with @DustyReagan, tomorrow seems to be a good day to merge it so we'll have more translations in place and probably a replacement for Yoast in the monetization category.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7575186

Thank you @lsl for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.