diff --git a/packages/js/create-product-editor-block/README.md b/packages/js/create-product-editor-block/README.md new file mode 100644 index 00000000000..5bffbadb44f --- /dev/null +++ b/packages/js/create-product-editor-block/README.md @@ -0,0 +1,51 @@ +# @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. diff --git a/packages/js/create-product-editor-block/block-templates/edit.tsx.mustache b/packages/js/create-product-editor-block/block-templates/edit.tsx.mustache new file mode 100644 index 00000000000..35a00f638b8 --- /dev/null +++ b/packages/js/create-product-editor-block/block-templates/edit.tsx.mustache @@ -0,0 +1,24 @@ +/** + * External dependencies + */ +import type { BlockAttributes } from '@wordpress/blocks'; +import { useBlockProps } from '@wordpress/block-editor'; +import { createElement } from '@wordpress/element'; + +/** + * The edit function describes the structure of your block in the context of the + * editor. This represents what the editor will render when the block is used. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit + * + */ +export function Edit( { attributes }: { attributes: BlockAttributes } ) { + /** + * React hook that is used to mark the block wrapper element. + * It provides all the necessary props like the class name. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops + */ + const blockProps = useBlockProps(); + return
{ attributes.message }
; +} diff --git a/packages/js/create-product-editor-block/block-templates/editor.scss.mustache b/packages/js/create-product-editor-block/block-templates/editor.scss.mustache new file mode 100644 index 00000000000..90384c951b4 --- /dev/null +++ b/packages/js/create-product-editor-block/block-templates/editor.scss.mustache @@ -0,0 +1,12 @@ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-{{namespace}}-{{slug}} { + font-size: 32px; + padding: 25px; + background: yellow; + border: 1px solid black; +} diff --git a/packages/js/create-product-editor-block/block-templates/index.ts.mustache b/packages/js/create-product-editor-block/block-templates/index.ts.mustache new file mode 100644 index 00000000000..c000ddf2675 --- /dev/null +++ b/packages/js/create-product-editor-block/block-templates/index.ts.mustache @@ -0,0 +1,27 @@ +/** + * External dependencies + */ +import { BlockConfiguration, registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import './editor.scss'; // see https://www.npmjs.com/package/@wordpress/scripts#using-css + +/** + * Internal dependencies + */ +import { Edit } from './edit'; +import metadata from './block.json'; + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block + */ +registerBlockType( metadata as BlockConfiguration, { + /** + * @see ./edit.js + */ + edit: Edit, +} ); diff --git a/packages/js/create-product-editor-block/changelog/add-create-product-editor-block b/packages/js/create-product-editor-block/changelog/add-create-product-editor-block new file mode 100644 index 00000000000..57509fe65ae --- /dev/null +++ b/packages/js/create-product-editor-block/changelog/add-create-product-editor-block @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Initial version of @woocommerce/create-product-editor-block diff --git a/packages/js/create-product-editor-block/composer.json b/packages/js/create-product-editor-block/composer.json new file mode 100644 index 00000000000..9567daedbbc --- /dev/null +++ b/packages/js/create-product-editor-block/composer.json @@ -0,0 +1,32 @@ +{ + "name": "woocommerce/extend-cart-checkout-block", + "description": "A template to be used with `@wordpress/create-block` to create a WooCommerce extension.", + "type": "library", + "license": "GPL-3.0-or-later", + "minimum-stability": "dev", + "require-dev": { + "automattic/jetpack-changelogger": "3.3.0" + }, + "config": { + "platform": { + "php": "7.2" + } + }, + "extra": { + "changelogger": { + "formatter": { + "filename": "../../../tools/changelogger/class-package-formatter.php" + }, + "types": { + "fix": "Fixes an existing bug", + "add": "Adds functionality", + "update": "Update existing functionality", + "dev": "Development related task", + "tweak": "A minor adjustment to the codebase", + "performance": "Address performance issues", + "enhancement": "Improve existing functionality" + }, + "changelog": "CHANGELOG.md" + } + } +} diff --git a/packages/js/create-product-editor-block/composer.lock b/packages/js/create-product-editor-block/composer.lock new file mode 100644 index 00000000000..474bee2ce3e --- /dev/null +++ b/packages/js/create-product-editor-block/composer.lock @@ -0,0 +1,483 @@ +{ + "_readme": [ + "This file locks the dependencies of your project to a known state", + "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", + "This file is @generated automatically" + ], + "content-hash": "e22045358357e9c229d188944b337d8f", + "packages": [], + "packages-dev": [ + { + "name": "automattic/jetpack-changelogger", + "version": "v3.3.0", + "source": { + "type": "git", + "url": "https://github.com/Automattic/jetpack-changelogger.git", + "reference": "8f63c829b8d1b0d7b1d5de93510d78523ed18959" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/Automattic/jetpack-changelogger/zipball/8f63c829b8d1b0d7b1d5de93510d78523ed18959", + "reference": "8f63c829b8d1b0d7b1d5de93510d78523ed18959", + "shasum": "" + }, + "require": { + "php": ">=5.6", + "symfony/console": "^3.4 || ^5.2 || ^6.0", + "symfony/process": "^3.4 || ^5.2 || ^6.0", + "wikimedia/at-ease": "^1.2 || ^2.0" + }, + "require-dev": { + "wikimedia/testing-access-wrapper": "^1.0 || ^2.0", + "yoast/phpunit-polyfills": "1.0.4" + }, + "bin": [ + "bin/changelogger" + ], + "type": "project", + "extra": { + "autotagger": true, + "branch-alias": { + "dev-trunk": "3.3.x-dev" + }, + "mirror-repo": "Automattic/jetpack-changelogger", + "version-constants": { + "::VERSION": "src/Application.php" + }, + "changelogger": { + "link-template": "https://github.com/Automattic/jetpack-changelogger/compare/${old}...${new}" + } + }, + "autoload": { + "psr-4": { + "Automattic\\Jetpack\\Changelog\\": "lib", + "Automattic\\Jetpack\\Changelogger\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "GPL-2.0-or-later" + ], + "description": "Jetpack Changelogger tool. Allows for managing changelogs by dropping change files into a changelog directory with each PR.", + "support": { + "source": "https://github.com/Automattic/jetpack-changelogger/tree/v3.3.0" + }, + "time": "2022-12-26T13:49:01+00:00" + }, + { + "name": "psr/log", + "version": "1.1.4", + "source": { + "type": "git", + "url": "https://github.com/php-fig/log.git", + "reference": "d49695b909c3b7628b6289db5479a1c204601f11" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/php-fig/log/zipball/d49695b909c3b7628b6289db5479a1c204601f11", + "reference": "d49695b909c3b7628b6289db5479a1c204601f11", + "shasum": "" + }, + "require": { + "php": ">=5.3.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.1.x-dev" + } + }, + "autoload": { + "psr-4": { + "Psr\\Log\\": "Psr/Log/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "PHP-FIG", + "homepage": "https://www.php-fig.org/" + } + ], + "description": "Common interface for logging libraries", + "homepage": "https://github.com/php-fig/log", + "keywords": [ + "log", + "psr", + "psr-3" + ], + "support": { + "source": "https://github.com/php-fig/log/tree/1.1.4" + }, + "time": "2021-05-03T11:20:27+00:00" + }, + { + "name": "symfony/console", + "version": "3.4.x-dev", + "source": { + "type": "git", + "url": "https://github.com/symfony/console.git", + "reference": "a10b1da6fc93080c180bba7219b5ff5b7518fe81" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/console/zipball/a10b1da6fc93080c180bba7219b5ff5b7518fe81", + "reference": "a10b1da6fc93080c180bba7219b5ff5b7518fe81", + "shasum": "" + }, + "require": { + "php": "^5.5.9|>=7.0.8", + "symfony/debug": "~2.8|~3.0|~4.0", + "symfony/polyfill-mbstring": "~1.0" + }, + "conflict": { + "symfony/dependency-injection": "<3.4", + "symfony/process": "<3.3" + }, + "provide": { + "psr/log-implementation": "1.0" + }, + "require-dev": { + "psr/log": "~1.0", + "symfony/config": "~3.3|~4.0", + "symfony/dependency-injection": "~3.4|~4.0", + "symfony/event-dispatcher": "~2.8|~3.0|~4.0", + "symfony/lock": "~3.4|~4.0", + "symfony/process": "~3.3|~4.0" + }, + "suggest": { + "psr/log": "For using the console logger", + "symfony/event-dispatcher": "", + "symfony/lock": "", + "symfony/process": "" + }, + "type": "library", + "autoload": { + "psr-4": { + "Symfony\\Component\\Console\\": "" + }, + "exclude-from-classmap": [ + "/Tests/" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Fabien Potencier", + "email": "fabien@symfony.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony Console Component", + "homepage": "https://symfony.com", + "support": { + "source": "https://github.com/symfony/console/tree/3.4" + }, + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2020-10-24T10:57:07+00:00" + }, + { + "name": "symfony/debug", + "version": "4.4.x-dev", + "source": { + "type": "git", + "url": "https://github.com/symfony/debug.git", + "reference": "1a692492190773c5310bc7877cb590c04c2f05be" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/debug/zipball/1a692492190773c5310bc7877cb590c04c2f05be", + "reference": "1a692492190773c5310bc7877cb590c04c2f05be", + "shasum": "" + }, + "require": { + "php": ">=7.1.3", + "psr/log": "^1|^2|^3" + }, + "conflict": { + "symfony/http-kernel": "<3.4" + }, + "require-dev": { + "symfony/http-kernel": "^3.4|^4.0|^5.0" + }, + "default-branch": true, + "type": "library", + "autoload": { + "psr-4": { + "Symfony\\Component\\Debug\\": "" + }, + "exclude-from-classmap": [ + "/Tests/" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Fabien Potencier", + "email": "fabien@symfony.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Provides tools to ease debugging PHP code", + "homepage": "https://symfony.com", + "support": { + "source": "https://github.com/symfony/debug/tree/v4.4.44" + }, + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "abandoned": "symfony/error-handler", + "time": "2022-07-28T16:29:46+00:00" + }, + { + "name": "symfony/polyfill-mbstring", + "version": "dev-main", + "source": { + "type": "git", + "url": "https://github.com/symfony/polyfill-mbstring.git", + "reference": "f9c7affe77a00ae32ca127ca6833d034e6d33f25" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/f9c7affe77a00ae32ca127ca6833d034e6d33f25", + "reference": "f9c7affe77a00ae32ca127ca6833d034e6d33f25", + "shasum": "" + }, + "require": { + "php": ">=7.1" + }, + "provide": { + "ext-mbstring": "*" + }, + "suggest": { + "ext-mbstring": "For best performance" + }, + "default-branch": true, + "type": "library", + "extra": { + "branch-alias": { + "dev-main": "1.28-dev" + }, + "thanks": { + "name": "symfony/polyfill", + "url": "https://github.com/symfony/polyfill" + } + }, + "autoload": { + "files": [ + "bootstrap.php" + ], + "psr-4": { + "Symfony\\Polyfill\\Mbstring\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Nicolas Grekas", + "email": "p@tchwork.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony polyfill for the Mbstring extension", + "homepage": "https://symfony.com", + "keywords": [ + "compatibility", + "mbstring", + "polyfill", + "portable", + "shim" + ], + "support": { + "source": "https://github.com/symfony/polyfill-mbstring/tree/main" + }, + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2023-01-30T17:25:47+00:00" + }, + { + "name": "symfony/process", + "version": "3.4.x-dev", + "source": { + "type": "git", + "url": "https://github.com/symfony/process.git", + "reference": "b8648cf1d5af12a44a51d07ef9bf980921f15fca" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/process/zipball/b8648cf1d5af12a44a51d07ef9bf980921f15fca", + "reference": "b8648cf1d5af12a44a51d07ef9bf980921f15fca", + "shasum": "" + }, + "require": { + "php": "^5.5.9|>=7.0.8" + }, + "type": "library", + "autoload": { + "psr-4": { + "Symfony\\Component\\Process\\": "" + }, + "exclude-from-classmap": [ + "/Tests/" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Fabien Potencier", + "email": "fabien@symfony.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony Process Component", + "homepage": "https://symfony.com", + "support": { + "source": "https://github.com/symfony/process/tree/3.4" + }, + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2020-10-24T10:57:07+00:00" + }, + { + "name": "wikimedia/at-ease", + "version": "v2.0.0", + "source": { + "type": "git", + "url": "https://github.com/wikimedia/at-ease.git", + "reference": "013ac61929797839c80a111a3f1a4710d8248e7a" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/wikimedia/at-ease/zipball/013ac61929797839c80a111a3f1a4710d8248e7a", + "reference": "013ac61929797839c80a111a3f1a4710d8248e7a", + "shasum": "" + }, + "require": { + "php": ">=5.6.99" + }, + "require-dev": { + "jakub-onderka/php-console-highlighter": "0.3.2", + "jakub-onderka/php-parallel-lint": "1.0.0", + "mediawiki/mediawiki-codesniffer": "22.0.0", + "mediawiki/minus-x": "0.3.1", + "ockcyp/covers-validator": "0.5.1 || 0.6.1", + "phpunit/phpunit": "4.8.36 || ^6.5" + }, + "type": "library", + "autoload": { + "files": [ + "src/Wikimedia/Functions.php" + ], + "psr-4": { + "Wikimedia\\AtEase\\": "src/Wikimedia/AtEase/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "GPL-2.0-or-later" + ], + "authors": [ + { + "name": "Tim Starling", + "email": "tstarling@wikimedia.org" + }, + { + "name": "MediaWiki developers", + "email": "wikitech-l@lists.wikimedia.org" + } + ], + "description": "Safe replacement to @ for suppressing warnings.", + "homepage": "https://www.mediawiki.org/wiki/at-ease", + "support": { + "source": "https://github.com/wikimedia/at-ease/tree/master" + }, + "time": "2018-10-10T15:39:06+00:00" + } + ], + "aliases": [], + "minimum-stability": "dev", + "stability-flags": [], + "prefer-stable": false, + "prefer-lowest": false, + "platform": [], + "platform-dev": [], + "platform-overrides": { + "php": "7.2" + }, + "plugin-api-version": "2.3.0" +} diff --git a/packages/js/create-product-editor-block/index.js b/packages/js/create-product-editor-block/index.js new file mode 100644 index 00000000000..e0a79d35098 --- /dev/null +++ b/packages/js/create-product-editor-block/index.js @@ -0,0 +1,50 @@ +/** + * External dependencies + */ +const { join } = require( 'path' ); + +module.exports = { + defaultValues: { + namespace: 'extension', + slug: 'example-product-editor-block', + version: '0.1.0', + category: 'widgets', + title: 'Example Product Editor Block', + description: 'A block to demonstrate extending the Product Editor', + dashicon: 'flag', + license: 'GPL-3.0+', + attributes: { + message: { + type: 'string', + source: 'text', + selector: 'div', + }, + }, + supports: { + html: false, + inserter: false, + }, + npmDevDependencies: [ + '@types/wordpress__block-editor@^7.0.0', + '@types/wordpress__blocks@^11.0.9', + '@woocommerce/dependency-extraction-webpack-plugin', + '@woocommerce/eslint-plugin', + '@wordpress/prettier-config', + '@wordpress/stylelint-config', + 'eslint-import-resolver-typescript', + ], + customScripts: { + postinstall: 'composer install', + }, + wpScripts: true, + wpEnv: true, + editorScript: 'file:./index.js', + editorStyle: 'file:./index.css', + style: 'file:./index.css', + customBlockJSON: { + script: 'file:./index.js', + }, + }, + pluginTemplatesPath: join( __dirname, 'plugin-templates' ), + blockTemplatesPath: join( __dirname, 'block-templates' ), +}; diff --git a/packages/js/create-product-editor-block/package.json b/packages/js/create-product-editor-block/package.json new file mode 100644 index 00000000000..da53e376d27 --- /dev/null +++ b/packages/js/create-product-editor-block/package.json @@ -0,0 +1,25 @@ +{ + "name": "@woocommerce/create-product-editor-block", + "version": "0.0.1", + "description": "A template to be used with `@wordpress/create-block` to create a Product Editor block.", + "main": "index.js", + "engines": { + "node": "^16.14.1", + "pnpm": "^8.3.1" + }, + "scripts": { + "postinstall": "composer install", + "changelog": "composer exec -- changelogger" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/woocommerce/woocommerce.git" + }, + "keywords": [], + "author": "", + "license": "GPL-3.0+", + "bugs": { + "url": "https://github.com/woocommerce/woocommerce/issues" + }, + "homepage": "https://github.com/woocommerce/woocommerce/tree/trunk/packages/js/create-product-editor-block-extensionv#readme" +} diff --git a/packages/js/create-product-editor-block/plugin-templates/$slug.php.mustache b/packages/js/create-product-editor-block/plugin-templates/$slug.php.mustache new file mode 100644 index 00000000000..e96cb8f7362 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/$slug.php.mustache @@ -0,0 +1,97 @@ + $tab ) { + $tab_properties = $tab[1]; + + if ( 'general' === $tab_properties['id'] ) { + $tab_sections = $tab[2]; + + foreach ( $tab_sections as $section_index => $section ) { + $section_properties = $section[1]; + + // TODO: this is not the right way to do this, since it is checking a localized string. + if ( 'Basic details' === $section_properties['title'] ) { + $section_fields = $section[2]; + + // add our block to the end of the section + $section_fields[] = [ + '{{namespace}}/{{slug}}', + [ + 'message' => '{{title}}', + ] + ]; + + // update the template with our new block + $args[ 'template' ][ $tab_index ][2][ $section_index ][2] = $section_fields; + + break; + } + } + + break; + } + } + + return $args; +} +add_filter( 'woocommerce_register_post_type_product', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_add_block_to_product_editor', 100 ); diff --git a/packages/js/create-product-editor-block/plugin-templates/.editorconfig.mustache b/packages/js/create-product-editor-block/plugin-templates/.editorconfig.mustache new file mode 100644 index 00000000000..d7dbce738b0 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/.editorconfig.mustache @@ -0,0 +1,27 @@ +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org + +# WordPress Coding Standards +# https://make.wordpress.org/core/handbook/coding-standards/ + +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 4 +tab_width = 4 +indent_style = tab +insert_final_newline = true +trim_trailing_whitespace = true + +[*.txt] +trim_trailing_whitespace = false + +[*.{md,json,yml}] +trim_trailing_whitespace = false +indent_style = space +indent_size = 2 + +[*.json] +indent_style = tab \ No newline at end of file diff --git a/packages/js/create-product-editor-block/plugin-templates/.eslintrc.js.mustache b/packages/js/create-product-editor-block/plugin-templates/.eslintrc.js.mustache new file mode 100644 index 00000000000..22ddc24c584 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/.eslintrc.js.mustache @@ -0,0 +1,6 @@ +module.exports = { + extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ], + rules: { + 'react/react-in-jsx-scope': 'off', + }, +}; diff --git a/packages/js/create-product-editor-block/plugin-templates/.gitignore.mustache b/packages/js/create-product-editor-block/plugin-templates/.gitignore.mustache new file mode 100644 index 00000000000..14dfbf25c04 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/.gitignore.mustache @@ -0,0 +1,62 @@ + +# Operating System files +.DS_Store +Thumbs.db + +# IDE files +.idea +.vscode/* +project.xml +project.properties +.project +.settings* +*.sublime-project +*.sublime-workspace +.sublimelinterrc + +# Sass +.sass-cache/ + +# Logs +logs/ + +# Environment files +wp-cli.local.yml +yarn-error.log +npm-debug.log +.pnpm-debug.log + +# Build files +*.sql +*.swp +*.zip + +# Built packages +build/ +build-module/ +build-style/ +build-types/ +dist/ + +# Project files +node_modules/ +vendor/ + +# TypeScript files +tsconfig.tsbuildinfo + +# Node Package Dependencies +package-lock.json + +# wp-env config +.wp-env.override.json + +# Unit tests +tmp/ + +# Composer +vendor/ +bin/composer/**/vendor/ +lib/vendor/ +contributors.md +contributors.html diff --git a/packages/js/create-product-editor-block/plugin-templates/.prettierrc.json.mustache b/packages/js/create-product-editor-block/plugin-templates/.prettierrc.json.mustache new file mode 100644 index 00000000000..235376574a9 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/.prettierrc.json.mustache @@ -0,0 +1 @@ +"@wordpress/prettier-config" diff --git a/packages/js/create-product-editor-block/plugin-templates/.stylelintrc.mustache b/packages/js/create-product-editor-block/plugin-templates/.stylelintrc.mustache new file mode 100644 index 00000000000..244450b89e8 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/.stylelintrc.mustache @@ -0,0 +1,3 @@ +{ + "extends": "@wordpress/stylelint-config" +} diff --git a/packages/js/create-product-editor-block/plugin-templates/.wp-env.override.json.mustache b/packages/js/create-product-editor-block/plugin-templates/.wp-env.override.json.mustache new file mode 100644 index 00000000000..15e8c7346d6 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/.wp-env.override.json.mustache @@ -0,0 +1,20 @@ +{ + "phpVersion": "8.2", + "core": "https://wordpress.org/wordpress-6.2.1.zip", + "plugins": [ + "https://github.com/woocommerce/woocommerce/releases/download/nightly/woocommerce-trunk-nightly.zip", + "https://github.com/woocommerce/woocommerce/releases/download/wc-beta-tester-2.3.0/woocommerce-beta-tester.zip", + "." + ], + "config": { + "JETPACK_AUTOLOAD_DEV": true, + "WP_DEBUG": true, + "WP_DEBUG_LOG": true, + "WP_DEBUG_DISPLAY": false, + "SCRIPT_DEBUG": true, + "ALTERNATE_WP_CRON": true, + }, + "lifecycleScripts": { + "afterStart": "npx wp-env run cli wp option update woocommerce_feature_product_block_editor_enabled 'yes'" + } +} diff --git a/packages/js/create-product-editor-block/plugin-templates/README.md.mustache b/packages/js/create-product-editor-block/plugin-templates/README.md.mustache new file mode 100644 index 00000000000..170b237e199 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/README.md.mustache @@ -0,0 +1,21 @@ +# {{title}} + +A WooCommerce Product Editor Block inspired by [Create Product Editor Block](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/create-product-editor-block/README.md). + +## Getting Started + +### Prerequisites + +- [NPM](https://www.npmjs.com/) +- [Composer](https://getcomposer.org/download/) +- [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) + +### Installation and Build + +``` +npm install +npm run build +npx wp-env start +``` + +Visit the Add New Product page at http://localhost:8888/wp-admin/admin.php?page=wc-admin&path=%2Fadd-product. diff --git a/packages/js/create-product-editor-block/plugin-templates/composer.json.mustache b/packages/js/create-product-editor-block/plugin-templates/composer.json.mustache new file mode 100644 index 00000000000..0f88a317a79 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/composer.json.mustache @@ -0,0 +1,18 @@ +{ + "name": "{{namespace}}/{{slug}}", + "description": "{{description}}", + "autoload": { + "psr-4": { + "{{slugPascalCase}}\\": "includes/" + } + }, + "require-dev": { + "phpunit/phpunit": "^9.0", + "automattic/jetpack-autoloader": "^2" + }, + "config": { + "allow-plugins": { + "automattic/jetpack-autoloader": true + } + } +} diff --git a/packages/js/create-product-editor-block/plugin-templates/readme.txt.mustache b/packages/js/create-product-editor-block/plugin-templates/readme.txt.mustache new file mode 100644 index 00000000000..f069906fb19 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/readme.txt.mustache @@ -0,0 +1,61 @@ +=== {{title}} === +{{#author}} +Contributors: {{author}} +{{/author}} +Tags: block +Tested up to: 6.1 +Stable tag: {{version}} +{{#license}} +License: {{license}} +{{/license}} +{{#licenseURI}} +License URI: {{{licenseURI}}} +{{/licenseURI}} + +{{description}} + +== Description == + +This is the long description. No limit, and you can use Markdown (as well as in the following sections). + +For backwards compatibility, if this section is missing, the full length of the short description will be used, and +Markdown parsed. + +== Installation == + +This section describes how to install the plugin and get it working. + +e.g. + +1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly. +1. Activate the plugin through the 'Plugins' screen in WordPress + + +== Frequently Asked Questions == + += A question that someone might have = + +An answer to that question. + += What about foo bar? = + +Answer to foo bar dilemma. + +== Screenshots == + +1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from +the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets +directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png` +(or jpg, jpeg, gif). +2. This is the second screen shot + +== Changelog == + += {{version}} = +* Release + +== Arbitrary section == + +You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated +plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or +"installation." Arbitrary sections will be shown below the built-in sections outlined above. diff --git a/packages/js/create-product-editor-block/plugin-templates/tsconfig.json.mustache b/packages/js/create-product-editor-block/plugin-templates/tsconfig.json.mustache new file mode 100644 index 00000000000..ba66b13b380 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/tsconfig.json.mustache @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "target": "es2019", + "module": "esnext", + "moduleResolution": "node", + "allowJs": true, + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "jsx": "react", + "jsxFactory": "createElement", + "jsxFragmentFactory": "Fragment", + "rootDir": "src", + "outDir": "build-module", + "declaration": true, + "declarationMap": true, + "declarationDir": "./build-types", + "resolveJsonModule": true, + "typeRoots": ["./typings", "./node_modules/@types"] + }, + "exclude": [ + "node_modules", + "**/stories", + "**/build", + "**/build-module", + "**/build-types", + "**/test/*", + "**/jest.config.js", + "**/jest-preset.js", + "**/webpack.*.js", + "**/babel.config.js" + ], + "include": ["**/*.d.ts", "src/**/*", "src/**/*.json"] +} diff --git a/packages/js/create-product-editor-block/plugin-templates/webpack.config.js.mustache b/packages/js/create-product-editor-block/plugin-templates/webpack.config.js.mustache new file mode 100644 index 00000000000..7c211bc7ca0 --- /dev/null +++ b/packages/js/create-product-editor-block/plugin-templates/webpack.config.js.mustache @@ -0,0 +1,13 @@ +const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); +const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' ); + +module.exports = { + ...defaultConfig, + plugins: [ + ...defaultConfig.plugins.filter( + ( plugin ) => + plugin.constructor.name !== 'DependencyExtractionWebpackPlugin' + ), + new WooCommerceDependencyExtractionWebpackPlugin(), + ], +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8fb01570193..63c416c15a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -645,6 +645,8 @@ importers: specifier: ^3.3.12 version: 3.3.12(webpack@5.70.0) + packages/js/create-product-editor-block: {} + packages/js/create-woo-extension: {} packages/js/csv-export: