New Product Query Block

[sunyatasattva]

We are looking to create a new block, based (ideally or practically) on the Gutenberg Query Loop block whose goal is to replace all of our current product-displaying blocks. This new block should be flexible enough to reproduce all of the use-cases currently covered by existing blocks (e.g. showing all products, showing only new products, or products on sale, etc.), while also being filterable via dedicated filter blocks and compatible with FSE templates (i.e. it should replace the placeholders we currently use in archive templates).

This epic tracks the progress on producing a POC of this block, and not a final release. The POC should display all the above characteristics, albeit allowing for some cases not being fully covered. Specifically, we know the POC is going to have at least the following limitations:

1. Filter blocks will have to reload the page to interact with the block.
2. Multiple blocks with different queries won't be compatible with filter blocks.
3. We might have to rethink the hierarchy requirements of filter blocks in the long run.
4. Settings on the editor side won't be as user-friendly and could cause breakage of the block, due to difficulties in selecting or locking specific settings while extending a core block.

Phases 1–2

• Product Query: [Atomic Block] Create Product Image block  woocommerce-blocks#6785
• Product Query: [Atomic Block] Create Product Price block woocommerce-blocks#6786
• Product Query: [Atomic Block] Create AddToCart block woocommerce-blocks#6794
• Product Query: Create On Sale Products variation woocommerce-blocks#6788
• Add a way to read and modify the query generated by the Query Loop block sunyatasattva/gutenberg#1
• Product Query: Generate the custom query by filters applied woocommerce-blocks#6791
• Product Query: extend the Query Loop block with capabilities for more specific queries woocommerce-blocks#6795
• Add a way to conditionally hide/lock certain settings in the Query Loop block sunyatasattva/gutenberg#2

Phase 3

FSE

Note
FSE-related issues have been moved away from Phase 3 as of pdnLyh-2jZ-p2#comment-1685

Product elements

• Product Query: [Atomic Block] Convert Category List Block woocommerce-blocks#7329
• Product Query: [Atomic Block] Convert Rating Block woocommerce-blocks#7330
• Product Query: [Atomic Block] Convert Sale Badge Block woocommerce-blocks#7331
• Product Query: [Atomic Block] Convert Sku Block woocommerce-blocks#7332
• Product Query: [Atomic Block] Convert Stock Indicator Block woocommerce-blocks#7333
• Product Query: [Atomic Block] Convert Product Summary Block woocommerce-blocks#7334
• [Product Query] [3]: [Atomic Block] [Variation] Use core Post Title instead of ours woocommerce-blocks#7834
• [Product Query] [3]: [Atomic Block] [Variation] Use core Post Excerpt instead of ours woocommerce-blocks#7835

Settings & Variations

• Product Query [3]: [Settings] Filter by stock status woocommerce-blocks#7218
• Product Query [3]: [Settings] Filter by Attributes woocommerce-blocks#7322
• Product Query [3]: [Settings] Order by Best Selling woocommerce-blocks#7324
• Product Query [3]: [Settings] Order by Rating woocommerce-blocks#7326
• Product Query [3]: [Settings] Implement the Quick Display Presets woocommerce-blocks#7621
• Product Query [3]: [Variation] Top Rated Products block woocommerce-blocks#7327
• Product Query [3]: [Variation] Best Selling Products block woocommerce-blocks#7325
• Product Query [3]: [Variation] Newest Products block woocommerce-blocks#7217
• Product Query [3]: [Variation] Products by Category block woocommerce-blocks#7320
• Product Query [3]: [Variation] Products by Tag block woocommerce-blocks#7321
• Product Query [3]: [Variation] Products by Attribute block woocommerce-blocks#7323

Filters

• [Product Query] Add support for the Filter Products By Stock block woocommerce-blocks#7251
• [Product Query] Add support for the Filter Products By Attributes block  woocommerce-blocks#7186
• [Product Query] Add support for the Filter By Price Block woocommerce-blocks#7162
• Product Query [3]: [Filters] Implement compatibility with Filter by Rating block woocommerce-blocks#7631

Patterns

• Product Query [3]: Implement first set of patterns specific to the Product Query block woocommerce-blocks#7624

Bugs and polishing

• Product Query: Editor preview won't update when custom attributes are changed woocommerce-blocks#6969
• Product Query [3]: [Tests] Unit test that queries are merged correctly by the ProductQuery class woocommerce-blocks#7627
• Product Query [3]: [Tests] Add E2E tests for the FSE functionalities  woocommerce-blocks#7629
• Product Query [3]: [Tests] Add E2E tests for Filter blocks woocommerce-blocks#7632
• Product Query: [Tests] Add E2E tests for Popular Filters woocommerce-blocks#7933
• Product Query [3]: Polish the block presentation woocommerce-blocks#7758
• Product Query: Inherit Query template enabled and preview on the editor side woocommerce-blocks#7921
• [Product Query - Atomic Blocks] Review how we avoid enqueueing JS assets when blocks are rendered on the server side woocommerce-blocks#7511
• Product Query: query results are different from shortcodes/PHP query loops woocommerce-blocks#7746

Related blocking issues

• FSE Taxonomy templates get recognized as Product Catalog when attribute filters are applied woocommerce-blocks#7604

Phase 4

• [Product Query] When a specific variation is used (e.g. on-sale variation), the filter blocks have to render data that matches the variation woocommerce-blocks#7245
• Product Query: add support to existing filters block woocommerce-blocks#6790
• Product Query [4]: Research passing context down to inner blocks instead of the query woocommerce-blocks#8131

