80 lines
5.7 KiB
JavaScript
80 lines
5.7 KiB
JavaScript
(function(wp) {
|
|
const { registerBlockType } = wp.blocks;
|
|
const { createElement: el } = wp.element;
|
|
const { InspectorControls } = wp.blockEditor || wp.editor;
|
|
const { PanelBody, TextControl, SelectControl } = wp.components;
|
|
|
|
registerBlockType('ansico/contact-form', {
|
|
title: 'Ansico Contact Form',
|
|
icon: 'email',
|
|
category: 'common',
|
|
attributes: {
|
|
blockId: { type: 'string', default: '' },
|
|
recipientEmail: { type: 'string', default: '' },
|
|
successMessage: { type: 'string', default: 'Message has been sent' },
|
|
spamErrorMessage: { type: 'string', default: 'Wrong spam protection answer.' },
|
|
footerMessage: { type: 'string', default: 'Message has been sent on website' },
|
|
emailFormat: { type: 'string', default: 'text' },
|
|
labelName: { type: 'string', default: 'Name' },
|
|
labelEmail: { type: 'string', default: 'E-mail' },
|
|
labelSubject: { type: 'string', default: 'Subject' },
|
|
labelMessage: { type: 'string', default: 'Message' },
|
|
labelSpam: { type: 'string', default: 'Spam check:' },
|
|
buttonText: { type: 'string', default: 'Send message' }
|
|
},
|
|
edit: function(props) {
|
|
const { attributes, setAttributes } = props;
|
|
|
|
if (!attributes.blockId) {
|
|
setAttributes({ blockId: Math.random().toString(36).substr(2, 9) });
|
|
}
|
|
|
|
const sidebar = el(InspectorControls, null,
|
|
el(PanelBody, { title: 'Email Settings', initialOpen: true },
|
|
el(TextControl, { label: 'Recipient Email (Blank = Site Admin)', value: attributes.recipientEmail, onChange: (val) => setAttributes({ recipientEmail: val }) }),
|
|
el(SelectControl, { label: 'Email Format', value: attributes.emailFormat, options: [{label: 'Plain Text', value: 'text'}, {label: 'HTML', value: 'html'}], onChange: (val) => setAttributes({ emailFormat: val }) }),
|
|
el(TextControl, { label: 'Success Message', value: attributes.successMessage, onChange: (val) => setAttributes({ successMessage: val }) }),
|
|
el(TextControl, { label: 'Spam Error Message', value: attributes.spamErrorMessage, onChange: (val) => setAttributes({ spamErrorMessage: val }) }),
|
|
el(TextControl, { label: 'Email Footer Text', value: attributes.footerMessage, onChange: (val) => setAttributes({ footerMessage: val }) })
|
|
),
|
|
el(PanelBody, { title: 'Form Labels & Buttons', initialOpen: false },
|
|
el(TextControl, { label: 'Name Label', value: attributes.labelName, onChange: (val) => setAttributes({ labelName: val }) }),
|
|
el(TextControl, { label: 'Email Label', value: attributes.labelEmail, onChange: (val) => setAttributes({ labelEmail: val }) }),
|
|
el(TextControl, { label: 'Subject Label', value: attributes.labelSubject, onChange: (val) => setAttributes({ labelSubject: val }) }),
|
|
el(TextControl, { label: 'Message Label', value: attributes.labelMessage, onChange: (val) => setAttributes({ labelMessage: val }) }),
|
|
el(TextControl, { label: 'Spam Check Label', value: attributes.labelSpam, onChange: (val) => setAttributes({ labelSpam: val }) }),
|
|
el(TextControl, { label: 'Button Text', value: attributes.buttonText, onChange: (val) => setAttributes({ buttonText: val }) })
|
|
)
|
|
);
|
|
|
|
const formPreview = el('div', { style: { maxWidth: '500px', fontFamily: 'inherit' } },
|
|
el('div', { style: { marginBottom: '15px' } },
|
|
el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelName),
|
|
el('input', { type: 'text', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
|
|
),
|
|
el('div', { style: { marginBottom: '15px' } },
|
|
el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelEmail),
|
|
el('input', { type: 'email', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
|
|
),
|
|
el('div', { style: { marginBottom: '15px' } },
|
|
el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelSubject),
|
|
el('input', { type: 'text', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
|
|
),
|
|
el('div', { style: { marginBottom: '15px' } },
|
|
el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelMessage),
|
|
el('textarea', { disabled: true, rows: 4, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', resize: 'none' } })
|
|
),
|
|
el('div', { style: { marginBottom: '20px' } },
|
|
el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelSpam + ' 2 + 3 = ?'),
|
|
el('input', { type: 'text', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
|
|
),
|
|
el('button', { disabled: true, style: { padding: '12px 24px', background: '#007cba', color: '#fff', border: 'none', borderRadius: '4px', fontWeight: 'bold' } }, attributes.buttonText)
|
|
);
|
|
|
|
return el('div', null, sidebar, formPreview);
|
|
},
|
|
save: function() {
|
|
return null;
|
|
}
|
|
});
|
|
})(window.wp);
|