Making Product Collection the main block for product lists and collections

[kmanijak]

Background

There are many ways of rendering lists or collections of products across various blocks in WooCommerce. We can split them into two buckets:

• Generic ones:
  • All Products
  • Products (Beta)
  • Product Collection (Beta)
• Specialized ones:
  • Best Selling Products
  • Top Rated Products
  • Newest Products
  • On Sale Products
  • Hand-picked Products
  • Products by Category
  • Products by Tag
  • Products by Attribute

We put a lot of effort into making Product Collection (Beta) better than the other generic blocks and making it capable of covering all the cases offered by the specialized product list block. All of that with better, more modern UX and performance.

Intended change

We want to make a Product Collection a go-to block to list your products, which means the following steps:

• Release the stable Product Collection block,
• Hide the other product blocks from the inserter,
• Use Product Collection as a default in product archive templates,
• In addition to Product Collection block, expose the “collections” that will substitute some blocks:
  • "Best Selling Products" will become "Top Sellers" collection,
  • "Top Rated Products" will become "Top Rated" collection,
  • "Newest Products" will become "New Arrivals" collection,
  • "On Sale Products" will become "On Sale" collection,
  • ...and more collections to come!

What does it mean for you?

If a store already has existing product blocks in use, you may continue using those. However, when setting up a new product list, you will now see the Product Collection Block instead of the other product list blocks in the inserter.

Before	After
Several blocks offer overlapping features and different interfaces	The Product Collection block along with more specific collections, under one unified interface.

Additionally, all of the collections will be available when inserting Product Collection block:

Extending the Product Collection Block

Product Collection is backward compatible with the Products (Beta) block in terms of extensibility. It offers the same level of extensibility as Products (Beta) block that is currently used as a default block in product archive templates. That means, however you extended the Products (Beta) blocks, you're able to achieve the same results with Product Collection (Beta) block.

Frontend Hooks support

There's a Compatibility Layer available on the frontend for archive templates to extend. Compatibility Layer applies the same filters to Product Collection block as to Products (Beta):

• Documentation
• Code reference

In addition to the above, Product Collection uses the same inner blocks to build a product template (e.g. Product Price or Product Title). Nothing changes in terms of the extensibility of those elements.

Plans

In addition to existing extensibility points, we're working on additional ones to allow 3rd Party Developers to create and register their own collections. Our goal is to enable you to prepare presets for Product Collection block that will predefine the product query and filters exposed to merchants in Editor.

Let's take the Top Rated collection as an example. It has the orderby attribute predefined and set to rating. In addition, there will be an option to define it as a hidden control, so the merchant cannot change it. However, they have a set of other Editor filters available to build on top of that. For example, they could apply category filter limiting the Top Rated collection to specific categories.

The next step would be allowing for creating and registering your own query filters that could be exposed in UI controls in Editor.

We're still working on it, but you can expect further communication once the first version is ready!

Your feedback

Let us know what you think about that change. We’re particularly interested in:

• Is there any particular feature from the existing product list blocks that you feel is missing in the Product Collection block?
• Have you encountered any troubles extending the Product Collection block compared to Products (Beta) or other product list blocks?

Your feedback is valuable as we continue to refine and expand the capabilities of the Product Collection block.

[nerrad]

Seems like a solid plan to me. The soft deprecation you mentioned (removing from the inserter) will be important to ensure no existing usage of the blocks are broken. Some other things I think should be considered:

• updating patterns so they aren't using any of the deprecated blocks.
• some mechanism for clearly marking the deprecation in the code for the blocks. Eventually, it'd be nice to remove the code from the codebase (but it'd be a while before we'd be able to do that). Any signalling we can provide to developers early so they don't build things on top of that code will be important.
• updating any documentation (user or otherwise) that exists for the deprecated blocks.