52 lines
2.2 KiB
Markdown
52 lines
2.2 KiB
Markdown
|
# @woocommerce/create-product-editor-block
|
||
|
|
|
||
|
|
Create Product Editor Block scaffolds a fully functional modern development environment for developing block-based extensions to the new block-based product editor in WooCommerce.
|
||
|
|
|
||
|
|
## Default tooling
|
||
|
|
|
||
|
|
You can use the built-in [wp-env](https://github.com/WordPress/gutenberg/tree/trunk/packages/env) support to easily get a local WordPress environment up and running. It is configured to load the latest released version of WordPress, the latest WooCommerce nightly build and the latest version of the [WooCommerce Beta Tester](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce-beta-tester).
|
||
|
|
|
||
|
|
If you want to change which version of WordPress and WooCommerce are used, you can do so by modifying the `.wp-env.override.json` file.
|
||
|
|
|
||
|
|
Tooling support for linting, code formatting, and compilation are configured by default.
|
||
|
|
|
||
|
|
If you already have a local WordPress development environment configured, you can map the generated project folder under your `plugins` folder.
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
### Generate project folder
|
||
|
|
|
||
|
|
```
|
||
|
|
npx @wordpress/create-block --template @woocommerce/create-product-editor-block my-extension-name
|
||
|
|
```
|
||
|
|
|
||
|
|
### Get started developing
|
||
|
|
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd my-extension-name
|
||
|
|
npx wp-env start # Start Wordpress environment
|
||
|
|
```
|
||
|
|
|
||
|
|
By default, the `wp-env` environment created will have the new block-based product editor enabled. You can disable this by using the WooCommerce Beta Tester (disable the `product-block-editor` feature).
|
||
|
|
|
||
|
|
Navigate to http://localhost:8888/wp-admin/admin.php?page=wc-admin&path=%2Fadd-product to check out your new block!
|
||
|
|
|
||
|
|
### Make changes and re-build your block
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd my-extension-name
|
||
|
|
npm install # Install dependencies
|
||
|
|
npm run build # Build the javascript
|
||
|
|
```
|
||
|
|
|
||
|
|
## Development of this tool
|
||
|
|
|
||
|
|
For development of this tool itself, you can also point to a local directory when creating a product editor block:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npx @wordpress/create-block --template ./path/to/woocommerce/packages/js/create-product-editor-block my-extension-name
|
||
|
|
```
|
||
|
|
|
||
|
|
This tool is a template to be used with [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/trunk/packages/create-block) to create a WooCommerce Product Editor Block starting point.
|