Block-based Product Creation Experience

A new product management experience using the Blocks API.

Our product management has served us well, but hasn’t kept pace with the expectations of our users. We want WooCommerce to be at the cutting-edge of ecommerce experiences, so we started a project to rethink the product creation process.

We’ve developed a new product management experience utilizing the Blocks API, for a more customizable product creation and editing process. It uses blocks, templates, and patterns to lay out the form, making it both simple and highly extendable. For the most part, extending and registering blocks for the new product editor is the same as the block and site editors on WordPress, with some minor differences.

The new structure will help the editor grow together with the store. No matter how many plugins are installed, all of them have a relevant space on the screen. We want to make the experience easier for users, help them find features more easily, and create a framework for more flexibility.

The new editor is available as a Beta feature, and it supports simple physical products. If you’re editing unsupported product types, you will be redirected to the existing editor. Support for other product types and additional features is coming, starting with variable product management being added next.

The new product editor experience is currently available under the New product editor feature flag in WooCommerce settings. To try it out, enable this feature in WooCommerce > Settings > Advanced > Features and navigate to Products > Add New. Please note that currently, the editor only supports simple physical products.

This experience is being released incrementally under a feature flag, starting with WooCommerce 7.8, released on June 13, 2023

The feature flag was auto enabled for a sub-set of new stores* as part of WooCommerce 7.9, released on July 11, 2023

The sub-set of new stores exposed to the new experience will increase once we add the variable product management support (ETA: October/November 2023)

*stores that are created on or after July 11 with usage tracking enabled

Resources

The new product editor experience is currently available under the New product editor feature flag in WooCommerce 7.8 settings. To try it out, enable this feature in WooCommerce > Settings > Advanced > Features and navigate to Products > Add New. Please note that currently, the editor only supports simple products.

Feedback

If you have any questions or suggestions, please use Github Discussions under the “WooCommerce Product Block Editor” category. 

Latest posts about this project:

Getting to Know Woo: Exploring Server-Side Extensibility with Hooks

Co-written by @ralucastn and @nielslange This is chapter 5 of 5 in the series Getting to Know Woo: A Series on the Cart and Checkout Blocks In the previous posts, we’ve looked at extensibility on the front end side, focusing on adding new content, modifying existing content, and extending payment methods. However, you may sometimes…

Getting to Know Woo: Extending Payment Gateway Options in WooCommerce

Co-written by @ralucastn and @nielslange This is chapter 4 of 5 in the series Getting to Know Woo: A Series on the Cart and Checkout Blocks In this series, we’ve learned how to add new content and how to modify existing content when it comes to the Cart and Checkout blocks, but there’s an important…

Tutorial: Placing an order using the Store API

While looking into a Store API related GitHub issue, I decided to create a brief tutorial on how to place an order using the Store API when using WooCommerce Blocks. This tutorial uses a REST client for the examples. The screenshots are from Insomnia, but you can also use other REST clients like Postman if…