Introducing a brand-new product creation experience powered by Blocks

While the WC Core product management experience has served our user base well over the past few years, customer expectations are constantly evolving, and our product must evolve along with them. Users now demand an effortless and intuitive experience similar to the tools they use in their everyday lives. In addressing this demand, WooCommerce is balancing the needs of those who prioritize a simplified experience with those who prize our industry-leading flexibility.

In response to these challenges, we embarked on a journey to redefine the product creation experience. Our goal is to empower users with a new experience that makes them feel in control, helping them seamlessly navigate between the two sides of the spectrum: from creating a basic product to a product requiring multiple options and additional customization. It should feel like a superpower.

After going through a few proofs of concepts, we have landed on an experience that is implemented using Block APIs. In this blog post I will go over some of the main points: the design, the form, and how to extend it.

The design

The new experience is split up into tabs and sections, which makes it easier to find specific product details. It doesn’t matter if they’re added by WooCommerce or a third-party extension

Thanks to logically arranged tabs, all fields and settings live in one place. For example, under Pricing, users will find list price, sale price, tax settings, and fields added by plugins like Price by Quantity or Name Your Price.

This structure helps the form grow together with the store. No matter how many plugins are installed, all of them have a relevant space on the screen. Our goal was to reduce user confusion, improve feature discoverability, and create a scaffolding for greater flexibility.

The new experience is more than just the form. It comes with the full Block editor that merchants can use to create compelling product descriptions. The descriptions can be pure text or contain multiple videos and blocks.

The Form

As mentioned in the introduction, we have built the new form using the Blocks API. This allows us to leverage the power of blocks, templates, and patterns to make laying out the form simple and also easy to extend (more on that below).

When using the new experience, you will quickly realize it doesn’t feel like a Blocks editor, but more like a normal form. We have made several modifications to disable/change some of the default block behavior to align with the product creation needs. Each field and section that you see is still its own block, or a block with nested blocks.

For example: As seen in the first screenshot, we were able to make use of the existing Columns block in order to split the pricing fields into two columns.

Extending the Form

Extending the form will look and feel very similar to extending the Block editor; you can do so by creating a new block and modifying the editor template to include the newly created block. You can also re-use existing blocks provided by WooCommerce, such as the Tab and Section blocks. We’re also exploring providing support for reusable field blocks, such as a text field or type-ahead field. If you are not already familiar with extending the block editor, you can follow this ‘create a block’ tutorial to learn more.

While for the most part, extending and registering blocks for the product editor is the same as the block and site editors on WordPress, there are currently two key differences to keep in mind for blocks in this context.

First, the block has to make use of the entity data store via `useEntityProp` instead of relying on the `save` callback. This is because a product is an object of keys and values and not a linear piece of content like posts or pages. Using the entity data store within the `edit` render method will correctly modify the product object and without it, the block won’t change the product.

const [ newProductProperty, setNewProductProperty ] = useEntityProp( 
    'postType', 
    'product', 
    'newProductProperty' 
);

Secondly, the form is rendered using a predefined editor block template, meaning the user can’t add additional fields on the fly as in the block or site editors. In order to add new fields, a plugin can modify the template by the use of hooks and some helper functions. The API for this is very manual at the moment (as shown in the example below), as a plugin will have to inject their own block somewhere within the template stack. We will be exploring ways to simplify this, and suggestions are welcome.

// find the 'Basic details' section and add our block to the end of it.
foreach ( $template as $tab_index => $tab ) {

  $tab_properties = $tab[1];

  if ( 'general' === $tab_properties['id'] ) {
    $tab_sections = $tab[2];
    
    foreach ( $tab_sections as $section_index => $section ) {

      $section_properties = $section[1];

      if ( 'Basic details' === $section_properties['title'] ) {

        $section_fields = $section[2];
        // add our block to the end of the section
        $section_fields[] = [
          'woocommerce/sample-field',
          []
        ];

        // update the template with our new block
        $args[ 'template' ][ $tab_index ][2][ $section_index ][2] = $section_fields;
        break;
      }
    }
    break;
  }
}

Using templates to lay out the form does give us a lot of flexibility and will allow plugins to create their own customized templates for specific product types.

Trying it out

With the release of WooCommerce 7.8 we have added a New product editor feature flag under WooCommerce > Settings > Advanced > Features. Once you enable this, you can go to Products > Add New and view the new editor.

Keep in mind, this new editor only supports simple products for now, and you will be redirected to the existing editor if you’re editing unsupported product types. Support for other product types is coming, starting with variable product support being added next.

If you want to start experimenting with extending the editor, you can start with this product block example. However, as mentioned above, the API for this is still in flux, so the way blocks are injected into the editor is likely to change.

Next steps

Our next step is to continue to build out the core features to reach parity with the existing experience. One of the initial items is adding support for variations and other product types.

We also plan on updating our documentation, provide concrete examples, and migrate a couple of our Woo-owned extensions to test extensibility.
We will continue the communication as these updates occur. 

In the meantime, we are keen for you to start using and extending the new editor. If you have any questions or suggestions, please use Github Discussions under the “WooCommerce Product Block Editor” category. 

We are excited about this first big step of improving the experience of managing products and aligning with the direction of WordPress! We hope you are too!