Update Product Editor Handbook (#40514)
* Rename title * Remove common-tasks section as it's currently made redundant by template API documentation * Create index for reusable blocks doc * Update reference to the handbook * Add references to new documentation to the handbook * Add changelog * Update README.md
This commit is contained in:
Nathan Silveira
GitHub
parent
de1fe1bf96
commit
1903b3a759
|
|
@ -1,4 +1,4 @@
|
|||
# Developing extensions for the product editor
|
||||
# Product Editor Development Handbook
|
||||
|
||||
> ⚠️ **Notice:** This documentation is currently a **work in progress**. Please be aware that some sections might be incomplete or subject to change. We appreciate your patience and welcome any contributions!
|
||||
|
||||
|
|
@ -8,11 +8,12 @@ The product editor's UI consists of Groups (currently rendered as tabs), Section
|
|||
|
||||
|
||||
|
||||
The form's structure is defined in PHP using a Template. The template can be modified by using the Block Template API to add new Groups, Sections, and Fields as well as remove existing ones.
|
||||
The form's structure is defined in PHP using a Template, which is a tree structure of blocks. The template can be modified by using the Template API to add new Groups, Sections, and Fields as well as remove existing ones.
|
||||
|
||||
Many extensibility implementations can be done using only the PHP-based Block Template API. More complex interactivity can be implemented using JavaScript and React (the same library used to implement the core blocks used in the product editor). [@woocommerce/create-product-editor-block](../../packages/js/create-product-editor-block/README.md) can help scaffold a development environment with JavaScript and React.
|
||||
Many extensibility implementations can be done using only the PHP-based Block Template API alongside our library of [reusable blocks](../../packages/js/product-editor/src/blocks/README.md). More complex interactivity can be implemented using JavaScript and React (the same library used to implement the core blocks used in the product editor). [@woocommerce/create-product-editor-block](../../packages/js/create-product-editor-block/README.md) can help scaffold a development environment with JavaScript and React.
|
||||
|
||||
## Related documentation
|
||||
|
||||
## Index
|
||||
|
||||
- [Common tasks](common-tasks.md)
|
||||
- [Examples on Template API usage](../../plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/README.md)
|
||||
- [Related hooks and Template API documentation](../../plugins/woocommerce/src/Admin/BlockTemplates/README.md)
|
||||
- [Reusable blocks documentation](../../packages/js/product-editor/src/blocks/README.md)
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
# Common tasks
|
||||
|
||||
> ⚠️ **Notice:** This documentation is currently a **work in progress**. Please be aware that some sections might be incomplete or subject to change. We appreciate your patience and welcome any contributions!
|
||||
|
||||
## Adding a group/section/field next to an existing one
|
||||
|
||||
Here's a snippet that adds a new block to the catalog section, between the first and second fields (order 15):
|
||||
|
||||
```php
|
||||
use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
|
||||
|
||||
if ( ! function_exists( 'YOUR_PREFIX_add_block_after_categories' ) ) {
|
||||
/**
|
||||
* Add a new block to the template.
|
||||
*/
|
||||
function YOUR_PREFIX_add_block_after_categories( BlockInterface $product_categories_field ) {
|
||||
$product_categories_field->get_parent()->add_block(
|
||||
[
|
||||
'id' => 'your-prefix-id',
|
||||
'blockName' => 'woocommerce/product-checkbox-field',
|
||||
'order' => $product_categories_field->get_order() + 5,
|
||||
'attributes' => [
|
||||
'label' => 'Your Checkbox',
|
||||
'property' => 'your_checkbox_bool_property',
|
||||
],
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
add_action( 'woocommerce_block_template_area_product-form_after_add_block_product-categories', 'YOUR_PREFIX_add_block_after_categories' );
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
Comment: Add blocks documentation
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Product Editor Blocks
|
||||
|
||||
This directory contains reusable blocks for the product editor.
|
||||
|
||||
## Reusable blocks
|
||||
|
||||
### [woocommerce/product-checkbox-field](checkbox/README.md)
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
Significance: patch
|
||||
Type: dev
|
||||
Comment: Add reference to product editor handbook
|
||||
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ General interfaces for interacting with block templates are located in the
|
|||
|
||||
## Usage
|
||||
|
||||
For more examples and best practices, please see the Product Editor Development Handbook.
|
||||
For more information on how to extend the product editor, please see the [Product Editor Development Handbook](../../../../../../../docs/product-editor-development/README.md).
|
||||
|
||||
### Adding a new group to product editor templates after an existing group
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue