Update preview logic, render select dialog conditionally

src/components/select-dialog.tsx

@@ -2,27 +2,16 @@
  * WordPress dependencies
  */
 import * as React from 'react';
-import { Button, Modal, FocusableIframe } from '@wordpress/components';
+import { Modal, FocusableIframe } from '@wordpress/components';
 
 import { baseUrl } from '@/globals';
 
 type DialogProps = {
+	setOpen: Function;
   onSelectForm: Function;
 };
 
-type DialogState = {
-  isOpen: boolean;
-};
-
-class SelectDialog extends React.Component<DialogProps, DialogState> {
-	constructor( props: any ) {
-		super( props );
-
-		this.state = {
-			isOpen: false,
-		};
-	}
-
+class SelectDialog extends React.Component<DialogProps> {
 	componentDidMount() {
 		window.addEventListener( 'message', this.handlePostMessage, false );
 	}
@@ -34,21 +23,16 @@ class SelectDialog extends React.Component<DialogProps, DialogState> {
 	handlePostMessage = ( event: MessageEvent ) => {
 		if ( event.origin === baseUrl && event.data.type === 'cog-form-selected' ) {
 			this.props.onSelectForm( event.data );
-			this.setState({ isOpen: false }); // Close Dialog
+			this.props.setOpen( false );
 		}
 	}
 
 	render() {
 		return (
-			<div>
-				<Button isPrimary={true} onClick={ () => this.setState( { isOpen: true } ) }>
-					Choose a form
-				</Button>
-				{ this.state.isOpen && (
 			<Modal
 				title="Cognito Forms"
 				className="cognito-modal"
-						onRequestClose={ () => this.setState( { isOpen: false } ) }
+				onRequestClose={ () => this.props.setOpen( false ) }
 				shouldCloseOnClickOutside={ false }
 			>
 				<FocusableIframe
@@ -56,8 +40,6 @@ class SelectDialog extends React.Component<DialogProps, DialogState> {
 					src={ `${ baseUrl }/integrations/cms` }
 				></FocusableIframe>
 			</Modal>
-				) }
-			</div>
 		);
 	}
 }

src/edit.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
 
 import { BlockEditProps } from '@wordpress/blocks';
 import {
@@ -9,17 +8,23 @@ import {
 	PanelBody,
 	PanelRow,
 	ExternalLink,
+	Button,
+	Icon,
 } from '@wordpress/components';
-import { edit } from '@wordpress/icons';
-
+import { edit, external } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 
+import { BlockAttributes, EmbedMode } from '@/types';
+import { baseUrl } from './globals';
+
 import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
 import SelectDialog from '@/components/select-dialog';
 import PreviewForm from '@/components/preview-form';
-import { BlockAttributes, EmbedMode } from '@/types';
 
 const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
+	const [ selectDialogOpen, setSelectDialogOpen ] = useState( false );
+
 	const handleForm = ( form: { [key: string]: any } ) => {
 		setAttributes( {
 			formId: form.formId,
@@ -30,49 +35,21 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
 		} );
 	};
 
-	const resetForm = () => {
-		// Create a new object which sets all attributes to null
-		const nullAttributes = Object.keys( attributes ).reduce(
-			( accumulator, current ) => {
-				// @ts-ignore
-				accumulator[ current ] = null;
-				return accumulator;
-			}, {} );
-
-		setAttributes( nullAttributes );
-	};
-
-	if ( ! attributes.formId ) {
 	return (
+		<div className={ className }>
+			{ attributes.formId ?
+			// A form has already been selected, so render the form preview.
 				<div>
-				<Placeholder
-					icon={ CogIcon }
-					label="Cognito Forms"
-					className={ className }
-					instructions={ __(
-						'Click the button below to choose a form to embed.'
-					) }
-				>
-					<SelectDialog onSelectForm={ handleForm }></SelectDialog>
-				</Placeholder>
-			</div>
-		);
-	}
-
-	return (
-		<div>
-			{
 					<BlockControls>
 						<ToolbarButton
 							icon={ edit }
 							label="Edit"
-						onClick={ () => resetForm() }
+							onClick={ () => setSelectDialogOpen( true ) }
 						/>
 					</BlockControls>
-			}
 
 					<InspectorControls key="setting">
-				<PanelBody title="Embed Settings">
+						<PanelBody title="Form Settings">
 							<PanelRow>
 								<RadioControl
 									label="Embed Mode"
@@ -96,6 +73,34 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
 						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>
+							<Button isPrimary onClick={ () => setSelectDialogOpen( true ) }>
+								Select Form
+							</Button>
+							<Button isTertiary href={ `${ baseUrl }/forms/new` } target="_blank">
+								New Form&thinsp;<Icon icon={ external } size={ 16 }></Icon>
+							</Button>
+						</div>
+					</Placeholder>
+				</div>
+			}
+
+			{ selectDialogOpen &&
+				// Selectively render the select dialog
+				<SelectDialog
+					setOpen={ ( val: boolean ) => setSelectDialogOpen( val ) }
+					onSelectForm={ handleForm }
+				></SelectDialog>
+			}
+		</div>
 	);
 };
 

src/styles/editor.scss

@@ -7,18 +7,12 @@
  */
 
 // Remove modal padding
-.cognito-modal > .components-modal__content {
-  padding: initial;
+.wp-block-cognito-forms-cognito-embed {
+	.components-placeholder__label svg {
+		height: 24px;
+		width: 24px;
 	}
 
-.cognito-modal > .components-modal__content > .components-modal__header {
-  margin: initial;
-}
-
-// .cog-wp-embed__preview > iframe {
-// 	height: 500px;
-// }
-
 	.form-preview {
 		min-height: 200px;
 
@@ -55,3 +49,14 @@
 			}
 		}
 	}
+}
+
+.cognito-modal {
+	.components-modal__content {
+		padding: initial;
+	}
+
+	.components-modal__content .components-modal__header {
+		margin: initial;
+	}
+}