cognitoforms-wordpress/src/edit.tsx

import * as React from 'react';

import { BlockEditProps } from '@wordpress/blocks';
import {
	Placeholder,
	ToolbarButton,
	RadioControl,
	PanelBody,
	PanelRow,
	ExternalLink,
	Button,
} from '@wordpress/components';
import { edit, external } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { BlockControls, InspectorControls } from '@wordpress/block-editor';

import { IBlockAttributes, EmbedMode, IForm } from '@/types';
import { baseUrl } from './globals';

import { ReactComponent as CogIcon } from '@/../cogicon.svg';
import SelectDialog from '@/components/select-dialog';
import PreviewForm from '@/components/preview-form';

const Edit: React.FC<BlockEditProps<IBlockAttributes>> = ( { attributes, setAttributes, className } ) => {
	const [ selectDialogOpen, setSelectDialogOpen ] = useState( false );

	const handleForm = ( form: IForm ) => {
		setAttributes( {
			orgId: form.orgId,
			formId: form.formId,
			seamlessEmbedCode: form.embedCodes.Seamless,
			iframeEmbedCode: form.embedCodes.IFrame,
			ampEmbedCode: form.embedCodes.Amp,
			embedMode: EmbedMode.Seamless,
		} );
	};

	return (
		<div className={ className }>
			{ attributes.formId ?
			// A form has already been selected, so render the form preview.
				<div>
					<BlockControls>
						<ToolbarButton
							icon={ edit }
							label="Edit"
							onClick={ () => setSelectDialogOpen( true ) }
						/>
					</BlockControls>

					<InspectorControls key="setting">
						<PanelBody title="Form Settings">
							<PanelRow>
								<RadioControl
									label="Embed Mode"
									help={
										<span>
											The type of embed code to use with your form. <ExternalLink href="https://www.cognitoforms.com/support/10/style-publish">Learn more</ExternalLink>
										</span>
									}
									selected={ attributes.embedMode }
									options={ [
										{ label: 'Seamless', value: EmbedMode.Seamless },
										{ label: 'Iframe', value: EmbedMode.IFrame },
									] }
									onChange={ ( value: EmbedMode ) => setAttributes( { embedMode: parseInt( value.toString() ) } ) }
								/>
							</PanelRow>
						</PanelBody>
					</InspectorControls>

					<PreviewForm
						embedCode={ attributes.iframeEmbedCode }
					/>
				</div>
				:
				// No form has been selected yet, so render the placeholder.
				<div>
					<Placeholder
						icon={ CogIcon }
						label="Cognito Forms"
						instructions="Choose an existing form to embed or create a new one."
					>
						<div style={ { display: 'flex' } }>
							<Button
								variant="primary"
								onClick={ () => setSelectDialogOpen( true ) }
							>
								Select Form
							</Button>
							<Button
								href={ `${ baseUrl }/forms/new` }
								target="_blank"
								icon={ external }
								iconPosition="right"
								iconSize={ 16 }
								variant="secondary"
							>
								New Form
							</Button>
						</div>
					</Placeholder>
				</div>
			}

			{ selectDialogOpen &&
				// Selectively render the select dialog
				<SelectDialog
					setOpen={ ( val: boolean ) => setSelectDialogOpen( val ) }
					onSelectForm={ handleForm }
				></SelectDialog>
			}
		</div>
	);
};

export default Edit;