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.
Making Product Collection the main block for product lists and collections (#44776)
We kicked off the discussion in which we’re presenting our plans related to the Product Collection block and other product list blocks.
TLDR: We want Product Collection to be a go-to product list block and soon we’d like to hide other blocks from the inserter. If a store already has existing product blocks, you can continue using those. But when setting up a new product list, you’ll see the Product Collection block and collections instead.
Feel free to join the discussion, let us know your thoughts!
Add loading indicator for client-side pagination (#44571)
Since page change doesn’t require a reload anymore, sometimes with a slower internet connection and it takes longer to load products, clicking another page may seem like nothing happens. We added a simple animation at the top of the page to indicate products are being loaded. Animation is displayed if the navigation to a new page exceeds 400ms. It will take a primary color from your theme.
Check out a demo below:
Disable “Sync with current query” option for 2nd+ block in product archive (#44577)
Usually, there’s just one “main” product list on a product archive which is expected to “sync with current query”. We implemented a small improvement that when you add Product Collection block -> Product Catalog collection, the option will be enabled by default only if it’s the first block with that option enabled. Otherwise, it’s disabled by default and you can start applying all the filters you’d like.
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 on Core] Update image to have a better resolution (#44611)
Here, we’ve replaced a few of the monochrome photography images from the onboarding flow to offer items with better resolution, as some of them were previously low-quality and blurry.
See the before & after for an example:
| Before | After |
|---|---|
 |  |
CYS – Core: ensure that the the default font pair and color pair are selected (#44309)
We’ve worked to ensure that the first font pair and first color pair that are visible in the assembler sidebar are applied in the preview. They are also highlighted in the Assembler sidebar.
Check out the demo video below:
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 incorrect template titles appearing after saving (#44254)
We fixed a strange bug that caused templates to display an incorrect title right after they were being saved. That issue was only visible in the Site Editor, but it was confusing because it caused templates to show a different title without an apparent reason.
Increasing test coverage
We continued with our effort to increase the test coverage on everything related to block templates. These last weeks this included adding tests for password-protected Single Product templates (#44304 and #44452) and Single Product block templates created by the theme which only affect one product (#44636).
But that’s not all. Besides increasing test coverage, we also improved our existing testing infrastructure to avoid duplicate code and make our tests more resilient (#44176, #44454 and #44600).
Code cleanup
As we keep updating and improving the features related to block templates and as we stop supporting old versions of WordPress, there is some code which can be updated (or even better, removed!). We are doing some work to clean it up and so far, that resulted in over 200 lines of code removed (#44148 and #44256). And there are more cleanups coming soon!
Other Notable PRs / Issues âś…
- [E2E] Setup block theme without opening browser (#44702)
- [E2E] Stabilize a flaky Price Filter test #44690 (#44690)
- [E2E] Stabilize flaky cart test #44639 (#44639)
Thanks for following along with us – until next time! 👋
Leave a Reply