blocks
2 years ago
components
2 years ago
form-actions
2 years ago
plugins
2 years ago
form-block.js
2 years ago
form-block.preview.js
2 years ago
main.js
2 years ago
form-block.js
126 lines
| 1 | import metadata from "@blocks/form-block/block.json" |
| 2 | import preview from './form-block.preview'; |
| 3 | |
| 4 | const { |
| 5 | registerBlockType, |
| 6 | } = wp.blocks; |
| 7 | |
| 8 | const { __ } = wp.i18n; |
| 9 | |
| 10 | const { |
| 11 | InspectorControls, |
| 12 | useBlockProps, |
| 13 | } = wp.blockEditor ? wp.blockEditor : wp.editor; |
| 14 | |
| 15 | const { |
| 16 | PanelBody, |
| 17 | SelectControl, |
| 18 | TextControl, |
| 19 | ToggleControl, |
| 20 | } = wp.components; |
| 21 | |
| 22 | const { |
| 23 | serverSideRender: ServerSideRender, |
| 24 | } = wp; |
| 25 | |
| 26 | const uniqKey = suffix => `${ metadata.name }/${ suffix }`; |
| 27 | |
| 28 | function FormEdit( { attributes, setAttributes, isSelected } ) { |
| 29 | |
| 30 | const localize = window.JetFormData; |
| 31 | const blockProps = useBlockProps(); |
| 32 | |
| 33 | if ( attributes.isPreview ) { |
| 34 | return <div style={ { |
| 35 | width: '100%', |
| 36 | display: 'flex', |
| 37 | justifyContent: 'center', |
| 38 | } }> |
| 39 | { preview } |
| 40 | </div>; |
| 41 | } |
| 42 | |
| 43 | return [ |
| 44 | isSelected && <InspectorControls |
| 45 | key={ uniqKey( 'InspectorControls' ) } |
| 46 | > |
| 47 | <PanelBody |
| 48 | title={ __( 'Form Settings' ) } |
| 49 | key={ uniqKey( 'PanelBody' ) } |
| 50 | > |
| 51 | <SelectControl |
| 52 | key='form_id' |
| 53 | label={ __( 'Choose Form' ) } |
| 54 | labelposition='top' |
| 55 | value={ attributes.form_id } |
| 56 | onChange={ newValue => { |
| 57 | setAttributes( { form_id: Number( newValue ) } ); |
| 58 | } } |
| 59 | options={ localize.forms_list } |
| 60 | /> |
| 61 | { Boolean( attributes.form_id ) && <React.Fragment> |
| 62 | <SelectControl |
| 63 | label={ __( 'Fields Layout', 'jet-form-builder' ) } |
| 64 | value={ attributes.fields_layout } |
| 65 | options={ localize.fields_layout } |
| 66 | onChange={ fields_layout => setAttributes( { fields_layout } ) } |
| 67 | /> |
| 68 | <TextControl |
| 69 | label={ __( 'Required Mark', 'jet-form-builder' ) } |
| 70 | value={ attributes.required_mark } |
| 71 | onChange={ required_mark => setAttributes( { required_mark } ) } |
| 72 | /> |
| 73 | <SelectControl |
| 74 | label={ __( 'Fields label HTML tag', 'jet-form-builder' ) } |
| 75 | value={ attributes.fields_label_tag } |
| 76 | options={ localize.fields_label_tag } |
| 77 | onChange={ fields_label_tag => setAttributes( { fields_label_tag } ) } |
| 78 | /> |
| 79 | <SelectControl |
| 80 | label={ __( 'Submit Type', 'jet-form-builder' ) } |
| 81 | value={ attributes.submit_type } |
| 82 | options={ localize.submit_type } |
| 83 | onChange={ submit_type => setAttributes( { submit_type } ) } |
| 84 | /> |
| 85 | <ToggleControl |
| 86 | key={ 'enable_progress' } |
| 87 | label={ __( 'Enable form pages progress', 'jet-form-builder' ) } |
| 88 | checked={ attributes.enable_progress } |
| 89 | onChange={ newVal => { |
| 90 | setAttributes( { enable_progress: Boolean( newVal ) } ); |
| 91 | } } |
| 92 | /> |
| 93 | </React.Fragment> } |
| 94 | </PanelBody> |
| 95 | </InspectorControls>, |
| 96 | <div key={ uniqKey( 'viewBlock' ) } { ...blockProps }> |
| 97 | <ServerSideRender |
| 98 | block={ metadata.name } |
| 99 | attributes={ attributes } |
| 100 | httpMethod={ 'POST' } |
| 101 | /> |
| 102 | </div>, |
| 103 | ]; |
| 104 | } |
| 105 | |
| 106 | registerBlockType( |
| 107 | metadata.name, |
| 108 | { |
| 109 | ...metadata, |
| 110 | title: __( 'JetForm', 'jet-form-builder' ), |
| 111 | description: __( |
| 112 | `Display the created form on any WordPress page with |
| 113 | the JetForm widget or block. Set the fields layout, |
| 114 | required mark, and submit type.`, |
| 115 | 'jet-form-builder' |
| 116 | ), |
| 117 | icon: <span dangerouslySetInnerHTML={ { __html: metadata.icon } }></span>, |
| 118 | attributes: metadata.attributes, |
| 119 | edit: FormEdit, |
| 120 | example: { |
| 121 | attributes: { |
| 122 | isPreview: true, |
| 123 | }, |
| 124 | }, |
| 125 | }, |
| 126 | ); |