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 that mirrors the functionality of the Products (Beta) block. The key difference with this block is that it will be built as a standalone/forked block, and not as a variation of the Query Loop block. This will offer us greater flexibility for customization and a better overall user experience for our merchants.
The work here will build the foundation to cover the current Products block functionalities, make improvements to the Inspector Controls, and implement a set of basic patterns for a new block.
Product Collection – Shrink columns to fit (#11320)
Product Collection (and all previous product grid blocks) allowed you to specify the number of columns which then collapsed into a single column on mobile devices. Your feedback was there’s nothing in between. It was also impossible to set a two column grid on mobile devices. But we listened to your feedback!
Now you can improve your buyers experience by making the Product Collection responsive. We’re working on a “Shrink Columns to fit” option that allows you to provide a max number of columns but as the screen gets narrower, the number of columns decreases.
Check out the demo below:
Product Collection – Add new flow for adding Product Collection block (#10952)
We’re improving a way you can set up your Product Collection. Once you add the block, you’ll be prompted to choose your initial setup from different layouts and predefined collections (e.g. New Arrivals).
Check out the video:
It’s still work in progress but soon we’re planning to offer much more collections like Top Sellers or Top Rated products. All of that with the flexibility of the Product Collection block.
Product Collection – FeedbackWhat’s your experience with Product Collection so far? Do you have ideas for further improvements? Leave your feedback here!
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 block: Add preview (#11247)
Here, we’ve added a preview to the Product Gallery Block when hovering over the block in the inserter.
Product Gallery: Add animation when large image changes (#11113)
This update implements an animation when the user changes the large image via the slider, thumbnails or the arrow buttons.
Product Gallery: Fix justification not saving correctly (#11324)
Here, we’ve fixed an issue where the settings does not persist after refreshing in the editor when the first core/group row/stack’s justification settings are used.
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.
Price Filter powered by Interactivity API (#10730)
This is the initial implementation of the new Price Filter block using Interactivity API. 🎉
We are using an inner block of the <CollectionFilter> block . In the Editor, the collection data is retrieved using the useCollectionData hook (as the current Price Filter block does). Then, on the frontend, the block retrieves collection data through a custom context passed down from CollectionFilter block.
Note that this is not the final version of the block. We want filter blocks to be extensible by design, so we’re investigating the use of inner blocks for that purpose.
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.
[Store Customization MVP] Add image alts to the ai prompt if available (#11101)
Since content for this feature is AI-generated, we need to avoid mismatches between that content and the images, where ever possible.
We do this by using the alt attribute that is available in some of the Verticals API images to build the prompt.
Other Notable PRs / Issues ✅
- Single Product block: Redirect to the cart page after successful addition setting isn’t respected (#11151)
WooCommerce Blocks Releases ✨
- 11.3.0 – Many of the changes noted in this post are included in the 11.3.0 release of the WooCommerce Blocks feature plugin from October 11th. You can find the full details in the release notes.
Thanks for following along with us – until next time! 👋
Leave a Reply