Create first name block

[MAILPOET-2452]

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

@@ -0,0 +1,68 @@
+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 FirstNameEdit = ({ attributes, setAttributes }) => {
+  const inspectorControls = (
+    <InspectorControls>
+      <Panel>
+        <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
+          <TextControl
+            label={MailPoet.I18n.t('label')}
+            value={attributes.label}
+            data-automation-id="settings_first_name_label_input"
+            onChange={(label) => (setAttributes({ label }))}
+          />
+          <ToggleControl
+            label={MailPoet.I18n.t('displayLabelWithinInput')}
+            checked={attributes.labelWithinInput}
+            onChange={(labelWithinInput) => (setAttributes({ labelWithinInput }))}
+          />
+        </PanelBody>
+      </Panel>
+
+    </InspectorControls>
+  );
+
+  const getTextInput = (placeholder) => (
+    <input
+      id="first_name"
+      className="mailpoet_text"
+      type="text"
+      name="first_name"
+      placeholder={placeholder}
+      data-automation-id="editor_first_name_input"
+    />
+  );
+
+  return (
+    <>
+      {inspectorControls}
+      {attributes.labelWithinInput ? (getTextInput(attributes.label)
+      ) : (
+        <label className="mailpoet_text_label" data-automation-id="editor_first_name_label" htmlFor="first_name">
+          {attributes.label}
+          <br />
+          {getTextInput('')}
+        </label>
+      )}
+    </>
+  );
+};
+
+FirstNameEdit.propTypes = {
+  attributes: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    labelWithinInput: PropTypes.bool.isRequired,
+  }).isRequired,
+  setAttributes: PropTypes.func.isRequired,
+};
+
+export default FirstNameEdit;

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

@@ -0,0 +1,35 @@
+import MailPoet from 'mailpoet';
+import icon from './icon.jsx';
+import edit from './edit.jsx';
+
+export const name = 'mailpoet-form/first-name-input';
+
+export const settings = {
+  title: MailPoet.I18n.t('blockFirstName'),
+  description: MailPoet.I18n.t('blockFirstNameDescription'),
+  icon,
+  category: 'fields',
+  attributes: {
+    label: {
+      type: 'string',
+      default: MailPoet.I18n.t('blockFirstName'),
+    },
+    labelWithinInput: {
+      type: 'boolean',
+      default: true,
+    },
+    mandatory: {
+      type: 'boolean',
+      default: true,
+    },
+  },
+  supports: {
+    html: false,
+    customClassName: false,
+    multiple: false,
+  },
+  edit,
+  save() {
+    return null;
+  },
+};

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

@@ -0,0 +1,11 @@
+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 d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z" />
+    </G>
+  </SVG>
+);

views/form/editor.html

@@ -40,6 +40,8 @@
   'settingsShowMessage': __('Show message'),
   'settingsGoToPage': __('Go to Page'),
   'settingsPleaseSelectList': __('Please select a list'),
+  'blockFirstName': __('First name'),
+  'blockFirstNameDescription': __('Input field used to catch subscribers’ first names.'),
   'blockEmail': __('Email'),
   'blockEmailDescription': __('Input field used to catch subscribers’ email addresses.'),
   'blockSubmit': __('Submit button'),