Add email block definition

[MAILPOET-2451]

assets/js/src/form_editor/blocks/email/edit.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  Panel,
+  PanelBody,
+  TextControl,
+  ToggleControl,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+
+const EmailEdit = ({ attributes, setAttributes }) => {
+  const inspectorControls = (
+    <InspectorControls>
+      <Panel>
+        <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
+          <TextControl
+            label={MailPoet.I18n.t('label')}
+            value={attributes.label}
+            onChange={(label) => (setAttributes({ label }))}
+          />
+          <ToggleControl
+            label={MailPoet.I18n.t('displayLabelWithinInput')}
+            checked={attributes.labelWithinInput}
+            onChange={(labelWithinInput) => (setAttributes({ labelWithinInput }))}
+          />
+        </PanelBody>
+      </Panel>
+
+    </InspectorControls>
+  );
+  return (
+    <>
+      {inspectorControls}
+      {attributes.labelWithinInput ? (
+        <input className="mailpoet_text" type="email" name="name" placeholder={attributes.label} />
+      ) : (
+        <label className="mailpoet_text_label">
+          {attributes.label}
+          <br />
+          <input className="mailpoet_text" type="email" name="email" placeholder="" />
+        </label>
+      )}
+    </>
+  );
+};
+
+EmailEdit.propTypes = {
+  attributes: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    labelWithinInput: PropTypes.bool.isRequired,
+  }).isRequired,
+  setAttributes: PropTypes.func.isRequired,
+};
+
+export default EmailEdit;

assets/js/src/form_editor/blocks/email/email.jsx

@@ -0,0 +1,30 @@
+import MailPoet from 'mailpoet';
+import edit from './edit.jsx';
+import icon from './icon.jsx';
+
+export const name = 'mailpoet-form/email-input';
+export const settings = {
+  title: MailPoet.I18n.t('blockEmail'),
+  description: MailPoet.I18n.t('blockEmailDescription'),
+  icon,
+  category: 'obligatory',
+  attributes: {
+    label: {
+      type: 'string',
+      default: MailPoet.I18n.t('blockEmail'),
+    },
+    labelWithinInput: {
+      type: 'boolean',
+      default: true,
+    },
+  },
+  supports: {
+    html: false,
+    customClassName: false,
+    inserter: false,
+  },
+  edit,
+  save() {
+    return null;
+  },
+};

assets/js/src/form_editor/blocks/email/icon.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { G, Path, SVG } from '@wordpress/components';
+
+export default (
+  <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <Path fill="none" d="M0 0h24v24H0V0z" />
+    <G>
+      <Path
+        fill="#32373C"
+        d="m18.82592,6.5l-14,0c-0.8,0 -1.5,0.7 -1.5,1.5l0,8c0,0.8 0.7,1.5 1.5,1.5l14,0c0.8,0 1.5,-0.7 1.5,-1.5l0,-8c0,-0.8 -0.7,-1.5 -1.5,-1.5zm-1.2,1l-5.8,4.9l-5.8,-4.9l11.6,0zm1.7,8.5c0,0.3 -0.2,0.5 -0.5,0.5l-14,0c-0.3,0 -0.5,-0.2 -0.5,-0.5l0,-8c0,-0.2 0.1,-0.4 0.3,-0.4l6.9,5.9c0.1,0.1 0.2,0.1 0.3,0.1s0.2,0 0.3,-0.1l6.9,-5.9c0.2,0.1 0.3,0.2 0.3,0.4l0,8z"
+      />
+    </G>
+  </SVG>
+);