Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add mailpoet_paragraph class to all blocks

Browse Source 
[MAILPOET-2601]
This commit is contained in:
Pavel Dohnal
2020-02-12 10:09:21 +01:00
committed by Jack Kitterhing
parent 21926ea3e0
commit daefe143a0
14 changed files with 84 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx
View File

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { useDispatch, useSelect } from '@wordpress/data';
import ParagraphEdit from '../paragraph_edit.jsx';
import CustomFieldSettings from './custom_field_settings.jsx';
import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
@@ -109,7 +110,7 @@ const CustomCheckboxEdit = ({ attributes, setAttributes, clientId }) => {
checkboxLabel += ' *';
}
return (
<>
<ParagraphEdit>
{inspectorControls}
<span className="mailpoet_checkbox_label">{getLabel()}</span>
<div>
@@ -122,7 +123,7 @@ const CustomCheckboxEdit = ({ attributes, setAttributes, clientId }) => {
{checkboxLabel}
</label>
</div>
</>
</ParagraphEdit>
);
};

47
assets/js/src/form_editor/blocks/custom_date/edit.jsx
View File

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { useDispatch, useSelect } from '@wordpress/data';
import ParagraphEdit from '../paragraph_edit.jsx';
import CustomFieldSettings from './custom_field_settings.jsx';
import FormFieldDate from '../../../form/fields/date.jsx';
import formatLabel from '../label_formatter.jsx';
@@ -80,28 +81,30 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
);
return (
<div className="mailpoet_custom_date">
{inspectorControls}
<label className="mailpoet_date_label" data-automation-id="editor_custom_date_label" htmlFor={clientId}>
{formatLabel(attributes)}
</label>
<FormFieldDate
field={{
name: clientId,
day_placeholder: MailPoet.I18n.t('customFieldDay'),
month_placeholder: MailPoet.I18n.t('customFieldMonth'),
year_placeholder: MailPoet.I18n.t('customFieldYear'),
params: {
date_type: attributes.dateType,
date_format: attributes.dateFormat,
},
}}
item={{
[clientId]: attributes.defaultToday ? moment().format('YYYY-MM-DD') : '',
}}
onValueChange={() => {}}
/>
</div>
<ParagraphEdit>
<div className="mailpoet_custom_date">
{inspectorControls}
<label className="mailpoet_date_label" data-automation-id="editor_custom_date_label" htmlFor={clientId}>
{formatLabel(attributes)}
</label>
<FormFieldDate
field={{
name: clientId,
day_placeholder: MailPoet.I18n.t('customFieldDay'),
month_placeholder: MailPoet.I18n.t('customFieldMonth'),
year_placeholder: MailPoet.I18n.t('customFieldYear'),
params: {
date_type: attributes.dateType,
date_format: attributes.dateFormat,
},
}}
item={{
[clientId]: attributes.defaultToday ? moment().format('YYYY-MM-DD') : '',
}}
onValueChange={() => {}}
/>
</div>
</ParagraphEdit>
);
};

5
assets/js/src/form_editor/blocks/custom_radio/edit.jsx
View File

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { useDispatch, useSelect } from '@wordpress/data';
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';
@@ -80,7 +81,7 @@ const CustomRadioEdit = ({ attributes, setAttributes, clientId }) => {
};
return (
<>
<ParagraphEdit>
{inspectorControls}
<span className="mailpoet_radio_label">{getLabel()}</span>
{Array.isArray(attributes.values) && attributes.values.map((value) => (
@@ -95,7 +96,7 @@ const CustomRadioEdit = ({ attributes, setAttributes, clientId }) => {
</label>
</div>
))}
</>
</ParagraphEdit>
);
};

7
assets/js/src/form_editor/blocks/custom_select/edit.jsx
View File

@@ -9,8 +9,9 @@ import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { useDispatch, useSelect } from '@wordpress/data';
import formatLabel from '../label_formatter.jsx';
import ParagraphEdit from '../paragraph_edit.jsx';
import formatLabel from '../label_formatter.jsx';
import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
@@ -105,7 +106,7 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
};
return (
<>
<ParagraphEdit>
{inspectorControls}
<div className="mailpoet_custom_select" data-automation-id="custom_select_block">
{!attributes.labelWithinInput ? (
@@ -115,7 +116,7 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
) : null}
{getInput()}
</div>
</>
</ParagraphEdit>
);
};

5
assets/js/src/form_editor/blocks/custom_text/edit.jsx
View File

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { useDispatch, useSelect } from '@wordpress/data';
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';
@@ -92,7 +93,7 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
);
return (
<>
<ParagraphEdit>
{inspectorControls}
{!attributes.labelWithinInput ? (
<label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor={clientId}>
@@ -100,7 +101,7 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
</label>
) : null}
{getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
</>
</ParagraphEdit>
);
};

5
assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
View File

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { useDispatch, useSelect } from '@wordpress/data';
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';
@@ -114,7 +115,7 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
);
return (
<>
<ParagraphEdit>
{inspectorControls}
{attributes.labelWithinInput ? (getTextArea(formatLabel(attributes))
) : (
@@ -125,7 +126,7 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
{getTextArea('')}
</>
)}
</>
</ParagraphEdit>
);
};

