Hello and welcome to another round of Snaps from the WooCommerce Store Editing team! 🎇
Every month, we give an update on all the work being done on WooCommerce Blocks from behind the scenes. This is a shift from our previous bi-weekly posts. We made this decision to more closely align with the timing of WooCommerce Core releases.
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.
Block Hooks API
WordPress 6.4 introduced a new API that enables plugins to automatically insert their custom blocks within post content, anchored to specific places.
We have been exploring how we can utilize this API for use cases where the site owner should not need to explicitly add a block to their content to provide functionality when activating the plugin.
Block Hooks API: Add CustomerAccount block to header (#43267)
As of WordPress/gutenberg#57754 we are able to insert blocks inside the Navigation block, rather than after it. Here, we use the Block Hooks API to auto-insert the Customer Account block inside the navigation for all approved themes and patterns.
Customer Account block: Remove margin-left from label #45934 (#45934)
The SVG icon in the Customer Account Block previously had padding around it. When coupled with the margin, it created a rather large gap between the icon and text. Not only that, but if the user selected “Text only” as a display option it would have white-space to the left of it.
Here, we’ve removed the left margin so this is no longer the case.
| Before | After |
|---|---|
 |  |
Store Customization
The goal of this project is to prepare the Customize Your Store (CYS) onboarding flow for usage outside of the context of WooExpress, ensuring all eligible features are available for use in the core of WooCommerce.
Note that this project covers all of the essential features, with the exception of AI.
[CYS] Redirect to transitional page to the intro page if the CYS task was not completed (#45933)
Here, we’ve introduced a check before the transitional step to redirect to the intro screen if the customize your store task has not been completed (has not gone through the CYS flow).
CYS: add debounce to improve performance (#46212)
Here, we’ve added a debounce to improve the performance around applying colors to the site editor at each change.
Before
After
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 continuing our work on new features and further improvements that will allow for even easier store set up.
Recognise if Product Collection is located inside Cart or Checkout blocks (#46059)
In a previous PR, we implemented a location/context recognition for the Product Collection block. That work didn’t take into account whether or not the Product Collection block is placed inside Cart or Checkout blocks.
Here, we’ve updated that logic to consider this scenario, which will likely be a common use case with Upsells and Cross-Sells collections.
Product Collection: fetch all products for hand-picked products control (#45931)
This PR updates how we use the getProducts function in the Hand-Picked Products control to ensure we fetch all products, no matter the catalog size.
To achieve this, we’re now setting queryArgs explicitly, including per_page: 0 in the function call. By default, getProducts caps at returning 100 products. Now we’re going beyond that limit with this change.
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.
Fix: Honor ‘template_hierarchy’ filters on template fallbacks (WordPress/gutenberg#60377)
In the last months, we did a big effort to improve the test coverage and refactoring the codebase. This allows us to focus on improving and adding extensibility points upstream, that means in Gutenberg and WordPress, so plugins like WooCommerce don’t need to do so much “downstream” work to register and handle templates.
In this specific PR, we made it so the Site Editor honors the `template_hierarchy` filters. Those are filters which allow changing the template hierarchy for any WordPress template. They were applied as expected in the frontend, but weren’t being applied in the Add template screen.
This PR fixes that, and it allows us to simplify the logic in the WooCommerce side. WooCommerce templates that will benefit from this are Products by Category, Products by Tag and Products by Attribute, as they “fall back” to the Product Catalog template when they haven’t been customized.
And given that this is an upstream improvement, it will benefit any other plugin with similar needs, not only WooCommerce!
Apply upstream performance improvement to _get_block_templates_paths (#45619)
We found out there was a performance improvement we could do in the logic that gets the template paths. This improvement will reduce the number of files that need to be checked in order to find the correct template to render.
Other Notable PRs / Issues âś…
- Deprecate the $check_key_exists parameter from AssetDataRegistry and disallow duplicate data for all cases (#46139).
- Fix the overlay color of the “Featured Category Triple” pattern (#46170)
- Unify Product Elements inserter category to “WooCommerce Product Elements” (#46064)
Thanks for following along with us – until next time! 👋
Leave a Reply