diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/contact-form/index.js')
| -rw-r--r-- | plugins/jetpack/extensions/blocks/contact-form/index.js | 462 |
1 files changed, 0 insertions, 462 deletions
diff --git a/plugins/jetpack/extensions/blocks/contact-form/index.js b/plugins/jetpack/extensions/blocks/contact-form/index.js deleted file mode 100644 index e2a90c89..00000000 --- a/plugins/jetpack/extensions/blocks/contact-form/index.js +++ /dev/null @@ -1,462 +0,0 @@ -/** - * External dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { getBlockType, createBlock } from '@wordpress/blocks'; -import { Path, Circle } from '@wordpress/components'; -import { Fragment } from '@wordpress/element'; -import { InnerBlocks } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import './editor.scss'; -import JetpackContactForm from './components/jetpack-contact-form'; -import JetpackField from './components/jetpack-field'; -import JetpackFieldTextarea from './components/jetpack-field-textarea'; -import JetpackFieldCheckbox from './components/jetpack-field-checkbox'; -import JetpackFieldMultiple from './components/jetpack-field-multiple'; -import renderMaterialIcon from '../../shared/render-material-icon'; - -export const name = 'contact-form'; - -export const settings = { - title: __( 'Form', 'jetpack' ), - description: __( 'A simple way to get feedback from folks visiting your site.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M13 7.5h5v2h-5zm0 7h5v2h-5zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM11 6H6v5h5V6zm-1 4H7V7h3v3zm1 3H6v5h5v-5zm-1 4H7v-3h3v3z" /> - ), - keywords: [ - _x( 'email', 'block search term', 'jetpack' ), - _x( 'feedback', 'block search term', 'jetpack' ), - _x( 'contact', 'block search term', 'jetpack' ), - ], - category: 'jetpack', - supports: { - reusable: false, - html: false, - }, - attributes: { - subject: { - type: 'string', - default: '', - }, - to: { - type: 'string', - default: '', - }, - submitButtonText: { - type: 'string', - default: __( 'Submit', 'jetpack' ), - }, - customBackgroundButtonColor: { type: 'string' }, - customTextButtonColor: { type: 'string' }, - submitButtonClasses: { type: 'string' }, - hasFormSettingsSet: { - type: 'string', - default: null, - }, - - // Deprecated - has_form_settings_set: { - type: 'string', - default: null, - }, - submit_button_text: { - type: 'string', - default: __( 'Submit', 'jetpack' ), - }, - }, - - edit: JetpackContactForm, - save: InnerBlocks.Content, - deprecated: [ - { - attributes: { - subject: { - type: 'string', - default: '', - }, - to: { - type: 'string', - default: '', - }, - submit_button_text: { - type: 'string', - default: __( 'Submit', 'jetpack' ), - }, - has_form_settings_set: { - type: 'string', - default: null, - }, - }, - migrate: attr => { - return { - submitButtonText: attr.submit_button_text, - hasFormSettingsSet: attr.has_form_settings_set, - to: attr.to, - subject: attr.subject, - }; - }, - - isEligible: attr => { - // when the deprecated, snake_case values are default, no need to migrate - if ( ! attr.has_form_settings_set && attr.submit_button_text === 'Submit' ) { - return false; - } - return true; - }, - - save: InnerBlocks.Content, - }, - ], -}; - -const FieldDefaults = { - category: 'jetpack', - parent: [ 'jetpack/contact-form' ], - supports: { - reusable: false, - html: false, - }, - attributes: { - label: { - type: 'string', - default: null, - }, - required: { - type: 'boolean', - default: false, - }, - options: { - type: 'array', - default: [], - }, - defaultValue: { - type: 'string', - default: '', - }, - placeholder: { - type: 'string', - default: '', - }, - id: { - type: 'string', - default: '', - }, - }, - transforms: { - to: [ - { - type: 'block', - blocks: [ 'jetpack/field-text' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-text', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-name' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-name', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-email' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-email', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-url' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-url', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-date' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-date', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-telephone' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-telephone', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-textarea' ], - isMatch: ( { options } ) => ! options.length, - transform: attributes => createBlock( 'jetpack/field-textarea', attributes ), - }, - /* // not yet ready for prime time. - { - type: 'block', - blocks: [ 'jetpack/field-checkbox' ], - isMatch: ( { options } ) => 1 === options.length, - transform: ( attributes )=>createBlock( 'jetpack/field-checkbox', attributes ) - }, - */ - { - type: 'block', - blocks: [ 'jetpack/field-checkbox-multiple' ], - isMatch: ( { options } ) => 1 <= options.length, - transform: attributes => createBlock( 'jetpack/field-checkbox-multiple', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-radio' ], - isMatch: ( { options } ) => 1 <= options.length, - transform: attributes => createBlock( 'jetpack/field-radio', attributes ), - }, - { - type: 'block', - blocks: [ 'jetpack/field-select' ], - isMatch: ( { options } ) => 1 <= options.length, - transform: attributes => createBlock( 'jetpack/field-select', attributes ), - }, - ], - }, - save: () => null, -}; - -const getFieldLabel = ( { attributes, name: blockName } ) => { - return null === attributes.label ? getBlockType( blockName ).title : attributes.label; -}; - -const editField = type => props => ( - <JetpackField - type={ type } - label={ getFieldLabel( props ) } - required={ props.attributes.required } - setAttributes={ props.setAttributes } - isSelected={ props.isSelected } - defaultValue={ props.attributes.defaultValue } - placeholder={ props.attributes.placeholder } - id={ props.attributes.id } - /> -); - -const editMultiField = type => props => ( - <JetpackFieldMultiple - label={ getFieldLabel( props ) } - required={ props.attributes.required } - options={ props.attributes.options } - setAttributes={ props.setAttributes } - type={ type } - isSelected={ props.isSelected } - id={ props.attributes.id } - /> -); - -export const childBlocks = [ - { - name: 'field-text', - settings: { - ...FieldDefaults, - title: __( 'Text', 'jetpack' ), - description: __( 'When you need just a small amount of text, add a text input.', 'jetpack' ), - icon: renderMaterialIcon( <Path d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" /> ), - edit: editField( 'text' ), - }, - }, - { - name: 'field-name', - settings: { - ...FieldDefaults, - title: __( 'Name', 'jetpack' ), - description: __( - 'Introductions are important. Add an input for folks to add their name.', - 'jetpack' - ), - icon: renderMaterialIcon( - <Path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /> - ), - edit: editField( 'text' ), - }, - }, - { - name: 'field-email', - settings: { - ...FieldDefaults, - title: __( 'Email', 'jetpack' ), - keywords: [ __( 'e-mail', 'jetpack' ), __( 'mail', 'jetpack' ), 'email' ], - description: __( 'Want to reply to folks? Add an email address input.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z" /> - ), - edit: editField( 'email' ), - }, - }, - - { - name: 'field-url', - settings: { - ...FieldDefaults, - title: __( 'Website', 'jetpack' ), - keywords: [ 'url', __( 'internet page', 'jetpack' ), 'link' ], - description: __( 'Add an address input for a website.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z" /> - ), - edit: editField( 'url' ), - }, - }, - - { - name: 'field-date', - settings: { - ...FieldDefaults, - title: __( 'Date Picker', 'jetpack' ), - keywords: [ - __( 'Calendar', 'jetpack' ), - __( 'day month year', 'block search term', 'jetpack' ), - ], - description: __( 'The best way to set a date. Add a date picker.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z" /> - ), - edit: editField( 'text' ), - }, - }, - { - name: 'field-telephone', - settings: { - ...FieldDefaults, - title: __( 'Telephone', 'jetpack' ), - keywords: [ - __( 'Phone', 'jetpack' ), - __( 'Cellular phone', 'jetpack' ), - __( 'Mobile', 'jetpack' ), - ], - description: __( 'Add a phone number input.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79h1.51m9.86 12.02c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75l1.2-1.19M7.5 3H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1-1.24 0-2.45-.2-3.57-.57-.1-.04-.21-.05-.31-.05-.26 0-.51.1-.71.29l-2.2 2.2c-2.83-1.45-5.15-3.76-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1z" /> - ), - edit: editField( 'tel' ), - }, - }, - { - name: 'field-textarea', - settings: { - ...FieldDefaults, - title: __( 'Message', 'jetpack' ), - keywords: [ __( 'Textarea', 'jetpack' ), 'textarea', __( 'Multiline text', 'jetpack' ) ], - description: __( - 'Let folks speak their mind. This text box is great for longer responses.', - 'jetpack' - ), - icon: renderMaterialIcon( <Path d="M21 11.01L3 11v2h18zM3 16h12v2H3zM21 6H3v2.01L21 8z" /> ), - edit: props => ( - <JetpackFieldTextarea - label={ getFieldLabel( props ) } - required={ props.attributes.required } - setAttributes={ props.setAttributes } - isSelected={ props.isSelected } - defaultValue={ props.attributes.defaultValue } - placeholder={ props.attributes.placeholder } - id={ props.attributes.id } - /> - ), - }, - }, - { - name: 'field-checkbox', - settings: { - ...FieldDefaults, - title: __( 'Checkbox', 'jetpack' ), - keywords: [ __( 'Confirm', 'jetpack' ), __( 'Accept', 'jetpack' ) ], - description: __( 'Add a single checkbox.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z" /> - ), - edit: props => ( - <JetpackFieldCheckbox - label={ props.attributes.label } // label intentinally left blank - required={ props.attributes.required } - setAttributes={ props.setAttributes } - isSelected={ props.isSelected } - defaultValue={ props.attributes.defaultValue } - id={ props.attributes.id } - /> - ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: '', - }, - }, - }, - }, - { - name: 'field-checkbox-multiple', - settings: { - ...FieldDefaults, - title: __( 'Checkbox Group', 'jetpack' ), - keywords: [ __( 'Choose Multiple', 'jetpack' ), __( 'Option', 'jetpack' ) ], - description: __( 'People love options. Add several checkbox items.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z" /> - ), - edit: editMultiField( 'checkbox' ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Choose several', - }, - }, - }, - }, - { - name: 'field-radio', - settings: { - ...FieldDefaults, - title: __( 'Radio', 'jetpack' ), - keywords: [ __( 'Choose', 'jetpack' ), __( 'Select', 'jetpack' ), __( 'Option', 'jetpack' ) ], - description: __( - 'Inspired by radios, only one radio item can be selected at a time. Add several radio button items.', - 'jetpack' - ), - icon: renderMaterialIcon( - <Fragment> - <Path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /> - <Circle cx="12" cy="12" r="5" /> - </Fragment> - ), - edit: editMultiField( 'radio' ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Choose one', - }, - }, - }, - }, - { - name: 'field-select', - settings: { - ...FieldDefaults, - title: __( 'Select', 'jetpack' ), - keywords: [ - __( 'Choose', 'jetpack' ), - __( 'Dropdown', 'jetpack' ), - __( 'Option', 'jetpack' ), - ], - description: __( 'Compact, but powerful. Add a select box with several items.', 'jetpack' ), - icon: renderMaterialIcon( - <Path d="M3 17h18v2H3zm16-5v1H5v-1h14m2-2H3v5h18v-5zM3 6h18v2H3z" /> - ), - edit: editMultiField( 'select' ), - attributes: { - ...FieldDefaults.attributes, - label: { - type: 'string', - default: 'Select one', - }, - }, - }, - }, -]; |