Store Editing Snaps: August 28 – September 8

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.

Introducing the Product Collection Block: A Standalone Variation

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.

Add Product Collection Rows pattern (#10857)

This is a simple row pattern – one from a set of patterns that we are adding for the Product Collection block.

Here, we lay out the products in a row with the product image and the details side-by-side.

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.

Note that the work here is experimental and only available within the Single Product template on a development build of the WooCommerce Blocks plugin.

Product Gallery Block: add support for the on Sale Badge block (#10764)

In this PR, we add support for the On Sale Badge block from within the Product Gallery block.

Product Gallery: Lock the Sale Badge and the Next/Prev Buttons (#10869)

Here, we’ve locked the Sale Badge and Next/Prev Buttons in order to prevent unexpected behavior when these blocks get moved.

BeforeAfter

Product Gallery Thumbnails: Interactivity API directives (#10776)

This PR adds the functionality for switching the main image by clicking on the Thumbnails. Currently, there isn’t any animation – we will address that in a follow-up Pull Request.

Pattern Improvements and New Additions

We have continued to take the opportunity to make improvements on some of our patterns as issues and suggestions come up through other project work and community engagement.

While working through these pattern improvements, we will also be making related updates to existing blocks to make them more versatile and useful in our patterns, whenever possible.

Add Featured Categories Grid pattern (#10807)

Here, we’ve added a new Featured Categories Grid pattern. This came about from a feature request in Issue #10771.

Other Notable PRs / Issues ✅

  • Change default number of columns in Related Products (#10875)
  • Fix: load blocks style separately for classic themes (#10758)
  • Update @wordpress/env to 8.1.1 and re-enable PHP Unit Tests for PHP v 8.1 and 8.2 (#9875)

Latest Release: WooCommerce Blocks 11.0.0 :sparkles:

Many of the changes noted in this post are included in the 11.0.0 release of the WooCommerce Blocks feature plugin from August 31st. You can find the full details in the release notes.


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


One response to “Store Editing Snaps: August 28 – September 8”

  1. I think that there are two important aspects that should be addressed: improve styling for quantity selector, with + and – buttons https://github.com/woocommerce/woocommerce-blocks/issues/10225

    And most importantly, the interactivity API on add to cart in the single product template. which enables the possibility to have the mini cart to auto open on add to cart, rather than reloading the page, reducing server load.

Leave a Reply

Your email address will not be published. Required fields are marked *