Product Collection

[kmanijak]

Description

This epic covers a work to create a Product Collection block with the functionality of Products (Beta) block but built as a standalone/forked block, not as a variation of Query Loop. That includes foundation work to cover the current Products block functionalities, improvements around Inspector Controls compared to the current Products block, and a set of basic patterns for a new block.

Designs: AtfOeZIFizx7ASmoSUbNjD-fi-55-9579&t=rnEPoeIr070VybIn-0

Technical guidelines/requirements

• General:
  • Product Collection is a standalone block and NOT a variation
  • Product Collection implementation can be based on Query Loop and Post Template blocks implementation
  • Product Collection should reuse as much of the existing code and must use Product Elements
• Frontend:
  • Frontend has to be as performant as Products block is (that requires PHP SSR on the frontend)
  • Consider using Interactivity API (TBD)
• Editor:
  • Inspector Controls should be built with the new structure in mind from the very beginning
  • There still should be an option to inherit the global query

---

Section added 17 Jul 2023:

Here are the remaining issues split into must-do before release and post-release (not all of issues are mentioned here, only the high priority ones).

BEFORE releasing first version (SP: 20 + PHP Unit Testing):

• Product Collection - PHP Unit Tests woocommerce-blocks#10176
• Product Collection - End-to-End Testing woocommerce-blocks#9783
• Product Collection Telemetry: Convert Product to Product Collection and revert to Products #42301
• Migration path from Products to Products Collection block woocommerce-blocks#9703
• Product Collection - test extensibility when used in blockified template woocommerce-blocks#10194 + potential fixes
• Product Collection - warnings when used in Product Search Result and there's no results woocommerce-blocks#10232
• Product Collection - display list of available products on focus in handpicked products filter woocommerce-blocks#10230
• Product Collection - incorrect default number of products in editor when inheriting query woocommerce-blocks#10228
• Product Collection - Interactivity API  woocommerce-blocks#10328

ROLLOUT:

• Product Collection - enable the beta version woocommerce-blocks#10430
• Product Collection - remove the code that enables automatic migration #42270

AFTER releasing first version (SP: 17):

• Data flow:
  • https://github.com/woocommerce/woocommerce-blocks/discussions/9993
  • https://github.com/woocommerce/woocommerce-blocks/issues/9268
  • Make Product Collection product-centric woocommerce-blocks#9469
• Features:
  • Product Collection - Filters: Price Range #42377
  • Product Collection - mobile view columns configuration woocommerce-blocks#9971
• Patterns:
  • Product Collection - Patterns: Pattern chooser woocommerce-blocks#9372
  • Product Collection - Patterns: Grid woocommerce-blocks#9368
  • Product Collection - Patterns: Full Grid woocommerce-blocks#9369
  • Product Collection - Patterns: Simple Grid woocommerce-blocks#9370
  • Product Collection - Patterns: Rows woocommerce-blocks#9371

---

Phases

Here are the next phases of the work with the milestone that describes the end goal of each phase. Phases don't have to be addressed one after another but can overlap with each other. In parallel to the following phases, there will be additional work that still contributes to the Products and Product Collection blocks like bug fixes or Product Element improvements.

1. Exploratory

Foundation work with POC of the block. that includes preparing a base for a block by forking the Query Loop and Post Template and adjusting the logic of the block to be product-centric (e.g. no data over-fetching in Editor etc.)

Milestone: Recognize the technical capabilities, limitations, and potential risks, and provide a block foundation.

Issues:

• Foundations of the Product Collection woocommerce-blocks#9267
• https://github.com/woocommerce/woocommerce-blocks/issues/9268
• Product Collection - use Product Title instead of core/post-title variation #42346
• Product Collection - Use Product Summary instead of core/post-excerpt variation #42345

2. MVP/Beta

Cover the current Products functionality, especially assuring the compatibility of existing settings (like filters in both editor and frontend) or the ability to inherit the global query.

Milestone: Make the Product Collection as usable as Products block.

Issues:

• Product Collection - Editor settings: columns woocommerce-blocks#9356
• Product Collection - Editor settings: Inherit query from template woocommerce-blocks#9358
• Product Collection - Editor settings: Order by woocommerce-blocks#9359
• Existing filters:
  • Product Collection - Filters: On Sale woocommerce-blocks#9361
  • Product Collection - Filters: Stock Status woocommerce-blocks#9362
  • Product Collection - Filters: Attributes woocommerce-blocks#9363
  • Product Collection - Filters: Taxonomies woocommerce-blocks#9364
  • Product Collection - Filters: Keyword woocommerce-blocks#9365
  • Product Collection - Filters: Handpicked Products woocommerce-blocks#9722
• ✅ Global Styles support - Product Collection supports the same set and scope of Global Styles as Products
• Product Collection - should work well with Filter blocks woocommerce-blocks#9876

3. Editor: Inspector Controls improvements

Add additional sorting and filtering option.

Milestone: Make Product Collection fully configurable on the Editor side and make Inspector Controls more user-friendly.

Issues:

• Product Collection - Filters: Price Range #42377
• Product Collection - Filters: Authors woocommerce-blocks#9366
• Product Collection - Query Controls woocommerce-blocks#9367

4. Patterns

Implement a set of basic patterns for Product Collection.

Milestone: User can choose one of the patterns for most common use cases with the preset configuration.

Issues:

• Product Collection - Patterns: Pattern chooser woocommerce-blocks#9372
• Product Collection - Patterns: Grid woocommerce-blocks#9368
• Product Collection - Patterns: Full Grid woocommerce-blocks#9369
• Product Collection - Patterns: Simple Grid woocommerce-blocks#9370
• Product Collection - Patterns: Rows woocommerce-blocks#9371

5. Remaining work from Products block

There's work that contributes to the both: Products block and Product Collection. This work is a parallel to all to other phases.

Issues:

• Products block: taxonomy filter names are not decoded properly woocommerce-blocks#9242
• Products(Beta) Block Pagination When Justified #42409
• Products (Beta) block. Same size images #42415
• Products block: keyword filter works even when Inherit query from template is active #42426
• Enable theme to define custom default template for Products block #42487
• SearchListControl incorrectly builds the terms tree in certain cases #42438
• Product filters on homepage redirect to the Home template #42351

6. Misc

• Documentation
• Product Collection - PHP Unit Tests woocommerce-blocks#10176
• Product Collection - End-to-End Testing woocommerce-blocks#9783
• Product Collection Telemetry: Convert Product to Product Collection and revert to Products #42301
• Migration path from Products to Products Collection block woocommerce-blocks#9703
• Product Collection - QA session woocommerce-blocks#10178
• Product Collection - test extensibility when used in blockified template woocommerce-blocks#10194

7. Extras

Additional work extending the basic scope, feature requests etc.

Issues:

• Product Collection - mobile view columns configuration woocommerce-blocks#9971
• Product Collection - add "list" / "grid" view option  woocommerce-blocks#10138

8. Bugs

• "View Cart" is off when Products/Product Collection blocks are used in post/page woocommerce-blocks#9999

Tasks

Beta Give feedback

No tasks being tracked yet.

[kmanijak]

Closing in favor of other epics (#42161). This one is not used anymore