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: Add ‘Order By’ Control to Product Collection Inspector (#9480)
Here, we’ve added a new ‘Order By’ control to the product collection inspector. The control allows users to specify the order of products by various attributes such as title and date.
Product Collection Filters
There have been multiple filters added to the Product Collection block to cover the same functionality that Products (Beta) block offers, but in better shape and structure. There’s no longer a split between Filters and Advanced Filters – all of them are displayed in the same place, making it easier to configure.
In these last two weeks, we have added support for the following filters:
- On sale (#9261),
- Stock status (#9580),
- Keyword (#9583),
- Attributes (#9600),
- Taxonomies: Categories, Tags (#9634)
But there’s more to come! Switching from variation API (as Products block is based on) to standalone block allows for better flexibility, so you can expect more filters like price range. Please remember this is still an experimental feature and is not yet available to use, but stay tuned.
Mini Cart Improvements (#9198)
In an ongoing effort to improve our existing blocks, we’ve continued to focus on additional updates to our Mini Cart block.
Make the Mini Cart block cache-friendly (#9353)
One of the most common requests regarding the Mini-Cart block was to make it compatible with caching plugins. Starting from the latest version, it is! You can now use the Mini-Cart block on your site even if you have plugins like W3Total, WP Fastest Cache, WP-Optimize and Litespeed active!
Stack View my cart and Go to checkout buttons on smaller screens (#9603)
Another thing that was highly requested by the community was to make the View my cart button visible also on mobile. Since the latest version, the mobile version for the Mini-Cart has both buttons visible, making it possible for shoppers to navigate to the Cart or Checkout pages directly from the Mini-Cart.
Other improvements
- Make Mini-Cart error notifications non-dismissible #9578
- Fix drawer close button alignment when drawer has border #9507
- Fix invisible Mini-Cart badge in themes without <body> background #9601
- Prevent horizontal shift when opening the Mini-Cart drawer if scrollbars are visible #9648
- Fix colors not being applied to Mini-Cart Proceed to Checkout Button in the editor #9661
- Ensure aria-label is showing correct value based on setting #9672
- Make Mini-Cart icon RTL on RTL sites in editor #9707
Blockifying Templates (#8054)
The goal for this project is to continue our effort to create a complete block experience for all of the Product templates. This will allow merchants to use the features of the Site Editor to create and edit the template used for rendering all single products (or even a specific product). We will also continue to leverage the work that has been done on the “Products (Beta)” block and create equivalent blocks for the various parts of an archive page.
Enable Single Product block (#9714)
In the next version of WooCommerce Blocks (10.4.0) the Single Product Block will be available.
Bug fixes
- Single Product Template: fix Compatibility Layer when the template implements the Single Product Template #9723
- Product Rating: fix the filter woocommerce_product_get_rating_html is removed #9719
- Product Price: remove underline on sale price #9702
- Blockified Single Product Template: avoid to add another group block on the editor side when the user creates a template for a specific product #9699
- Blockified Single Product Template: add product-classes via wc_get_product_class #9697
- Add to Cart with Options block: Prevent page redirection when clicking on Add to Cart button #9691
- Add to Cart Form block: Prevent notice from appearing after clicking on Add to Cart button inside Single Product block #9685
- Product rating: improve preview style when the product doesn’t have rating #9684
- Refactor: Add useIsDescendentOfSingleProductTemplate hook #9657
- Blockified Single Product Template: Show upsells. #9636
- Product Image Gallery: Reintroduce filters and override-restore the global product variable. #9630
Gutenberg Contributions
In order to support our ongoing projects and contribute to the broader community, we have also made upstream contributions to the core Gutenberg project.
- Post Title: improve preview on the editor site (#50147)
- Post Excerpt: improve preview on the editor site (#50167)
WooCommerce Blocks Releases ✨
10.3.0 – Many of the changes noted in this post are included in the 10.3.0 release of the WooCommerce Blocks feature plugin from May 24th. You can find the full details in the release notes.
Thanks for following along with us – until next time! 👋
Leave a Reply