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
This project aims to create a Product Collection block with the functionality of Products (Beta) block but as an improved experience for displaying your products. It includes foundational work to cover the current Products block functionalities, improvements around Inspector Controls, and a set of basic patterns for a new block.
We’re currently working on new features and further improvements that will allow for even easier store set up.
Product Collection: Make sure all variations are taken into account when choosing collection (#43273)
Product Collection offers a set of Core collections. Here, we’ve allowed for any extension developer to register their own variation/collection. Once registered, it will appear as a choice in the Product Collection placeholder.
Product Gallery Block
After successfully laying the foundation for the Product Gallery block and connecting it with the Interactivity API, we began focusing on enhancements and fixing any issues to ensure everything is stable and can be used by both merchants and shoppers.
Over the past couple of weeks, we have been working on some final touches before we graduate the block out from the experimental flag and make it available as a Beta block.
Product Gallery block: Prevent page from scrolling when pop-up is open (#43378)
Here, we’ve added a body class toggle that is only applied when the modal pop-up is open. This prevents scrolling past the modal content, keeping it locked on the page, as expected.
Hide sale badge if product image is disabled (#43334)
This PR fixes an issue with the on-sale badge covering the product title when product image is disabled.
| 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 has been implementing AI-driven flows, helping users design their stores with the power of AI.
The goal of this work 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.
Below are just a few highlights from our work over the past couple of weeks.
Increase Pexels product images width to 400px to have a better resolution (#43174)
This PR increases the width of the images retrieved from the Pexels API to 400px, improving the resolution.
Show default patterns and products if the images request fails (#43157)
Here, we reset the patterns and products to default when the request to the images endpoint (i.e., the Pexels API) fails on the first attempt (when the is_ai_generated is false).
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.
[Experimental] Add: Filter blocks migration (#43218)
This PR adds manual migration logic that enables merchants to:
- Upgrade current filter block to the new ones without losing any setting/content.
- Revert/restore the converted one back to current filter blocks.
Auto migration is ready by running upgradeBlock() inside useEffect, but we only do the manual part for now. Once the filter block is out of the beta phase, we will add the auto migration script.
Templating logic update
We are making some improvements to the logic that handles WooCommerce templates, those are Product Catalog, Products by Category, Single Product, Cart, Checkout… The goal of this project is to improve test coverage, modernize the code and, with it, fix some long-standing bugs which affect some edge cases.
Add e2e tests for user customization of block templates (#43426 and #43471)
For now, our focus has been on adding tests that verify that users can customize WooCommerce templates, those modifications persist and can be reverted. We also added some tests to verify the template hierarchy is applied correctly, that’s when a templates “defaults” to another template: ie, Products by Tag defaults to Product Catalog, so any edits to Product Catalog will be applied to Products by Tag as long as Products by Tag hasn’t been modified.
Other Notable PRs / Issues ✅
- Fix Mini-Cart price disappearing on hover (#43550)
- Fix commands with tags breaking the command palette (#43269)
- Prevent Command Palette scripts to enqueue unnecessary scripts in the editor (#43221)
Thanks for following along with us – until next time! 👋
Leave a Reply