Enhancements

• 🛑 woocommerce/woocommerce-blocks#8133
• Product Query: Improve UX of the attributes filter inspector controls woocommerce-blocks#8135

Product elements

• 🔄 Product Elements: Margin need to be reviewed woocommerce-blocks#7954
• Product Elements: Feature parity between Add to Cart button and core Buttons woocommerce-blocks#8085
• Product Elements: Adding Justify content & Vertical alignment toolbar to Add to cart button woocommerce-blocks#8859
• Product Elements: Make sure design tools and global styles work well with element blocks woocommerce-blocks#8086
• Product Elements: Add design tools to “On Sale Badge” block woocommerce-blocks#8087
• 🔨 Product elements: Add design tools to the “Product Rating” block #42489
• 🔄 Product Elements: Sales badge should expose styling to theme.json woocommerce-blocks#8151
• Product Elements: Add support for fluid type woocommerce-blocks#8152

Bugs and polishing

• Can't add the Products block in WP 5.9 woocommerce-blocks#8069
• Product Elements: [Variations] Core Variations should have the same icon and color as core woocommerce-blocks#8084
• 🔄 Product Query [4]: QA Test the block on mobile #42491
• Products: "Select options" button adds the product to cart woocommerce-blocks#8147
• [GlobalStep] Alignment settings are nonfunctional for "Product Rating" inner block on a test page with "Products (Beta)" block. woocommerce-blocks#8041
• Products Block: Filtering by Category or Tag doesn't Work woocommerce-blocks#8249
• Product Elements: [Variations] Element variations are still gated behind the plugin flag woocommerce-blocks#8296
• Product Query: Attributes filters do not update the editor preview correctly woocommerce-blocks#8530
• Block variations usage is not correctly tracked woocommerce-blocks#8546
• ProductQuery->update_rest_query() overwrite tax_query of wp rest request woocommerce-blocks#8765

Phase TBD?

Product elements

• Product Elements: Product price > missing ex/incl. VAT selector (price unit) #42504
• Product block: Images should display at the same ratio  woocommerce-blocks#8338
• Sale Badge: Explore a new implementation based on the Cover block #42478

FSE

Only required with custom “Inherit from template” logic

• Product Query: custom implementation of inherit query from template woocommerce-blocks#6863

Settings and Variations

• Product Query: [Settings] Filter by Featured Products #42539
• Product Query: [Settings] Filter by Price Range #42538
• Product Query: [Settings] Sorting orders should be combinable #42537

Bugs and polishing

• Mismatch between filter data count and actual results in FSE classic templates woocommerce-blocks#7607
• Feature request: Add ability to "exclude current product" from the Product Collection block #42572
• Product Query: [FSE] Polish the UX for the “Inherit query from template” switch #42540
• Product Query: Improve the UX of the block when no results are found in the editor #42535
• Product Query: Show placeholders and a notice in the inspector when the store has no products #42536
• Product Query: [Tests] Full unit test coverage of the ProductQuery class #42534
• woocommerce/woocommerce-blocks#7886
• Products Query: missing Sort by Asc/Desc Price #42516
• Product Query: When first opening the advanced filters, “Products attributes” show an unexpected [0] #42497
• Product Elements: Add to Cart button doesn't work when AJAX is disabled woocommerce-blocks#8213
• Products block: Selected product has additional spacing in the editor  woocommerce-blocks#7866

Flaky tests

• [Flaky Test] Works on the front end #42508
• [Flaky Test] Can add the Product Ratings block and render it on the front end #42507
• [Flaky Test] Sale status is disabled by default #42503
• [Flaky Test] Can add the Add to Cart Button block and render it on the front end #42502

On hold and iceboxed

FSE

Product elements

• Product Query: [Filters] When inside a Product by Category template using a Filter by Attribute, non-pertaining attributes can be selected #42542
• Product Query: [Atomic Block] Convert Tag List Block woocommerce-blocks#7634
• Different behavior of the Product Button block when it is used in the Product Query Block and it is used in the All Products Block woocommerce-blocks#6949
• Product Elements: Adding “text styling toolbar” to Add to cart button #42425

Settings and Variations

• Product Query: Create All Products variation woocommerce-blocks#6787
• Product Query [3]: [Variation] Hand-picked Products block woocommerce-blocks#7633

Only required with custom “Inherit from template” logic (issues closed and shall be reopened in case we follow work on custom “Inherit from template”)

• Product Query: [FSE] Sort order displayed incorrectly on the front-end woocommerce-blocks#7626
• Product Query [3]: [Filters] When multiple filter conditions are selected, only the topmost is applied in the Product Query Block woocommerce-blocks#7608
• Product Query [3]: [FSE] Product Query block should respect catalog visibility options woocommerce-blocks#7645
• Product Query: [FSE] Block should show the correct editor preview as much as possible woocommerce-blocks#7630
• Product Query: [FSE] “Inherit query from template” option should only be available inside FSE templates woocommerce-blocks#7620

🔄 - In progress
🔨 - Ready to work
🛑 - Blocked

[Aljullu]

Should we close this issue considering that we are focusing our efforts on the Product Collection block, now? @sunyatasattva

[sunyatasattva]

Yep! For posterity, I suppose this is the latest related epic: #42161 ? Can you confirm @kmanijak ?

[imanish003]

Hi @sunyatasattva,

You're correct; we are currently focusing on Epic #42161. Prior to this, our main focus was Epic #42389. This Thursday, Karol and I will have a sync call to reorganize the GitHub board.