form-block.js
112 lines
| 1 | /** |
| 2 | * Everest Forms Form Block |
| 3 | * |
| 4 | * A block for embedding a Everest Forms into a post/page. |
| 5 | */ |
| 6 | |
| 7 | 'use strict'; |
| 8 | |
| 9 | /* global evf_form_block_data, wp */ |
| 10 | const { __ } = wp.i18n; |
| 11 | const { createElement } = wp.element; |
| 12 | const { registerBlockType } = wp.blocks; |
| 13 | const { InspectorControls } = wp.editor; |
| 14 | const { SelectControl, ToggleControl, PanelBody, ServerSideRender, Placeholder } = wp.components; |
| 15 | |
| 16 | const EverestFormIcon = createElement( 'svg', { width: 24, height: 24, viewBox: '0 0 24 24' }, |
| 17 | createElement( 'path', { fill: 'currentColor', d: 'M18.1 4h-3.8l1.2 2h3.9zM20.6 8h-3.9l1.2 2h3.9zM20.6 18H5.8L12 7.9l2.5 4.1H12l-1.2 2h7.3L12 4.1 2.2 20h19.6z' } ) |
| 18 | ); |
| 19 | |
| 20 | registerBlockType( 'everest-forms/form-selector', { |
| 21 | title: evf_form_block_data.i18n.title, |
| 22 | icon: EverestFormIcon, |
| 23 | category: 'widgets', |
| 24 | keywords: evf_form_block_data.i18n.form_keywords, |
| 25 | description: evf_form_block_data.i18n.description, |
| 26 | attributes: { |
| 27 | formId: { |
| 28 | type: 'string', |
| 29 | }, |
| 30 | displayTitle: { |
| 31 | type: 'boolean', |
| 32 | }, |
| 33 | displayDescription: { |
| 34 | type: 'boolean', |
| 35 | }, |
| 36 | }, |
| 37 | edit( props ) { |
| 38 | const { attributes: { formId = '', displayTitle = false, displayDescription = false }, setAttributes } = props; |
| 39 | const formOptions = evf_form_block_data.forms.map( value => ( |
| 40 | { value: value.ID, label: value.post_title } |
| 41 | ) ); |
| 42 | let jsx; |
| 43 | |
| 44 | formOptions.unshift( { value: '', label: evf_form_block_data.i18n.form_select } ); |
| 45 | |
| 46 | function selectForm( value ) { |
| 47 | setAttributes( { formId: value } ); |
| 48 | } |
| 49 | |
| 50 | function toggleDisplayTitle( value ) { |
| 51 | setAttributes( { displayTitle: value } ); |
| 52 | } |
| 53 | |
| 54 | function toggleDisplayDescription( value ) { |
| 55 | setAttributes( { displayDescription: value } ); |
| 56 | } |
| 57 | |
| 58 | jsx = [ |
| 59 | <InspectorControls key="evf-gutenberg-form-selector-inspector-controls"> |
| 60 | <PanelBody title={ evf_form_block_data.i18n.form_settings }> |
| 61 | <SelectControl |
| 62 | label={ evf_form_block_data.i18n.form_selected } |
| 63 | value={ formId } |
| 64 | options={ formOptions } |
| 65 | onChange={ selectForm } |
| 66 | /> |
| 67 | <ToggleControl |
| 68 | label={ evf_form_block_data.i18n.show_title } |
| 69 | checked={ displayTitle } |
| 70 | onChange={ toggleDisplayTitle } |
| 71 | /> |
| 72 | <ToggleControl |
| 73 | label={ evf_form_block_data.i18n.show_description } |
| 74 | checked={ displayDescription } |
| 75 | onChange={ toggleDisplayDescription } |
| 76 | /> |
| 77 | </PanelBody> |
| 78 | </InspectorControls> |
| 79 | ]; |
| 80 | |
| 81 | if ( formId ) { |
| 82 | jsx.push( |
| 83 | <ServerSideRender |
| 84 | key="evf-gutenberg-form-selector-server-side-renderer" |
| 85 | block="everest-forms/form-selector" |
| 86 | attributes={ props.attributes } |
| 87 | /> |
| 88 | ); |
| 89 | } else { |
| 90 | jsx.push( |
| 91 | <Placeholder |
| 92 | key="evf-gutenberg-form-selector-wrap" |
| 93 | icon={ EverestFormIcon } |
| 94 | instructions={ evf_form_block_data.i18n.title } |
| 95 | className="everest-form-gutenberg-form-selector-wrap"> |
| 96 | <SelectControl |
| 97 | key="evf-gutenberg-form-selector-select-control" |
| 98 | value={ formId } |
| 99 | options={ formOptions } |
| 100 | onChange={ selectForm } |
| 101 | /> |
| 102 | </Placeholder> |
| 103 | ); |
| 104 | } |
| 105 | |
| 106 | return jsx; |
| 107 | }, |
| 108 | save() { |
| 109 | return null; |
| 110 | }, |
| 111 | } ); |
| 112 |