4fa2e3822c
* test bumping node to v18 * remove community contributor condition from review assignment * Add changefile(s) from automation for the following project(s): @woocommerce/tracks, @woocommerce/onboarding, @woocommerce/number, @woocommerce/notices, @woocommerce/navigation, @woocommerce/internal-js-tests, @woocommerce/extend-cart-checkout-block, @woocommerce/expression-evaluation, @woocommerce/explat, @woocommerce/experimental, @woocommerce/eslint-plugin, @woocommerce/dependency-extraction-webpack-plugin, @woocommerce/date, @woocommerce/data, @woocommerce/customer-effort-score, @woocommerce/currency, @woocommerce/csv-export, @woocommerce/create-woo-extension, @woocommerce/create-product-editor-block, @woocommerce/components, @woocommerce/api, @woocommerce/admin-e2e-tests, woocommerce-blocks, woocommerce-beta-tester, woocommerce, woo-ai * bump node to v20 * Add changefile(s) from automation for the following project(s): @woocommerce/tracks, @woocommerce/onboarding, @woocommerce/number, @woocommerce/notices, @woocommerce/navigation, @woocommerce/internal-js-tests, @woocommerce/extend-cart-checkout-block, @woocommerce/expression-evaluation, @woocommerce/explat, @woocommerce/experimental, @woocommerce/eslint-plugin, @woocommerce/dependency-extraction-webpack-plugin, @woocommerce/date, @woocommerce/data, @woocommerce/customer-effort-score, @woocommerce/currency, @woocommerce/csv-export, @woocommerce/create-woo-extension, @woocommerce/create-product-editor-block, @woocommerce/components, @woocommerce/api, @woocommerce/admin-e2e-tests, packages/php/remote-specs-validation, woocommerce-blocks, woocommerce-beta-tester, woocommerce, woo-ai * Add changefile(s) from automation for the following project(s): @woocommerce/tracks, @woocommerce/onboarding, @woocommerce/number, @woocommerce/notices, @woocommerce/navigation, @woocommerce/internal-js-tests, @woocommerce/extend-cart-checkout-block, @woocommerce/expression-evaluation, @woocommerce/explat, @woocommerce/experimental, @woocommerce/eslint-plugin, @woocommerce/dependency-extraction-webpack-plugin, @woocommerce/date, @woocommerce/data, @woocommerce/customer-effort-score, @woocommerce/currency, @woocommerce/csv-export, @woocommerce/create-woo-extension, @woocommerce/create-product-editor-block, @woocommerce/components, @woocommerce/api, @woocommerce/admin-e2e-tests, woocommerce-blocks, woocommerce-beta-tester, woocommerce, woo-ai * add blocks eslint-plugin-woocommerce to project workspace * add e2e-environment as a peer to e2e-utils * restore version on @woocommerce/api * update lock file * move e2e-environment to devDependencies * add undefined location check to admin js test --------- Co-authored-by: Ron Rennick <ronald.rennick@automattic.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|---|---|---|
| .. | ||
| block-templates | ||
| changelog | ||
| plugin-templates | ||
| .gitignore | ||
| CHANGELOG.md | ||
| README.md | ||
| composer.json | ||
| composer.lock | ||
| index.js | ||
| package.json | ||
README.md
@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 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.
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
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
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:
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 to create a WooCommerce Product Editor Block starting point.