Store Editing Snaps: January 16 – 27

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

Products: Fix variable products add to cart (#8173)

We’ve fixed an issue where variable products were getting added to cart via the “Select options” button. This was due to the button not getting hydrated with the AJAX functionality on products that have options.

Remove feature flag from Element variations (#8297)

This is a follow-up from #8001, where we removed the featured plugin flag from the “Products (Beta)” block.

We removed the flag on the following elements, so they can be accessible without the featured plugin:

• Product Summary
• Product Template
• Product Title

Moving things to Global Styles

In an effort to allow for more flexibility by better utilizing Global Styles, we are continuing to transition control from block-specific CSS to Global Styles, wherever applicable.

The following three PRs are our latest enhancements on that front:

• Product Price: Transition from using CSS margin to Global Styles (#8195)
• Product Rating: Transition from using CSS margin to Global Styles (#8202)
• Product Button: Transition from using CSS margin to Global Styles (#8239)

Blockifying Product Archive Templates (#8059)

The goal for this project is to create a complete block experience for Product Archive templates. In order to do so, we will leverage the work that has already been done on the “Products (Beta)” block and create equivalent blocks for the various parts of an archive page.

Add Catalog Sorting filter block (#8122)

Here, we have added a new Catalog Sorting block.
It uses the woocommerce_catalog_ordering() function to render the sorting dropdown on the front end and works with the Products (Beta) block.

Add Store Notices block (#8157)

We have also added a new Store Notices block, which uses the woocommerce_output_all_notices() function to render the notices on the front end.

Add a compatibility layer to keep extensions continue working with Blockified Archive Templates (#8172)

Here, we have added a new class that acts as the compatibility layer for blockified archive templates by:

• Injecting a custom attribute for the Products block that inherits the query from the template and its inner blocks.
• Filtering the output of those inner blocks, appending/prepending the corresponding hooks to each block.
• Removing the default callbacks added to those hooks by WooCommerce.

Remove font family styling support from Catalog Sorting and Product Results Count blocks (#8311)

We have removed support for font family styling in the Catalog Sorting and Product Results Count blocks. The feature was using an experimental flag, and we don’t have font family styling in most of our other blocks.

Blockifying Single Product Template (#8054)

Alongside the above effort to blockify the Product Archive templates, this project aims to blockify the Single Product template. 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).

Add Store Breadcrumbs block (#8222)

Here, we introduce the new Store Breadcrumbs block, which allows merchants to keep track of their locations within the store and navigate back to parent pages.

Research how extensions extend Single Product template (#8204)

In this Issue, we conducted some research on how extensions extend the Single Product template, which was also a great time to survey all the hooks available on the Single Product page.

Store Editing preparation for WordPress 6.2

WordPress 6.2 tentative release date is March 28. The last version of WooCommerce Core that will be released before March 28 is v7.5 (code freeze February 20). The last version of WooCommerce Blocks that will be merged into WooCommerce Core v7.5 is WooCommerce Blocks v9.6 (February 13).

WooCommerce Blocks Releases ✨

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

Other Notable PRs / Issues ✅

Refactors & Improvements

• Add reset button in the editor for product attribute filter (#8285)
• Add border attributes to featured items block to show border styles in editor (#8304)
• Show JETPACK_AUTOLOAD_DEV notice if it’s not set to true (#8312)
• Fix Catalog Sorting colors in dark themes (#8270)
• Make Notice component legible in dark themes (#8278)

Automated Tests & Linting

• Fix E2E tests (#8263)
• Fix catalog sorting and checkout tests (#8292)

Misc. Bug Fixes

• Remove duplicated key from the object containing TEMPLATES in the test file (#8260)

---

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