Store Editing Snaps: July 17 – 28

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.

Fix incorrect filter application in Product Collection (#10263)

Here, we’ve corrected the withUpgradeNoticeControls function to only be run for the woocommerce/product-collection block, as opposed to every block in the editor.

Enable auto-expand for product selection in HandPickedProductsControl #10250 (#10250)

This change aims to improve the user experience by making it easier for the user to see all available options when they focus on the selection list.

Product Collection – Add PHP unit tests (#10289)

In this PR, we introduce unit tests for the ProductCollection block to cover various aspects of the block’s functionality and ensure that it behaves as expected.

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 for the Product Details Product Listing pattern (#9978)

Here, we’ve replaced the current Product Details Product Listing pattern with the Single Product block using the Product Rating Stars, Counter, and Average Rating blocks.

Moving away from opinionated pattern styles

Over the last couple of weeks, we have moved many of our patterns away from using opinionated styles, allowing the inserted patterns to take on more of the active theme styles (colors, font sizes, etc.).

A few of the patterns we’ve updated are:

• UpRemove opinionated styles from Alternating Image and Text pattern (#10292)
• Remove opinionated styles from Product Hero pattern (#10255)
• Update the Footer with Simple Menu and Cart pattern to have no opinionated styles (#10306)
• Remove styles from Product Details Product Listing pattern (#10362)

Along with several others!

Product Button and Interactivity API

The goal for this project is to integrate the Interactivity API to the Product Button block.

ProductButton: Add animation (#10351)

This PR sets the default state for the Add to cart button then transitions it to X in cart with some animation.

WooCommerce Blocks Releases ✨

• 10.7.1 – Many of the changes noted in this post are included in the 10.7.1 release of the WooCommerce Blocks feature plugin from March 13th. You can find the full details in the release notes.

Other Notable PRs / Issues ✅

• Add new Product Average Rating block (#10207)
• Remove work-around code in EditableButton component to fix typing Space (#10248)
• Add tests in Playwright for Mini-Cart drawer closing (#10305)

---

Thanks for following along with us – until next time! 👋