WooCommerce Blocks

Store Editing Snaps: December 5 – 17

Welcome to another round of Snaps from the WooCommerce Store Editing team! 🎇

Every couple of weeks, we give an update on all of the work being done on WooCommerce Blocks from behind the scenes.

Let’s take a look at some highlights of what we’ve done since our last update.

Note that the linked #numbers that accompany each item below point to the relevant issues and pull requests on the GitHub repository.

What We’re Working On 🚧

Products Block (#6793)

The Products block (a rename from “Product Query” block) is a larger project that includes Product Archive Type Blocks, “Blockifying” the Product Archive templates (as a separate but related focus — see below), and Filter Block Compatibility.

Product Query – Enable “Inherit Query from template” option (#7641)

We enabled the “Inherit Query from template” option when the block is added to a template via Site Editor. Thanks to this option, you can now replace the “WooCommerce Product Grid Block” with the “Products” block.

Fix Query Loop crash when an icon of a variation is registered with src attribute (#7852)

We have fixed a Query Loop block crash when the user adds the Query Loop and selects “Start Blank” option. The reason for the crash was that the __experimentalBlockVariationPicker component doesn’t support icons registered with the src attribute.

Product Query: Add Sorted by title preset. (#7949)

Here, we have added a Sorted by title option to Popular Filters dropdown, which match with the default ordering of the Products block.

“Sort by title” filter is active and reflected in the product list order.
“Newest” filter is active and reflected in the product list order.

Product Query: Add patterns (#7857)

We’ve added several new patterns to the Products block

Patterns (#7336 & #7624)

Patterns will be the primary way merchants customize the look and feel of their stores and will also be what themes can use for setting up good default experiences.

Add dropdown version of Filter by Stock Status (#7831)

As noted in the PR title, we’ve added a dropdown view for the Filter by Stock Status block. Additionally, we’ve made it possible for multiple or single choice options to align with the Filter by Attribute.

Editor settings
Before and after Filter by Stock settings in the Editor.

Add dropdown version of Filter by Rating (#7771)

Similar to the previous item, we’ve also added a dropdown view for the Filter by Rating block and made it possible for multiple or single choice options to align with the Filter by Attribute. The same controls demonstrated in the screenshots above will be present in the settings for the Filter by Rating block as well.

Templates (#7639 & #7652)

While we’re continuing to work towards “blockifying” all of the Product Templates, our current focus is on the Product Archive templates.

Fix the incorrect layout of Rating and Price in Classic Template and Products block (#7932)

We’ve fixed the Rating block alignment, which was was incorrectly displayed in both the Products block and Classic Template:

Products Block
Classic Template
Before and after alignment of the Rating and Price in the Products Block and Classic Template.

WooCommerce Blocks Releases ✨

  • 9.1.0 – The changes noted in this post are included in the 9.1.0 release of the WooCommerce Blocks feature plugin from December 9th. You can find the full details in the release notes.

Other Notable PRs / Issues ✅


Automated Tests & Linting

Misc. Bug Fixes & Enhancements

Thanks for stopping by! Happy Holidays, if you’re celebrating, and we’ll see you in the New Year! 🎉

By Daniel W. Robert

Front-End Engineer at Automattic. Loves code, design, coffee, travel, and playing outside.