Product Collection: Improve the flow for adding the block

[imanish003]

Related GitHub discussion: https://github.com/woocommerce/woocommerce-blocks/discussions/10694

Summary

Improve the user experience for adding a new Product Collection block by introducing a placeholder state that allows the selection or creation of collections, instead of defaulting to a 3-column grid. Further, refine the overlay that appears on selecting "Choose a collection" to include patterns and presets for easy customization.

---

Background

The current implementation of the Product Collection block defaults to a 3-column grid with alphabetical ordering and random stock status filters ("In stock, Out of stock, On backorder"). A user can make changes via the block toolbar and the sidebar, but the initial setup might not be intuitive. We aim to bring it closer to the WordPress Core blocks' experience, which often uses placeholder states for initial configuration.

---

Designs

UPDATE (13.11.23):
After discussing the Pattern chooser content with @manospsyx, @imanish003 and @xristos3490 we're changing the outcome of this issue. Changes:

• Skip Pattern chooser for now and stick to Collections only.
• Each Collection can have different initial layout setup (perPage, pages, columns).

UPDATE (20.10.23):
After discussing the Pattern chooser content with @manospsyx and @xristos3490 we're changing the outcome of this issue. Changes:

• Separate Collections and Patterns as separate entities
• Collections don't need previews, just icon, title and short description
• Collections don't influence the layout and don't include any additional blocks except for Product Collection (no headings, subtitles or any other blocks).
• At the moment we can stick to Collection chooser (top part of the screenshot) and pattern chooser (bottom half of screenshot) is nice to have (can be extracted to separate issue).
  

Figma: zx83mG5ZnDiacPdH6GlO2j-fi-161_23181

• Current default state of the Product Collection block
  

• Proposed placeholder state
  

• Proposed collection selection overlay
  

• Example for creating a new collection

CleanShot.2023-08-22.at.16.56.03.mp4

---

Acceptance Criteria

Placeholder State

• Implement a placeholder state. The placeholder should offer options to either choose a pre-existing collection or create a new one.

Collection Selection Overlay

• Upon selecting "Choose a collection", an overlay should appear.

• The overlay must contain a list of patterns and presets, including but not limited to New Arrivals, Featured, On Sale.

Create New Collection

• Though not finalized, explore the potential for users to define a new collection with filters and settings.

• Allow the collections to be reusable.

Maintain Existing Functionalities

• Ensure that the new changes do not disrupt existing functionalities like column adjustments, ordering, and filters.

---

Feedback Loop

After the initial implementation, the @shaunandrews will review the changes. Potential adjustments to the design or functionality may be carried out based on the feedback received.

---

Additional Context

• There's an open question about the intersection of this new feature with WP Variations and Synced Patterns. Further exploration is needed.

CC: @kmanijak

Tasks

Beta Give feedback

1. Implement the "Choose pattern" modal (part of Product Collection - Patterns: Pattern chooser woocommerce-blocks#9372)
2. New custom collection adds a default Product Collection block
3. Add pattern: Five column grid with filters
4. Add pattern: Columns with filter sidebar
5. Add pattern: New Arrivals
6. Add pattern: Best Sellers
7. Add pattern: On sale
8. Implement the placeholder state

[kmanijak]

This task consists of multiple subtasks:

1. Implement the placeholder state:
2. "Choose a collection" opens a pattern modal which is a part of Product Collection - Patterns: Pattern chooser woocommerce-blocks#9372
3. "New custom collection" adds a default Product Collection block
4. Implement multiple patterns listed in subtasks of the issue. Limitations:
   • Not all of the patterns from the designs can be implemented atm due to technical limitations (e.g. Scroll view is not yet implemented or Featured Products would still require manual input from the merchant)
   • New Filters are not yet in place, so we would reuse the existing ones which don't allow to achieve exactly the same layout. But we'll try to get the closest possible.