diff --git a/packages/js/product-editor/changelog/doc-checkbox-field b/packages/js/product-editor/changelog/doc-checkbox-field new file mode 100644 index 00000000000..5511eef2c79 --- /dev/null +++ b/packages/js/product-editor/changelog/doc-checkbox-field @@ -0,0 +1,5 @@ +Significance: patch +Type: enhancement +Comment: Add documentation for woocommerce/product-checkbox-field + + diff --git a/packages/js/product-editor/src/blocks/checkbox/README.md b/packages/js/product-editor/src/blocks/checkbox/README.md new file mode 100644 index 00000000000..ddbad959b38 --- /dev/null +++ b/packages/js/product-editor/src/blocks/checkbox/README.md @@ -0,0 +1,67 @@ +# woocommerce/product-checkbox-field + +A reusable checkbox for the product editor. + +![Product checkbox field screenshot](https://woocommerce.files.wordpress.com/2023/09/checkbox.png) + +_Please note that to persist a custom field in the product it also needs to be added to the WooCommerce REST API._ + +## Attributes + +### title + +- **Type:** `String` +- **Required:** `No` + +Header that appears above the checkbox. + +### label + +- **Type:** `String` +- **Required:** `No` + +Label that appears at the side of the checkbox. + +### property + +- **Type:** `String` +- **Required:** `Yes` + +Property in which the checkbox value is stored. + +### tooltip + +- **Type:** `String` +- **Required:** `No` + +Tooltip text that is shown when hovering the icon at the side of the label. + +## Example + +Here's an example on the code that is used for the 'sold_individually' field in the Inventory section: + +```php +$parent_container->add_block( + [ + 'id' => 'product-limit-purchase', + 'blockName' => 'woocommerce/product-checkbox-field', + 'order' => 20, + 'attributes' => [ + 'title' => __( + 'Restrictions', + 'woocommerce' + ), + 'label' => __( + 'Limit purchases to 1 item per order', + 'woocommerce' + ), + 'property' => 'sold_individually', + 'tooltip' => __( + 'When checked, customers will be able to purchase only 1 item in a single order. This is particularly useful for items that have limited quantity, like art or handmade goods.', + 'woocommerce' + ), + ], + ] +); +``` + diff --git a/packages/js/product-editor/src/blocks/checkbox/block.json b/packages/js/product-editor/src/blocks/checkbox/block.json index c2b2f4e53b5..88d0fafa767 100644 --- a/packages/js/product-editor/src/blocks/checkbox/block.json +++ b/packages/js/product-editor/src/blocks/checkbox/block.json @@ -4,7 +4,7 @@ "name": "woocommerce/product-checkbox-field", "title": "Product checkbox control", "category": "woocommerce", - "description": "The product checkbox.", + "description": "A reusable checkbox for the product editor.", "keywords": [ "products", "checkbox", "input" ], "textdomain": "default", "attributes": {