Basic block structure and checkbox import

[MAILPOET-3920]

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"
 }

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 => (
+  <div className={className}>Hello I am a block</div>
+);
+
+export default Block;

assets/js/src/newsletter_block/edit.js

@@ -1,2 +0,0 @@
-import "./style.scss";
-console.log("edit.js");

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<string, unknown>) => void;
+}): JSX.Element => {
+  const blockProps = useBlockProps();
+  const defaultText = 'Hello I am default checkbox text';
+  const currentText = text || defaultText;
+  return (
+    <div {...blockProps}>
+      <div className="wc-block-checkout__newsletter">
+        <CheckboxControl id="subscribe-to-newsletter" checked={false} />
+        <RichText
+          value={currentText}
+          onChange={(value) => setAttributes({ text: value })}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Save = (): JSX.Element => (<div {...useBlockProps.save()} />);

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;
+  }
+}

assets/js/src/newsletter_block/frontend.js

@@ -1 +0,0 @@
-console.log("frontend.js");

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,
+});

assets/js/src/newsletter_block/index.js

@@ -1,2 +0,0 @@
-import "./edit";
-console.log("index.js");

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: <Icon icon={button} />,
+    foreground: '#7f54b3',
+  },
+  edit: Edit,
+  save: Save,
+});

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;
   }
 }

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",

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 <Card* />, <TabPanel />
+	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,
-];
+];