diff --git a/assets/js/src/newsletter_block/block.js b/assets/js/src/newsletter_block/block.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/assets/js/src/newsletter_block/block.json b/assets/js/src/newsletter_block/block.json index 3889c2b40e..b284bded2c 100644 --- a/assets/js/src/newsletter_block/block.json +++ b/assets/js/src/newsletter_block/block.json @@ -3,8 +3,29 @@ "name": "mailpoet/newsletter-block", "version": "0.1.0", "title": "MailPoet Subscribe to Newsletter block", - "category": "widgets", + "category": "woocommerce", "textdomain": "mailpoet", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false + }, + "attributes": { + "text": { + "type": "string", + "required": false + }, + "lock": { + "type": "object", + "default": { + "remove": true, + "move": false + } + } + }, + "parent": ["woocommerce/checkout-contact-information-block"], "editorScript": "file:../../../dist/js/newsletter_block/newsletter_block.js", - "editorStyle": "file:../../../dist/js/newsletter_block/style-newsletter-block.css" + "editorStyle": "file:../../../dist/js/newsletter_block/newsletter_block.css" } diff --git a/assets/js/src/newsletter_block/block.tsx b/assets/js/src/newsletter_block/block.tsx new file mode 100644 index 0000000000..3f9f738107 --- /dev/null +++ b/assets/js/src/newsletter_block/block.tsx @@ -0,0 +1,6 @@ +/* eslint-disable react/react-in-jsx-scope */ +const Block = ({ className }: { className: string }): JSX.Element => ( +
Hello I am a block
+); + +export default Block; diff --git a/assets/js/src/newsletter_block/edit.js b/assets/js/src/newsletter_block/edit.js deleted file mode 100644 index e35caa4370..0000000000 --- a/assets/js/src/newsletter_block/edit.js +++ /dev/null @@ -1,2 +0,0 @@ -import "./style.scss"; -console.log("edit.js"); diff --git a/assets/js/src/newsletter_block/edit.tsx b/assets/js/src/newsletter_block/edit.tsx new file mode 100644 index 0000000000..3400170f58 --- /dev/null +++ b/assets/js/src/newsletter_block/edit.tsx @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +/* eslint-disable react/react-in-jsx-scope */ +import { useBlockProps, RichText } from '@wordpress/block-editor'; +/* eslint-disable import/no-unresolved */ +import { CheckboxControl } from '@woocommerce/blocks-checkout'; + +/** + * Internal dependencies + */ +import './editor.scss'; + +export const Edit = ({ + attributes: { text }, + setAttributes, +}: { + attributes: { text: string; checkbox: boolean }; + setAttributes: (attributes: Record) => void; +}): JSX.Element => { + const blockProps = useBlockProps(); + const defaultText = 'Hello I am default checkbox text'; + const currentText = text || defaultText; + return ( +
+
+ + setAttributes({ text: value })} + /> +
+
+ ); +}; + +export const Save = (): JSX.Element => (
); diff --git a/assets/js/src/newsletter_block/editor.scss b/assets/js/src/newsletter_block/editor.scss new file mode 100644 index 0000000000..1c3c2158e8 --- /dev/null +++ b/assets/js/src/newsletter_block/editor.scss @@ -0,0 +1,16 @@ +.wc-block-checkout__newsletter { + align-items: flex-start; + display: flex; + margin: 20px 0; + padding-bottom: 4px; + padding-top: 4px; + + .block-editor-rich-text__editable { + line-height: em(24px); + vertical-align: middle; + } + + .wc-block-components-checkbox { + margin-top: 0; + } +} diff --git a/assets/js/src/newsletter_block/frontend.js b/assets/js/src/newsletter_block/frontend.js deleted file mode 100644 index 4bad83e5f5..0000000000 --- a/assets/js/src/newsletter_block/frontend.js +++ /dev/null @@ -1 +0,0 @@ -console.log("frontend.js"); diff --git a/assets/js/src/newsletter_block/frontend.tsx b/assets/js/src/newsletter_block/frontend.tsx new file mode 100644 index 0000000000..53926e554e --- /dev/null +++ b/assets/js/src/newsletter_block/frontend.tsx @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +/* eslint-disable react/react-in-jsx-scope */ +/* eslint-disable import/no-unresolved */ +import { registerCheckoutBlock } from '@woocommerce/blocks-checkout'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import FrontendBlock from './block'; + +registerCheckoutBlock({ + metadata, + component: FrontendBlock, +}); diff --git a/assets/js/src/newsletter_block/index.js b/assets/js/src/newsletter_block/index.js deleted file mode 100644 index 8027833260..0000000000 --- a/assets/js/src/newsletter_block/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import "./edit"; -console.log("index.js"); diff --git a/assets/js/src/newsletter_block/index.tsx b/assets/js/src/newsletter_block/index.tsx new file mode 100644 index 0000000000..8a977b29bb --- /dev/null +++ b/assets/js/src/newsletter_block/index.tsx @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +/* eslint-disable react/react-in-jsx-scope */ +import { Icon, button } from '@wordpress/icons'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { Edit, Save } from './edit'; +import metadata from './block.json'; + +registerBlockType(metadata, { + icon: { + src: , + foreground: '#7f54b3', + }, + edit: Edit, + save: Save, +}); diff --git a/lib/PostEditorBlocks/NewsletterBlock.php b/lib/PostEditorBlocks/NewsletterBlock.php index 290008f77c..7ab234c7e1 100644 --- a/lib/PostEditorBlocks/NewsletterBlock.php +++ b/lib/PostEditorBlocks/NewsletterBlock.php @@ -17,5 +17,14 @@ class NewsletterBlock { public function init() { $this->wp->registerBlockType( Env::$assetsPath . '/js/src/newsletter_block' ); + $this->wp->addFilter( + '__experimental_woocommerce_blocks_add_data_attributes_to_block', + [$this, 'addDataAttributesToBlock'] + ); + } + + public function addDataAttributesToBlock( array $blocks ) { + $blocks[] = 'mailpoet/newsletter-block'; + return $blocks; } } diff --git a/package.json b/package.json index 0f9a6e3668..6e31be7e79 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "lint": "npm run lint6 && npm run lint-ts && npm run lint5 && npm run lint-tests", "lint6": "eslint -c .eslintrc.es6.json --max-warnings 0 'assets/js/src/**/*.jsx' 'tests/javascript/**/*.js'", "lint-ts": "eslint -c .eslintrc.ts.json --max-warnings 0 'assets/js/src/**/*.tsx' 'assets/js/src/**/*.ts'", - "lint5": "eslint -c .eslintrc.es5.json --max-warnings 0 'assets/js/src/**/*.js' 'webpack.config.js'", + "lint5": "eslint -c .eslintrc.es5.json --max-warnings 0 'assets/js/src/**/*.js'", "lint-tests": "eslint -c .eslintrc.tests_newsletter_editor.json --max-warnings 0 'tests/javascript_newsletter_editor'", "autoprefixer": "postcss assets/dist/css/*.css --use autoprefixer --no-map --replace", "scss": "sass assets/css/src/:assets/dist/css/ --style compressed", @@ -26,7 +26,7 @@ }, "lint-staged": { "*.{scss,css}": "npm run stylelint", - "!(*spec).js": "eslint -c .eslintrc.es5.json --max-warnings 0", + "!(*spec|webpack.config).js": "eslint -c .eslintrc.es5.json --max-warnings 0", "*.jsx": "eslint -c .eslintrc.es6.json --max-warnings 0", "*.{tsx,ts}": "eslint -c .eslintrc.ts.json --max-warnings 0", "**/newsletter_editor/**/*spec.js": "eslint -c .eslintrc.tests_newsletter_editor.json --max-warnings 0", diff --git a/webpack.config.js b/webpack.config.js index 0c81d18836..5958dcbec4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -408,6 +408,39 @@ const postEditorBlock = { }, }; +const requestToExternal = ( request ) => { + // The following default externals are bundled for compatibility with older versions of WP + // Note CSS for specific components is bundled via admin/assets/src/index.scss + // WP 5.4 is the min version for , + const bundled = [ + '@wordpress/compose', + '@wordpress/components', + '@wordpress/warning', + '@wordpress/primitives', + ]; + if ( bundled.includes( request ) ) { + return false; + } + + const wcDepMap = { + '@woocommerce/components': [ 'wc', 'components' ], + '@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ], + }; + if ( wcDepMap[ request ] ) { + return wcDepMap[ request ]; + } +}; + +const requestToHandle = ( request ) => { + const wcHandleMap = { + '@woocommerce/components': 'wc-components', + '@woocommerce/blocks-checkout': 'wc-blocks-checkout', + }; + if ( wcHandleMap[ request ] ) { + return wcHandleMap[ request ]; + } +}; + // Newsletter config const newsletterBlock = { ...wpScriptConfig, @@ -416,18 +449,45 @@ const newsletterBlock = { newsletter_block: path.resolve( process.cwd(), "assets/js/src/newsletter_block", - "index.js" + "index.tsx" ), newsletter_block_frontend: path.resolve( process.cwd(), "assets/js/src/newsletter_block", - "frontend.js" + "frontend.tsx" ), }, output: { filename: "[name].js", path: path.resolve(process.cwd(), "assets/dist/js/newsletter_block"), }, + module: { + ...wpScriptConfig.module, + rules: [ + ...wpScriptConfig.module.rules, + { + test: /\.(t|j)sx?$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader?cacheDirectory', + options: { + presets: [ '@wordpress/babel-preset-default' ], + plugins: [ + require.resolve( + '@babel/plugin-proposal-class-properties' + ), + require.resolve( + '@babel/plugin-proposal-nullish-coalescing-operator' + ), + ].filter( Boolean ), + }, + }, + }, + ], + }, + resolve: { + extensions: [ '.js', '.jsx', '.ts', '.tsx' ], + }, plugins: [ ...wpScriptConfig.plugins.filter( (plugin) => @@ -435,6 +495,8 @@ const newsletterBlock = { ), new DependencyExtractionWebpackPlugin({ injectPolyfill: true, + requestToExternal, + requestToHandle, }), ], }; @@ -463,4 +525,4 @@ module.exports = [ return Object.assign({}, baseConfig, config); }), newsletterBlock, -]; +]; \ No newline at end of file