Store Editing Snaps: February 27 – March 10

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 🚧

Below are the key projects that we began work on and will be heavily focusing on over the next several weeks.

Products Block – Next Steps (#6793)

The Products block (a rename from “Product Query” block) is a larger project that includes Product Archive Type Blocks, “Blockifying” the Product Archive templates. This has been the precursor to the following projects below.

The goal for the next steps is to graduate the “Products (Beta)” block out of its beta phase via a thorough QA process on different platforms. During 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.

Fix attributes filters that do not update the editor preview correctly (#8611)

Here, we’ve fixed an issue where the products displayed in the Products block preview did not properly reflect changes to the attributes filter from the inspector controls. This was caused by an additional query component ($visibility_query) that extended the Products query.

Improve Products block Attributes Filter Inspector Controls (#8583)

In this update, we worked to improve the UI and UX behind the Attributes filter within the Inspector Controls of the “Products (Beta)“ block. While doing so, utilized the original Attribute selector component we had (AttributeTermControl) instead of creating a new component that was nearly the same. With that, this update also adds additional improvements to better extend the AttributeTermControl component.

Blockifying Templates (#8059 & #8054)

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.

Product Price block: add support to the Single Product Template (#8609)

Here, we’ve added support for the Product Price block in the Single Product Template. This also accounts for the fact that the atomic blocks support several contexts – for example, WithSelector, withProductDataContext, and the main Gutenberg context.

Rename BlockTemplatesCompatibility class to ArchiveProductTemplatesCompatibility (#8579)

This is a follow-up PR from #8442, where the BlockTemplatesCompatibility  class was introduced to handle the compatibility layer on the Archive Product templates. Because this is specific to the archive pages, we decided to rename the class to ArchiveProductTemplatesCompatibility.

Fix warning when removing the term-description from the archive-product template (#8549)

Here, we’ve addressed a PHP warning that occurs when removing the term-description block, which was caused by parsing and serializing the template blocks. We’ve fixed the warning by removing the block from the template string. This was the simplest and performant approach, since we only needed to remove this particular block from the template this one time.

Add Store Breadcrumbs block and make Product Title a link in the blockified archive-product and product-search-results templates (#8508)

We’ve added a Store Breadcrumbs block, to the Product Archive template, as a follow-up to PR #8308, where we’ve introduced the template initially.

Additionally, in a related PR (#8519), we have set the Title in the Products block to be a link by default.

Implement the blockified template conversion for the Classic Template Block. (#8248)

In order to provide a path for stores using Classic Template Blocks to easily switch to the blockified archive template, we have introduced a blockified template conversion for the Classic Template Block. This covers both the Product Archive and the Product Search Results.

Check if WordPress version is 6.1 and higher to allow for template conversion (#8588)

Here, we’ve added another condition to the blockified Archive Template that checks if WordPress version is at 6.1 or above. This is necessary because Products block is not available in prior versions.

Single Product Template: Add compatibility layer (#8442)

Building off of the work we did to add a compatibility layer for the Product Archive Templates, we’ve added a compatibility layer for the Single Product Template. This is implemented via a new class (SingleProductTemplateClass), which inherits from the abstract parent class (AbstractTemplateCompatibility).

Add Product Meta Block (#8484)

Here, we’ve added a new Product Meta Block that can be used in the blockified Single Product template to wrap the Product SKU and the Product Categories blocks.

Fix the related products block result when used along a grouped product (#8656)

We’ve fixed the results for the Related Products block when used along a grouped product. Keeping consistent with WC Core, the block will not show any products in this scenario.

Mini Cart Improvements

In an effort to continuously make improvements on our existing blocks, we spent some time focused on making several updates to the Mini Cart block.

Mini Cart drawer close button: inherit text color and improve alignment (#8605)

Here, we’ve corrected some visual issues with the close button in the Mini Cart drawer.

Fix Mini Cart missing translations (#8591)

We’ve fixed the missing translations in the inspector (in the Editor mode) of the Mini Cart block.

Fix ‘Edit Mini Cart template part’ link in WP 6.2 (#8574)

Here, we’ve fixed an issue where the “Edit Mini Cart template part” link did not open directly in the Mini Cart template part editor, as expected.

Add explicit CSS styling to mini-cart block amount in inserter preview (#8516)

We have added CSS style targeting the preview for mini cart amount element so that it isn’t hidden when shown in the inserter preview.

Make the customer account icon bigger to match the mini-cart one (#8594)

In this change, we’ve increased the size of the Customer account icon to make it more similar to the Mini cart icon.

Make the start shopping button show the theme style (#8567)

Here, we’ve modified the Mini-cart Start shopping button style to follow the theme style.

Only print wp.apiFetch.createPreloadingMiddleware() when needed (#8647)

Previously, on some pages, we were printing a script that called wp.apiFetch.createPreloadingMiddleware(), even if the array of requests to preload was empty. We’ve refactored that code so the function is only called if there is something to preload.

Preload Mini Cart inner blocks frontend scripts (#8653)

To improve Mini Cart block performance, we are now preloading the scripts that will be needed to render the inner blocks. We were preloading several other scripts, so we already had the logic in place. Piggybacking off of that previous work, we added the inner blocks scripts to the list of blocks to lazy load.

WooCommerce Blocks Releases ✨

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

Other Notable PRs / Issues ✅

Automated Tests

• Fix “Add to cart form” test (#8622)

Misc. Bug Fixes, Refactors, & Improvements

• Product Result Count block: Add support for global styles (#8517)
• Remove colorClassName and style from QuantityBadge (#8557)
• Fix “Product Price” block margin on the “All products” block (#8518)
• Switch Select by Toggle for the ‘Add-to-Cart behaviour’ (#8558)
• Products: Update product element margins in patterns (#8401)

---

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