8
assets/js/src/form_editor/blocks/divider/edit.jsx
View File

@@ -3,5 +3,11 @@ import {
HorizontalRule,
} from '@wordpress/components';
const DividerEdit = () => (<HorizontalRule />);
import ParagraphEdit from '../paragraph_edit.jsx';
const DividerEdit = () => (
<ParagraphEdit>
<HorizontalRule />
</ParagraphEdit>
);
export default DividerEdit;

6
assets/js/src/form_editor/blocks/email/edit.jsx
View File

@@ -9,6 +9,8 @@ import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
const EmailEdit = ({ attributes, setAttributes }) => {
const inspectorControls = (
<InspectorControls>
@@ -44,7 +46,7 @@ const EmailEdit = ({ attributes, setAttributes }) => {
);
return (
<>
<ParagraphEdit>
{inspectorControls}
{!attributes.labelWithinInput ? (
<label className="mailpoet_text_label" data-automation-id="editor_email_label" htmlFor="email">
@@ -52,7 +54,7 @@ const EmailEdit = ({ attributes, setAttributes }) => {
</label>
) : null}
{getTextInput(attributes.labelWithinInput ? `${attributes.label} *` : '')}
</>
</ParagraphEdit>
);
};

5
assets/js/src/form_editor/blocks/first_name/edit.jsx
View File

@@ -9,6 +9,7 @@ import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
import formatLabel from '../label_formatter.jsx';
const FirstNameEdit = ({ attributes, setAttributes }) => {
@@ -51,7 +52,7 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
);
return (
<>
<ParagraphEdit>
{inspectorControls}
{!attributes.labelWithinInput ? (
<label className="mailpoet_text_label" data-automation-id="editor_first_name_label" htmlFor="first_name">
@@ -59,7 +60,7 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
</label>
) : null}
{getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
</>
</ParagraphEdit>
);
};

6
assets/js/src/form_editor/blocks/html/edit.jsx
View File

@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { debounce } from 'lodash';
import ParagraphEdit from '../paragraph_edit.jsx';
const CustomHtmlEdit = ({ attributes, setAttributes }) => {
const [renderedContent, setRenderedContent] = useState(attributes.content);
const setRenderedContentDebounced = useCallback(debounce((content) => {
@@ -46,12 +48,12 @@ const CustomHtmlEdit = ({ attributes, setAttributes }) => {
const styles = attributes.nl2br ? ['body { white-space: pre-line; }'] : [];
const key = `${renderedContent}_${styles}`;
return (
<>
<ParagraphEdit>
{inspectorControls}
<div>
<SandBox html={renderedContent} styles={styles} key={key} />
</div>
</>
</ParagraphEdit>
);
};

5
assets/js/src/form_editor/blocks/last_name/edit.jsx
View File

@@ -9,6 +9,7 @@ import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
import formatLabel from '../label_formatter.jsx';
const LastNameEdit = ({ attributes, setAttributes }) => {
@@ -51,7 +52,7 @@ const LastNameEdit = ({ attributes, setAttributes }) => {
);
return (
<>
<ParagraphEdit>
{inspectorControls}
{!attributes.labelWithinInput ? (
<label className="mailpoet_text_label" data-automation-id="editor_last_name_label" htmlFor="last_name">
@@ -59,7 +60,7 @@ const LastNameEdit = ({ attributes, setAttributes }) => {
</label>
) : null}
{getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
</>
</ParagraphEdit>
);
};

14
assets/js/src/form_editor/blocks/paragraph_edit.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
const ParagraphEdit = ({ children }) => (
<div className="mailpoet_paragraph">
{children}
</div>
);
ParagraphEdit.propTypes = {
children: PropTypes.node.isRequired,
};
export default ParagraphEdit;

6
assets/js/src/form_editor/blocks/segment_select/edit.jsx
View File

@@ -4,6 +4,8 @@ import {
} from '@wordpress/components';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
import Settings from './settings.jsx';
const SegmentSelectEdit = ({ attributes, setAttributes }) => {
@@ -22,7 +24,7 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
};
return (
<>
<ParagraphEdit>
<Settings
label={attributes.label}
onLabelChanged={(label) => (setAttributes({ label }))}
@@ -39,7 +41,7 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
{attributes.label}
</span>
{renderValues()}
</>
</ParagraphEdit>
);
};

6
assets/js/src/form_editor/blocks/submit/edit.jsx
View File

@@ -8,6 +8,8 @@ import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import ParagraphEdit from '../paragraph_edit.jsx';
const SubmitEdit = ({ attributes, setAttributes }) => {
const inspectorControls = (
<InspectorControls>
@@ -26,7 +28,7 @@ const SubmitEdit = ({ attributes, setAttributes }) => {
);
return (
<>
<ParagraphEdit>
{ inspectorControls }
<div className="mailpoet_submit">
<input
@@ -36,7 +38,7 @@ const SubmitEdit = ({ attributes, setAttributes }) => {
data-automation-id="editor_submit_input"
/>
</div>
</>
</ParagraphEdit>
);
};