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.
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. Store set up will be even easier with our new features and improvements.
Add price range filter to Product Collection block (#42858)
We have added a price range filter to the Product Collection block, which significantly improves the versatility of the Product Collection block. This feature empowers merchants to curate products more effectively based on price ranges and enhances the shopping experience for customers as a result.
New flow of adding Product Collection and basic set of Collections (#42696)
Here, we have added several important changes to the WooCommerce Product Collection block.
The key modifications include:
- Introducing 6 new Collections:
- New Arrivals
- Top Rated
- Best Selling
- On Sale
- Featured
- Product Catalog
- The new flow of adding Product Collection:
- Upon inserting the block user is presented with the choice to choose Collection
- Adjusting existing E2E tests to the new flow and adding additional E2E tests
- Hide “Inherit query from template” from Collections
- Hide predefined filters/options from Collections
Product Gallery Block
This project builds off of our previous work and introduces functionality to blocks to enhance block interactivity. We plan to achieve this by 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 Large Image snapping position on window resize (#43251)
Here, we’ve fixed an issue that was present when resizing the browser window. Previously, because the resizing would cause the image to lose focus of the current (“focused”) image, this would unintentionally trigger the main image animation and sometimes get stuck in between two images.
| Before | After |
|---|---|
 |  |
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 – Ensure the offline modal is displayed whenever AI is unavailable (#42949)
In this update, we’ve set the AI offline modal to always be present even when the AI is unavailable and independent from the onboarding tour.
For that, a new AiOfflineModal component is created and extracted from the OnboardingTour component.
CYS > Update copy to remove the duplicate “try to include” (#42960)
This is a minor but meaningful update where we have removed the duplicated “Try to include” text from the onboarding flow.
| Before | After |
|---|---|
 |  |
Frontend Filters
The goal of this project is to improve the performance of all filters that impact the product listing 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)
Here, as the PR description notes, we’ve added a new Active Filters block powered by Interactivity API. All of the filtering behavior will function as expected, but now with improved performance and a better overall user experience on the front end.
[Experimental] Add: QueryFilters class to calculate filter data for product queries (#42811)
This is an experimental feature (only available in the development build) that introduces a new QueryFilters class to calculate the filter data for product queries. The logic was brought over mainly from the StoreAPI/ProductQueryFilters class. Instead of making internal REST API requests to Store API, we use the new class to calculate the filter data for each request.
Other Notable PRs / Issues ✅
- Add tracking when opening or searching in the Command Palette (#41838)
- Add Playwright tests for All Reviews, Reviews by Product and Reviews by Category blocks (#42903)
- Store API: Add support to query product_variations by attributes (#42983)
Thanks for following along with us – until next time! 👋
Leave a Reply