Store Editing Snaps: August 14 – 25

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 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.

Enable manual migration of Products to Product Collection (#10524)

Here, we’ve enabled the Product Collection block as a core feature (with the Beta label added to the title). Additionally, prevent duplicate Product Title and Product Summary blocks in the inserter (see #10548).

Enable manual migration of Products to Product Collection (#10655)

Here, we’ve enabled the capability for manual migration from Products (Beta) to Product Collection blocks.

This was built on top of #10524, which enables Product Collection as a core feature (as noted above).

Product Gallery Block

The goal for this project is to create a new Product Gallery block, which will be an improved version of the Product Image Gallery block. Currently, the Product Image Gallery block is a placeholder that allows a builder to position where the WooCommerce image gallery is rendered.

Product Gallery block: Add Pager block (#10320)

Here, we’ve introduced the Pager block. Currently our focus is to add the correct markup and style for the block on the editor and frontend sides, so the current version is not expected to be fully working (the block should be displayed but without any interaction)

Other Notable PRs / Issues ✅

Fix “On sale” badge class (#10634)

We’ve fixed the class targeting the “On sale” badge that was introduced in this PR #10550.

The .wc-block-grid class is only present on grid products but not on the classic shop. It has been replaced by .wc-block-grid__product-image, which is present on both.

Before	After

Better handling tests with global side effects (#10508)

Because Playwright doesn’t allow multiple type of test execution, we’ve split our E2E tests into two types:

• Ones with side effects (tests that alter database setting or use hooks) that can only be run one at a time.
• Ones without side effects that can be run in parallel. (the main test suite).

Remove client side navigation from Products beta block (#10636)

Here, we’ve made three key changes:

• We’ve removed the add_navigation_id_directive method and its associated filter. This method previously added a data-wc-navigation-id attribute to the query block for client-side navigation, which is no longer required.
• We’ve removed the add_navigation_link_directives method and its associated filter. This method previously added interactive directives to pagination links inside the Query Pagination block. This specific functionality has been removed.
• We’ve introduced a new method mark_block_as_interactive, which is designed to mark the Product Query as an interactive region so that interactive elements can work inside it. This is achieved using the ‘data-wc-interactive’ attribute.

WooCommerce Blocks Releases ✨

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

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