diff --git a/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx b/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
index e81f2da386..bd7dbc81e7 100644
--- a/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
+++ b/assets/js/src/form_editor/blocks/custom_text/custom_text.jsx
@@ -1,5 +1,6 @@
import Icon from './icon.jsx';
import Edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
export const name = 'mailpoet-form/custom-text';
@@ -30,6 +31,10 @@ export function getSettings(customField) {
type: 'string',
default: customField.id,
},
+ styles: {
+ type: 'object',
+ default: defaultBlockStyles,
+ },
},
supports: {
html: false,
diff --git a/assets/js/src/form_editor/blocks/custom_text/edit.jsx b/assets/js/src/form_editor/blocks/custom_text/edit.jsx
index aee698f661..fcba96a304 100644
--- a/assets/js/src/form_editor/blocks/custom_text/edit.jsx
+++ b/assets/js/src/form_editor/blocks/custom_text/edit.jsx
@@ -14,7 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx';
import CustomFieldSettings from './custom_field_settings.jsx';
import formatLabel from '../label_formatter.jsx';
import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect(
@@ -78,7 +78,10 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
/>
-
+ (setAttributes({ styles }))}
+ />
);
@@ -113,6 +116,7 @@ CustomTextEdit.propTypes = {
labelWithinInput: PropTypes.bool.isRequired,
mandatory: PropTypes.bool.isRequired,
customFieldId: PropTypes.number.isRequired,
+ styles: inputStylesPropTypes.isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
clientId: PropTypes.string.isRequired,
diff --git a/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx b/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx
index 0218185dc9..221172030a 100644
--- a/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx
+++ b/assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx
@@ -1,5 +1,6 @@
import Icon from '../custom_text/icon.jsx';
import Edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
export const name = 'mailpoet-form/custom-textarea';
@@ -34,6 +35,10 @@ export function getSettings(customField) {
type: 'string',
default: customField.id,
},
+ styles: {
+ type: 'object',
+ default: defaultBlockStyles,
+ },
},
supports: {
html: false,
diff --git a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
index 0b01d205ef..7297e7e026 100644
--- a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
+++ b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
@@ -14,7 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx';
import CustomFieldSettings from '../custom_text/custom_field_settings.jsx';
import formatLabel from '../label_formatter.jsx';
import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect(
@@ -100,7 +100,10 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
/>
-
+ (setAttributes({ styles }))}
+ />
);
@@ -140,6 +143,7 @@ CustomTextAreaEdit.propTypes = {
labelWithinInput: PropTypes.bool.isRequired,
mandatory: PropTypes.bool.isRequired,
lines: PropTypes.string,
+ styles: inputStylesPropTypes.isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
clientId: PropTypes.string.isRequired,
diff --git a/assets/js/src/form_editor/blocks/email/edit.jsx b/assets/js/src/form_editor/blocks/email/edit.jsx
index a6e6e65d95..3a3cf40031 100644
--- a/assets/js/src/form_editor/blocks/email/edit.jsx
+++ b/assets/js/src/form_editor/blocks/email/edit.jsx
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
const EmailEdit = ({ attributes, setAttributes }) => {
const inspectorControls = (
@@ -30,7 +30,10 @@ const EmailEdit = ({ attributes, setAttributes }) => {
/>
-
+ (setAttributes({ styles }))}
+ />
);
@@ -62,6 +65,7 @@ EmailEdit.propTypes = {
attributes: PropTypes.shape({
label: PropTypes.string.isRequired,
labelWithinInput: PropTypes.bool.isRequired,
+ styles: inputStylesPropTypes.isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
};
diff --git a/assets/js/src/form_editor/blocks/email/email.jsx b/assets/js/src/form_editor/blocks/email/email.jsx
index 0266e3f1a5..358af2a396 100644
--- a/assets/js/src/form_editor/blocks/email/email.jsx
+++ b/assets/js/src/form_editor/blocks/email/email.jsx
@@ -1,6 +1,7 @@
import MailPoet from 'mailpoet';
import edit from './edit.jsx';
import icon from './icon.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
export const name = 'mailpoet-form/email-input';
@@ -18,6 +19,10 @@ export const settings = {
type: 'boolean',
default: true,
},
+ styles: {
+ type: 'object',
+ default: defaultBlockStyles,
+ },
},
supports: {
html: false,
diff --git a/assets/js/src/form_editor/blocks/first_name/edit.jsx b/assets/js/src/form_editor/blocks/first_name/edit.jsx
index 308c5be93d..5d7e50aeb3 100644
--- a/assets/js/src/form_editor/blocks/first_name/edit.jsx
+++ b/assets/js/src/form_editor/blocks/first_name/edit.jsx
@@ -11,7 +11,7 @@ import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
import formatLabel from '../label_formatter.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
const FirstNameEdit = ({ attributes, setAttributes }) => {
const inspectorControls = (
@@ -36,7 +36,10 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
/>
-
+ (setAttributes({ styles }))}
+ />
);
@@ -69,6 +72,7 @@ FirstNameEdit.propTypes = {
label: PropTypes.string.isRequired,
labelWithinInput: PropTypes.bool.isRequired,
mandatory: PropTypes.bool.isRequired,
+ styles: inputStylesPropTypes.isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
};
diff --git a/assets/js/src/form_editor/blocks/first_name/first_name.jsx b/assets/js/src/form_editor/blocks/first_name/first_name.jsx
index 827a4e167a..689946a004 100644
--- a/assets/js/src/form_editor/blocks/first_name/first_name.jsx
+++ b/assets/js/src/form_editor/blocks/first_name/first_name.jsx
@@ -1,6 +1,7 @@
import MailPoet from 'mailpoet';
import icon from './icon.jsx';
import edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
export const name = 'mailpoet-form/first-name-input';
@@ -22,6 +23,10 @@ export const settings = {
type: 'boolean',
default: false,
},
+ styles: {
+ type: 'object',
+ default: defaultBlockStyles,
+ },
},
supports: {
html: false,
diff --git a/assets/js/src/form_editor/blocks/input_styles_settings.jsx b/assets/js/src/form_editor/blocks/input_styles_settings.jsx
index 60e26a8395..943589f9a6 100644
--- a/assets/js/src/form_editor/blocks/input_styles_settings.jsx
+++ b/assets/js/src/form_editor/blocks/input_styles_settings.jsx
@@ -1,16 +1,61 @@
-import React from 'react';
+import React, { useState } from 'react';
import MailPoet from 'mailpoet';
import {
Panel,
PanelBody,
+ ToggleControl,
} from '@wordpress/components';
+import { partial } from 'underscore';
+import PropTypes from 'prop-types';
-const InputStylesSettings = () => (
-
-
- TODO: styles settings
-
-
-);
+const InputStylesSettings = ({
+ styles,
+ onChange,
+}) => {
+ const [localStyles, setStyles] = useState(styles);
-export default InputStylesSettings;
+ const updateStyles = (property, value) => {
+ const updated = { ...localStyles };
+ updated[property] = value;
+ onChange(updated);
+ setStyles(updated);
+ };
+ return (
+
+
+
+
+ {!localStyles.inheritFromTheme ? (
+ <>
+
+ >
+ ) : null}
+
+
+ );
+};
+
+export const inputStylesPropTypes = PropTypes.shape({
+ fullWidth: PropTypes.bool.isRequired,
+ inheritFromTheme: PropTypes.bool.isRequired,
+ bold: PropTypes.bool,
+});
+
+InputStylesSettings.propTypes = {
+ styles: inputStylesPropTypes.isRequired,
+ onChange: PropTypes.func.isRequired,
+};
+
+export { InputStylesSettings };
diff --git a/assets/js/src/form_editor/blocks/last_name/edit.jsx b/assets/js/src/form_editor/blocks/last_name/edit.jsx
index 38bc5892e0..749b4b8f04 100644
--- a/assets/js/src/form_editor/blocks/last_name/edit.jsx
+++ b/assets/js/src/form_editor/blocks/last_name/edit.jsx
@@ -11,7 +11,7 @@ import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
import formatLabel from '../label_formatter.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
const LastNameEdit = ({ attributes, setAttributes }) => {
const inspectorControls = (
@@ -36,7 +36,10 @@ const LastNameEdit = ({ attributes, setAttributes }) => {
/>
-
+ (setAttributes({ styles }))}
+ />
);
@@ -69,6 +72,7 @@ LastNameEdit.propTypes = {
label: PropTypes.string.isRequired,
labelWithinInput: PropTypes.bool.isRequired,
mandatory: PropTypes.bool.isRequired,
+ styles: inputStylesPropTypes.isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
};
diff --git a/assets/js/src/form_editor/blocks/last_name/last_name.jsx b/assets/js/src/form_editor/blocks/last_name/last_name.jsx
index 3416d9cc98..a4caed70ed 100644
--- a/assets/js/src/form_editor/blocks/last_name/last_name.jsx
+++ b/assets/js/src/form_editor/blocks/last_name/last_name.jsx
@@ -1,6 +1,7 @@
import MailPoet from 'mailpoet';
import icon from './icon.jsx';
import edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
export const name = 'mailpoet-form/last-name-input';
@@ -22,6 +23,10 @@ export const settings = {
type: 'boolean',
default: true,
},
+ styles: {
+ type: 'object',
+ default: defaultBlockStyles,
+ },
},
supports: {
html: false,
diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
index cabcd9f1aa..8952c2a020 100644
--- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx
+++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx
@@ -4,6 +4,16 @@ import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name
const generateId = () => (`${Math.random().toString()}-${Date.now()}`);
+export const defaultBlockStyles = {
+ fullWidth: true,
+ inheritFromTheme: true,
+};
+
+const backwardCompatibleBlockStyles = {
+ fullWidth: false,
+ inheritFromTheme: true,
+};
+
export const customFieldValuesToBlockValues = (values) => values.map((value) => {
const mappedValue = {
name: value.value,
@@ -55,6 +65,10 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => {
mapped.attributes.values = customFieldValuesToBlockValues(item.params.values);
}
}
+
+ if (customField.type === 'text' || customField.type === 'textarea') {
+ mapped.attributes.styles = backwardCompatibleBlockStyles;
+ }
return mapped;
};
@@ -153,6 +167,7 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
return {
...mapped,
name: 'mailpoet-form/email-input',
+ styles: backwardCompatibleBlockStyles,
};
case 'heading':
if (item.params && has(item.params, 'level')) {
@@ -177,11 +192,13 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
return {
...mapped,
name: 'mailpoet-form/first-name-input',
+ styles: backwardCompatibleBlockStyles,
};
case 'last_name':
return {
...mapped,
name: 'mailpoet-form/last-name-input',
+ styles: backwardCompatibleBlockStyles,
};
case 'segments':
if (
diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
index 87e19d817e..d886fea13e 100644
--- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
+++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js
@@ -8,6 +8,7 @@ import {
segmentsInput,
submitInput,
customTextInput,
+ customTextareaInput,
customRadioInput,
customSelectInput,
customCheckboxInput,
@@ -64,6 +65,51 @@ describe('Form Body To Blocks', () => {
expect(block.attributes.labelWithinInput).to.be.equal(false);
});
+ it('Should add default styles to input blocks', () => {
+ const customFieldText = {
+ created_at: '2019-12-10T15:05:06+00:00',
+ id: 1,
+ name: 'Custom Field name',
+ params: {
+ label: 'Street name',
+ required: '1',
+ validate: '',
+ },
+ type: 'text',
+ updated_at: '2019-12-10T15:05:06+00:00',
+ };
+ const customFieldTextarea = {
+ created_at: '2019-12-10T15:05:06+00:00',
+ id: 2,
+ name: 'Custom Field 2 name',
+ params: {
+ label: 'Description',
+ required: '1',
+ validate: '',
+ lines: '3',
+ },
+ type: 'textarea',
+ updated_at: '2019-12-10T15:05:06+00:00',
+ };
+
+ const [email, firstName, lastName, customText, customTextArea] = formBodyToBlocks([
+ { ...emailInput, position: '1' },
+ { ...firstNameInput, position: '2' },
+ { ...lastNameInput, position: '3' },
+ { ...customTextInput, position: '4' },
+ { ...customTextareaInput, position: '5', id: 2 },
+ ], [customFieldText, customFieldTextarea]);
+ const defaultStyles = {
+ fullWidth: false,
+ inheritFromTheme: true,
+ };
+ expect(email.attributes.styles).to.eql(defaultStyles);
+ expect(firstName.attributes.styles).to.eql(defaultStyles);
+ expect(lastName.attributes.styles).to.eql(defaultStyles);
+ expect(customText.attributes.styles).to.eql(defaultStyles);
+ expect(customTextArea.attributes.styles).to.eql(defaultStyles);
+ });
+
it('Should map email with label within correctly', () => {
const email = { ...emailInput };
email.params.label_within = '1';
diff --git a/tests/javascript/form_editor/store/form_to_block_test_data.js b/tests/javascript/form_editor/store/form_to_block_test_data.js
index e733bd12d3..9e1dd7f2f8 100644
--- a/tests/javascript/form_editor/store/form_to_block_test_data.js
+++ b/tests/javascript/form_editor/store/form_to_block_test_data.js
@@ -82,6 +82,20 @@ export const customTextInput = {
},
position: null,
};
+export const customTextareaInput = {
+ type: 'textarea',
+ name: 'Description',
+ id: '1',
+ unique: '1',
+ static: '0',
+ params: {
+ required: '',
+ label: 'Name of the street',
+ label_within: '1',
+ lines: '3',
+ },
+ position: null,
+};
export const customRadioInput = {
type: 'radio',
name: 'Options',
diff --git a/views/form/editor.html b/views/form/editor.html
index f3851222c9..3e667189ac 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -46,6 +46,9 @@
'formSettingsStylesFontSize': __('Font Size'),
'formSettingsStylesFontColor': __('Font Color'),
'formSettingsStylesFontColorInherit': __('Inherit from theme'),
+ 'formSettingsInheritStyleFromTheme': __('Inherit style from theme'),
+ 'formSettingsDisplayFullWidth': _x('Display Fullwidth', 'A label for checkbox in form style settings'),
+ 'formSettingsBold': _x('Bold', 'A label for checkbox in form style settings'),
'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
'formPlacement': _x('Form Placement', 'A settings section heading'),