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 (#9264)
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: Make it compatible with filter blocks (#9928)
Product Collection is now compatible with Filter blocks so buyers can easily filter out the products they would like to see. Use it in the same way as you used them with the Products block.
Product Collection block – data flow (#9993)
We have been working on optimizations for product data fetching in the Product Collection block. The first goal is to avoid data overfetching and the secondary goal is to start using Gutenberg’s patterns for data fetching. We recently kicked off a discussion to nail down the final solution.
If you’d like to have an influence on the Product Collection block, please join us and give your valuable input in the discussion!
Patterns
With the addition of some new blocks, we’ve taken the opportunity to make improvements on some of our patterns.
While working through these pattern improvements, we are also making related updates to existing blocks to make them more versatile and useful in our patterns.
Use the single product block on the Hero Product pattern (#9935)
Here, we’ve replaced the static blocks in the current Hero Product pattern with the Single Product block.
Add new Product collection banner pattern (#9953)
We’ve added a new Product collection banner pattern for displaying a curated collection image, next to a catchy description and link / CTA to the collection archive.
Add size settings to the Product Image block (#10034)
Here, we’ve added size settings: width, height, and scale to the Product Image block.
This work is part of the block improvements needed in some blocks to make them more flexible to achieve the new pattern designs.
Mini Cart Improvements
In an ongoing effort to improve our existing blocks, we’ve continued to focus on additional updates to our Mini Cart block.
Remove template part from the block inserter (#9906)
Until now, if you were editing a template in the Site Editor, you would see the Mini-Cart template part show up in the inserter. That was confusing as that template part is only intended to be used inside the Mini-Cart drawer. In #9906 we fixed that and the Mini-Cart template part no longer appears in the inserter.
| Before | After |
|---|---|
 |  |
Follow-up improvements to the work to make the Mini-Cart block work with caching plugins
In a previous release, we made the Mini-Cart block work with caching plugins. We kept refining this feature to ensure the correct values (instead of the cached ones) are rendered on all occasions.
- Mini Cart Block: show the total price, including tax, according to the option (#9878)
- Mini-Cart: don’t include shipping price (#9914)
- Prevent prefetched Cart payload causing wrong values with cached Mini-Cart block (#10029)
Other Mini-Cart improvements
Besides that, we did some improvements to the codebase, making it so the Mini-Cart has to run less logic on the server and making the code much simpler:
- Avoid usage of __experimentalUseFocusOutside (#10017)
- Cleanup code to lazy-load wc-settings in the Mini-Cart block (#10042)
WooCommerce Blocks Releases ✨
10.5.0 – Many of the changes noted in this post are included in the 10.5.0 release of the WooCommerce Blocks feature plugin from June 21st. You can find the full details in the release notes.
Thanks for following along with us – until next time! 👋
Leave a Reply