diff --git a/assets/js/src/form_editor/blocks/blocks.jsx b/assets/js/src/form_editor/blocks/blocks.jsx index 2781b43680..e087b5012a 100644 --- a/assets/js/src/form_editor/blocks/blocks.jsx +++ b/assets/js/src/form_editor/blocks/blocks.jsx @@ -7,6 +7,7 @@ import * as submit from './submit/submit.jsx'; import * as firstName from './first_name/first_name.jsx'; import * as lastName from './last_name/last_name.jsx'; import * as segmentSelect from './segment_select/segment_select.jsx'; +import * as customHtml from './custom_html/custom_html.jsx'; export default () => { setCategories([ @@ -20,4 +21,5 @@ export default () => { registerBlockType(firstName.name, firstName.settings); registerBlockType(lastName.name, lastName.settings); registerBlockType(segmentSelect.name, segmentSelect.settings); + registerBlockType(customHtml.name, customHtml.settings); }; diff --git a/assets/js/src/form_editor/blocks/custom_html/custom_html.jsx b/assets/js/src/form_editor/blocks/custom_html/custom_html.jsx new file mode 100644 index 0000000000..a3c8a5c0ed --- /dev/null +++ b/assets/js/src/form_editor/blocks/custom_html/custom_html.jsx @@ -0,0 +1,27 @@ +import MailPoet from 'mailpoet'; +import icon from './icon.jsx'; +import edit from './edit.jsx'; + +export const name = 'mailpoet-form/custom-html'; + +export const settings = { + title: MailPoet.I18n.t('blockCustomHtml'), + description: MailPoet.I18n.t('blockCustomHtmlDescription'), + icon, + category: 'fields', + attributes: { + content: { + type: 'string', + default: MailPoet.I18n.t('blockCustomHtmlDefault'), + }, + }, + supports: { + html: false, + customClassName: false, + multiple: true, + }, + edit, + save() { + return null; + }, +}; diff --git a/assets/js/src/form_editor/blocks/custom_html/edit.jsx b/assets/js/src/form_editor/blocks/custom_html/edit.jsx new file mode 100644 index 0000000000..4c523b71c4 --- /dev/null +++ b/assets/js/src/form_editor/blocks/custom_html/edit.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { + Panel, + PanelBody, + TextareaControl, +} from '@wordpress/components'; +import { InspectorControls } from '@wordpress/block-editor'; +import PropTypes from 'prop-types'; +import MailPoet from 'mailpoet'; + +const CustomHtmlEdit = ({ attributes, setAttributes }) => { + const inspectorControls = ( + + + + setAttributes({ content })} + /> + + + + + ); + return ( + <> + {inspectorControls} +
+ {attributes.content} +
+ + ); +}; + +CustomHtmlEdit.propTypes = { + attributes: PropTypes.shape({ + content: PropTypes.string.isRequired, + }).isRequired, + setAttributes: PropTypes.func.isRequired, +}; + +export default CustomHtmlEdit; diff --git a/assets/js/src/form_editor/blocks/custom_html/icon.jsx b/assets/js/src/form_editor/blocks/custom_html/icon.jsx new file mode 100644 index 0000000000..dc5fe381ec --- /dev/null +++ b/assets/js/src/form_editor/blocks/custom_html/icon.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { SVG, Path } from '@wordpress/components'; + +export default ( + + + +); diff --git a/views/form/editor.html b/views/form/editor.html index 96833aebe3..ee0332cc76 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -59,7 +59,11 @@ 'missingObligatoryBlock': __('Email input or submit is missing. Try reloading the form editor.'), 'label': _x('Label', 'settings for a label of an input'), 'displayLabelWithinInput': __('Display label within input'), - 'blockDivider': __('Divider') + 'blockDivider': __('Divider'), + 'blockCustomHtml' : __('Custom text or HTML'), + 'blockCustomHtmlDescription': __('Display custom text or HTML code in your form.'), + 'blockCustomHtmlDefault': __('Subscribe to our newsletter and join [mailpoet_subscribers_count] other subscribers.'), + 'blockCustomHtmlContentLabel': _x('Custom text', 'Textarea label') }) %> <% endblock %>