Store Editing Snaps: March 27 – April 7

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.

Products Block & Improving Product Elements

The Products block (originally referred to as the “Product Query” block) is a larger project that includes Product Archive Type Blocks and “Blockifying” the Product Archive templates.

In this next phase, we continue to move towards graduating the “Products (Beta)” block out of its beta phase via a thorough QA process on different platforms. Throughout this process, we will also be fixing outstanding bugs from the beta phase and continue improving the UX, making the block smooth and delightful to use.

Product Price, Product SKU and Product Stock Indicator: Add support for color, typography, and spacing (#8906, #8913, #8954)

We’ve added styling options to another set of product elements so they can be adjusted to the look of the rest of your shop. This improvement provides users with more flexibility when customizing the appearance of the shop.

Product Price, Product SKU do and Product Stock Indicator will support the following options:

• Color: Text color, Background color
• Typography: Font family, Font size, Font Appearance, Line height, Letter spacing, Text decoration, Letter Case
• Spacing: Margin, Padding

Blockifying Templates

The goal for this project is to continue our effort to create a complete block experience for all of the Product templates. This will allow merchants to use the features of the Site Editor to create and edit the template used for rendering all single products (or even a specific product). We will also continue to leverage the work that has been done on the “Products (Beta)” block and create equivalent blocks for the various parts of an archive page.

Single Product block (#8610)

We’ve added a new Single Product block, dedicated to the Single Product template, which we are continuing to actively work on. Soon you’ll be able to choose a Single Product block from an inserter and include all the necessary blocks at once.

Product Reviews block (#8857)

In addition to the aforementioned Single Product block, we’ve added a new Product Reviews block. It displays the reviews for a given product. Like the Single Product block, it can be inserted inside the Single Product template.

Add to Cart Form: Replace Notice with Skeleton component (#8842)

In this PR, we have made some improvements to the Add to Cart Form preview.

Before

After

Improvements to the Filter Data counts

This project aims to improve the Filter Blocks, ensuring the correct counts are displayed when filtering products by following a simple rule:

The attributes and meta counts should always match the displayed results, independent of the combination of filters. They accurately represent what is available in the store for the given criteria.

During the past few weeks, we worked on a series of optimizations that are now combined and fully functional, ensuring the counts for products are accurate independent of the number of combinations of filters used. 

We have also opened the proposed approach for discussion, as this implementation differs from what the core of WooCommerce does for the filter widgets.

Add method to fetch attribute and meta counts (#8599)

We have introduced a new get_attribute_counts method, which is responsible for fetching the counts for the Filter by Attribute block.

Add method to fetch product IDs based on the filtered term (#8598)

Here, the new get_product_by_filtered_terms method is introduced, allowing the fetch of product ids by terms. The returned data is used to compose the macro query within get_attribute_counts.

Add method to fetch product IDs based on the filtered meta (#8645)

Here, the new get_product_by_metas method is introduced, allowing the fetch of product ids by metas. The returned data is also used to compose the macro query within get_attribute_counts.

Update the fixture data for the PHP Unit tests to account for the usage alongside the wc_product_attributes_lookup table (#8984)

We’ve introduced some changes to ensure that the PHP Unit tests are successful for the updated get_attribute_counts method.

WooCommerce Blocks Releases ✨

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

Other Notable PRs / Issues ✅

• Add padding support for Product Image block (#8895)
• Product Image Gallery: Prevent image placeholder from going outside its wrapper (#8901)
• Remove construct method from Product Archive Compatiblity Layer (#8915)
• Fix the incorrect position of the after_shop_loop_item_title hook (#8911)
• Fix unlinked border widths in WP 6.2 (#8893)
• Fix E2E tests with WP 6.2 (#8928)

---

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