Getting to Know Woo: Extensibility in the New Product Editor

For the past few months, we have been busy building out a brand-new product creation experience. You may have read about it previously, and hopefully even tried it out yourself. If not, don’t worry… we will explain how to do so later in this post!

The product creation process has been redesigned from the ground up to focus on commerce, providing users with a seamless experience for crafting a wide range of products, from simple ones to highly customized options. This experience is still under active development, and we aim to reach feature parity early in 2024. Built with extensibility as a core principle, the new product editor provides developers with straightforward tools to integrate their unique features into the product creation process.

In fact, we are using these mechanisms to develop the new product editor itself!

We are approaching this project with the following guiding principles:

• Provide a low complexity API that can be used via PHP, as we have heard from many developers that this is preferred.
• Provide tooling to help set up the development environment.
• Provide backwards compatibility when possible.
• Use GitHub Discussions for brainstorming and decision-making, inviting contributions and feedback from the development community.

About Product Editor Extensibility

The design

The new product editor is organized into clearly defined tabs and sections, reflecting our research that finds that merchants think in terms of tasks and goals while creating new products in WooCommerce. 

You can help ensure your extension makes the most of this new design by reading our extensibility guidelines, which will help you determine where you should add new features to the product editor.

The implementation

The new product editor is implemented using the same Blocks API that powers the post and site editors in WordPress. However, whereas a “regular” block editor allows the end user to add blocks anywhere and rearrange those blocks, the product editor offers a more familiar, structured form-based experience, which is more suitable for the data entry and modification that is at the heart of product management.

As such, we have developed a simple PHP-based API, targeting our PHP developers in the WooCommerce community, which allows developers to easily extend the product editor’s form.

Extensibility features

Through a PHP-based API, developers are able to:

• Add new blocks to the form; we supply a number of generic blocks that can be used out of the box, including:
  • Checkbox
  • Pricing
  • Radio
  • Text
  • Toggle
• Remove blocks from the form
• Conditionally hide and disable blocks on the form based on properties of the edited product, such as the product type

If an extension requires interactivity not available via our generic blocks, developers can easily implement a custom block using JavaScript and React.

Getting started

Try out the new product editor

Note: Since WooCommerce 7.9 (mid-July 2023), a subset of new stores have the new product editor auto-enabled as part of tests that Woo is running to help shape the new product creation experience. Users can easily opt-out of the new product editor and return to the classic product editor if they need functionality and extensions that are not yet available in the new product editor.

If you haven’t already, try out the new product editor so you can become familiar with how the new experience feels.

Go to WooCommerce > Settings > Advanced > Features and enable Try the new product editor (Beta).

Next, can go to Products > Add New to try out the new editor.

Try adding a new block to the editor

There are a number of examples in the documentation on how to use the PHP-based API. Here is a simple example that adds a new field after the product name field. Add this to a test plugin and reload the product editor page.

<?php

use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;


if ( ! function_exists( 'YOUR_PREFIX_add_block' ) ) {
	/**
	 * Add a new block to the template after the product name field.
	 *
	 * @param BlockInterface $product_name_field The product name block.
	 */
	function YOUR_PREFIX_add_block( BlockInterface $product_name_field ) {
		$parent = $product_name_field->get_parent();


		if ( ! method_exists( $parent, 'add_block' ) ) {
			return;
		}


		$parent->add_block(
			[
				'id'         => 'example-block',
				'order'      => $product_name_field->get_order() + 5,
				'blockName'  => 'woocommerce/product-text-field',
				'attributes' => [
					'property' => 'meta_data.example_block_property',
					'label'    => __( 'Example block', 'YOUR_TEXT_DOMAIN' ),
				],
			]
		);
	}


	add_action(
		'woocommerce_block_template_area_product-form_after_add_block_product-name',
		'YOUR_PREFIX_add_block'
	);
}

Here is the result:

Note that the block’s input will also be persisted automatically in the metadata of the product. There is no other configuration necessary!

Explore the extensibility guidelines

Now that you have a feel for the new product editor, start thinking about how to best bring your extension’s functionality to merchants using it. Read the extensibility guidelines for tips and best practices.

Let us know what you think

Are there things you love about extending the new product editor? We sure hope so! Let us know.

Even more importantly, let us know what documentation and functionality is missing that you need in order to successfully bring your extension to the new product editor.

Share your thoughts with us in our discussion forum and in Slack:

• GitHub Discussions under the WooCommerce Product Block Editor category
• WooCommerce Community Slack in the #woocommerce-product-editor-extensibility channel

Where to find more information

We are actively working on providing documentation for new product editor development:

• Product Editor Development Handbook – start here!
• Product Editor User Experience and Extensibility Guidelines
• Product Editor Roadmap