Creating reusable blocks to support development of product editor extensions

[nathanss]

As we are progressing in the development of the product editor, we want to provide as many reusable, generic blocks as possible.

For the classic product editor, we have the meta-box-functions, and I think we should use that as a reference and have at least feature parity with it. But this is also a good opportunity to improve.

Currently, all the blocks we created are in a single folder on the product-editor package. I think we should have a clear separation between the ones that are reusable (e.g. checkbox) and the ones that are specific fields (e.g. product name field). That way a developer can easily see what blocks are available to use.

I also think that all 'generic' blocks should support an "isMeta" boolean attribute (or something similar), that allows the field to be automatically persisted in post_meta without having to extend the REST API. This is being implemented in #40337, as an example.

To sum it up:

• Considering what we currently have in terms of blocks and what the meta-box functions offer for the classic editor, what other types of blocks could we create?
• How can we better organize our blocks so reusable blocks are more findable?
• Should we allow persisting to post_meta 'automatically' for all reusable blocks?

[mattsherman]

Here are the types of fields from wc-meta-box-functions.php:

• text input
• hidden input (I don't think there is any need for this in the context of the product editor, as with a custom block type you can update whatever Product properties you want)
• text area input
• checkbox
• select
• radio button
• note

Here are the reusable blocks currently in @woocommerce/product-editor:

• checkbox
• collapsible (to hide advanced fields, etc.)
• conditional (a wrapper to conditionally show fields -- we will also have support directly on every block type for this soon)
• notice (not 100% reusable yet)
• radio button
• section (for sections and sub-sections in a tab/group)
• tab (for top-level groups in the editor)
• taxonomy (to select from taxonomies, including custom taxonomies)
• toggle

[mattsherman]

Considering what we currently have in terms of blocks and what the meta-box functions offer for the classic editor, what other types of blocks could we create?

• number
• currency

How can we better organize our blocks so reusable blocks are more findable?

• Separate them into separate folders, with separate README files

Should we allow persisting to post_meta 'automatically' for all reusable blocks?

I think all reusable blocks should allow binding to a Product property or a post_meta value.

[louwie17]

@mattsherman summed up most of the main fields that would be beneficial. I don't think we want to go to far beyond that list, but instead do a case by case after that. If plugin owners are requesting a certain re-usuable field for example ( or we see one beneficial for our internally managed plugins - like the taxonomy field ).

One thing that I was thinking about is that we should be careful with the naming of these blocks and make them WooCommerce product specific ( not super generic ). I was mostly thinking about this for blocks that support creating forms in the block editor, as they would have a similar list of fields for that type of thing. Like the Gutenberg Forms plugin for example ( see block types ).

On the same train of thought, it would be kinda cool if we could re-use our generic blocks for some kind of form builder within Gutenberg. As I don't think Gutenberg has a native block(s) for this.

[louwie17]

I guess I will tag on that a date(time) picker will be useful. Similar to the one we use for scheduled sale block.

[AnnaMag]

cc @woocommerce/automata @woocommerce/ventures @woocommerce/somewherewarm

[octaedro]

Thank you @nathanss for kicking this out.

Currently, all the blocks we created are in a single folder on the product-editor package. I think we should have a clear separation between the ones that are reusable (e.g. checkbox) and the ones that are specific fields (e.g. product name field). That way a developer can easily see what blocks are available to use.

Good idea! This separation will also help us to be extra careful with reusable blocks since we know they will be used in other contexts.

Should we allow persisting to post_meta 'automatically' for all reusable blocks?

This definitely sounds like a very interesting approach.

[eason9487]

Hi there, here are some questions from the perspective of Woo extension developer:

• Would the tooltip attribute offered by woocommerce/product-checkbox-field be added to all/more generic blocks?
• Would the @woocommerce/product-editor package expose the useProductEntityProp hook?