Hello and welcome to another round of Snaps from the WooCommerce Store Editing team! 🎇
Every couple of weeks, we give an update on all 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.
As of December 8, WooCommerce Blocks has been merged into the core WooCommerce monorepo. We will no longer be conducting separate releases for WooCommerce Blocks.
What We’re Working On 🚧
We’ve worked on a number of things in the last two weeks but here are some specific items we want to highlight.
Product Collection Block
Product Collection block offers an improved experience for displaying your products. The block is already feature-rich, covering all the cases Products (Beta) or All Products blocks offered. Now, we’re working on new features and further improvements that will allow for even easier setting up your store.
New flow of adding Product Collection and basic set of Collections (#42696)
Except for the new flow of adding Product Collection block we added some improvements to make the usage of Collections simpler. One of them is we make the filters section clearer by hiding filters or options that should not be changed in a particular Collection. Let’s take “New Arrivals” as an example. “New Arrivals” has a predefined order (Newest to Oldest) and the query doesn’t inherit from the template. These two options are then hidden from the Inspector Controls. All the others are still there allowing you to apply other filters.
Add price range filter to Product Collection block (#42858)
This PR has been merged and since WooCommerce 8.5 you’ll be able to adjust Product Collection block to display only products from a specific Price Range.
Product Gallery Block
This project builds off of our previous work and aims to introduce additional functionalities to the blocks and enhance their interactivity. We plan to achieve this utilizing the Interactivity API and the Behaviors API, alongside enhancing block reliability through the development of e2e tests within the new Playwright infrastructure.
Product gallery – fix “View all” link (#11995)
It’s a minor improvement but detail matters. This PR adds specific styling to the “View All” link and thumbnails count depending on how many thumbnails are displayed:
- When set to 3 – 5 thumbnails both thumbnail count and “View All” link are shown.
- When set to 6 – 8 thumbnails only count is shown because “View All” link doesn’t have enough space to display nicely.
| Before | After |
 |  |
Product gallery: Enable block in blockified template and add transform from legacy one(#42719)
Product Gallery block is finally enabled as a default block when you transform the Classic Single Product Template to block version. Also, you can easily transform Product Image Gallery block to the new Product Gallery block.
To transform the Product Image Gallery block, click on the icon in the toolbar and choose Product Gallery:
Try it out and share your feedback with us!
Store Customization
This project aims to create a brand new Store Customization experience by introducing new key features, such as an updated design hub, onboarding experience, and more. While many different teams are working on this initiative, our primary focus in this phase is to start implementing AI-driven flows, helping users design their stores with the power of AI.
During this cycle, the goal is to have AI manage the images displayed in patterns, ensuring they dynamically change depending on what the user decides to add as a description for their business in the settings.
Over the past couple of weeks, we primarily focused on pattern improvements. While there are too many to list here, below are a few highlights.
CYS – AI Improvements (#42800)
A set of improvements and optimizations has been introduced to Customise Your Store flow. For example reducing the size of images uploaded to media library or avoiding unnecessary requests. You can check the demo of this flow in the video:
Frontend Filters
The goal of this project is to improve the performance of all filters that impact the products blocks. We want to make the filters’ context aware, so we only query the products we need and make overall user experience better and smoother by exploring the use of interactivity API.
Add: Active Filters block powered by Interactivity API (#42008)
Active Filter block is a necessary part of frontend filters. In this PR we introduced Active Filters block powered by Interactivity API meaning there’s no need for a page refresh to change your filters. New Active Filter is a part of Collection Filters block which we’re actively working on. However, keep in mind it’s not yet available to use.
WooCommerce Blocks Releases ✨
- 11.7.0 – This new release makes it so the Mini-Cart block is automatically injected into header patterns and template-parts in the Twenty Twenty-Four theme, alongside many other fixes and improvements.
Other Notable PRs / Issues ✅
- Fix:
useEditorBlockshook always returns an array (#41874) - Block Hooks API: Enable Mini Cart auto-insertion for TT2 (#42754)
- Block Hooks API: Enable Mini Cart auto-insertion for TT3 (#42752)
Thanks for following along with us – until next time! 👋
Leave a Reply