Merge branch 'main' of https://git.thomasfamily.duckdns.org/cognito-forms/cognitoforms-wordpress

block.json

@@ -0,0 +1,28 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "cognito-forms/cognito-embed",
+	"title": "Cognito Forms",
+	"description": "Easily build powerful forms.",
+	"category": "embed",
+	"supports": {
+		"html": false
+	},
+	"attributes": {
+		"formId": {
+			"type": "string"
+		},
+		"seamlessEmbedCode": {
+			"type": "string"
+		},
+		"iframeEmbedCode": {
+			"type": "string"
+		},
+		"ampEmbedCode": {
+			"type": "string"
+		},
+		"embedMode": {
+			"type": "number"
+		}
+	}
+}

plugin.php

@@ -1,13 +1,4 @@
 <?php
-/*
-Plugin Name: Cognito Forms
-Plugin URI: http://wordpress.org/plugins/cognito-forms/
-Description: Cognito Forms is a free online form builder that integrates seamlessly with WordPress. Create contact forms, registrations forms, surveys, and more!
-Version: 2.0.0
-Author: Cognito Apps
-Author URI: https://www.cognitoforms.com
-*/
-
 /**
  * Cognito Forms WordPress Plugin.
  *
@@ -25,6 +16,17 @@ Author URI: https://www.cognitoforms.com
  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
  */
 
+/**
+ * Plugin Name: 	Cognito Forms
+ * Plugin URI: 		http://wordpress.org/plugins/cognito-forms/
+ * Description: 	Cognito Forms is a free online form builder that integrates seamlessly with WordPress. Create contact forms, registrations forms, surveys, and more!
+ * Version: 			2.0.0
+ * Author: 				Cognito Apps
+ * Author URI: 		https://www.cognitoforms.com
+ * License: 			GPL v2 or later
+ * License URI:   https://www.gnu.org/licenses/gpl-2.0.html
+ */
+
 // Exit if accessed directly.
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
@@ -132,13 +134,13 @@ if ( !class_exists('CognitoFormsPlugin') ) {
 			return $buttons;
 		}
 
-		// Initialize TinyMCE plug-in
+		// Set up TinyMCE plug-in
 		public function mce_external_plugins( $plugin_array ) {
 			$plugin_array['cognito_mce_plugin'] = plugins_url( '/tinymce/plugin.js', __FILE__ );
 			return $plugin_array;
 		}
 
-		// Initialize administration menu (left-bar)
+		// Initialize administration menu (left sidebar)
 		public function admin_menu() {
 			add_menu_page( 'Cognito Forms', 'Cognito Forms', 'manage_options', 'Cognito', array( $this, 'main_page' ), "data:image/svg+xml;base64," . base64_encode( '<?xml version="1.0" encoding="UTF-8"?><svg id="icon" version="1.1" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="m8.0125 1.0813-0.41402 2.2771a5.9329 5.9329 0 0 0-1.5823 0.6472l-1.8893-1.292-1.3777 1.3158 1.2183 1.9987a5.5187 5.5187 0 0 0-0.65672 1.5942l-2.2295 0.40212v1.9987l2.2652 0.41402a6.0913 6.0913 0 0 0 0.671 1.5847l-1.2682 1.8512 1.3777 1.4491 1.875-1.2896a5.9573 5.9573 0 0 0 1.5966 0.68052l0.40212 2.2057h1.9868l0.40212-2.2652a6.5543 6.5543 0 0 0 1.6323-0.6591l1.8512 1.2801 1.4134-1.4015-1.292-1.8631a6.6517 6.6517 0 0 0 0.69479-1.6323l2.2295-0.40212v-1.9868l-2.2295-0.39023a6.3472 6.3472 0 0 0-0.68289-1.6204l1.2801-1.8512-1.4134-1.4253-1.8512 1.3158a10.087 10.087 0 0 0-1.6085-0.6591l-0.41402-2.2771zm1.0731 3.6667a3.8984 3.8984 0 0 1 2.96 1.2183 3.8375 3.8375 0 0 1 0.81614 1.2183 3.0944 3.0944 0 0 1 0.2308 0.71859l-2.4365 0.44019a1.6203 1.6203 0 0 0-1.6561-1.1826 1.6325 1.6325 0 0 0-1.2183 0.52347 1.9492 1.9492 0 0 0-0.52347 1.3158 1.8639 1.8639 0 0 0 0.52347 1.3396 1.6203 1.6203 0 0 0 1.2183 0.51158 1.669 1.669 0 0 0 1.2183-0.44971 1.8396 1.8396 0 0 0 0.40212-0.6829l1.875 0.35453 0.60913 0.13325-0.18084 0.49968a4.6781 4.6781 0 0 1-1.0113 1.4729 3.935 3.935 0 0 1-2.9124 1.0612 4.1421 4.1421 0 0 1-4.1902-4.045v-0.19511a4.069 4.069 0 0 1 1.2183-3.0338 4.1177 4.1177 0 0 1 3.0576-1.2183z" stroke-width="1.2183"/></svg>' ) );
 			add_submenu_page( 'Cognito', 'Cognito Forms', 'View Forms', 'manage_options', 'Cognito', array( $this, 'main_page' ) );

src/components/preview-form.tsx

@@ -10,7 +10,6 @@ import { baseUrl } from '@/globals';
 import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
 
 type PreviewProps = {
-	formId: string;
 	embedCode: string;
 };
 

src/components/select-dialog.tsx

@@ -2,27 +2,19 @@
  * 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 = {
+interface IDialogProps {
+	setOpen: Function;
   onSelectForm: Function;
-};
-
-type DialogState = {
-  isOpen: boolean;
-};
-
-class SelectDialog extends React.Component<DialogProps, DialogState> {
-	constructor( props: any ) {
-		super( props );
-
-		this.state = {
-			isOpen: false,
-		};
 }
 
+interface IDialogState {
+}
+
+class SelectDialog extends React.Component<IDialogProps, IDialogState> {
 	componentDidMount() {
 		window.addEventListener( 'message', this.handlePostMessage, false );
 	}
@@ -34,21 +26,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 +43,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/globals.ts

@@ -1 +1 @@
-export const baseUrl: string = 'https://forms.cognito.test';
+export const baseUrl = 'https://forms.cognito.test';

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;
+	}
+}

src/types.ts

@@ -1,10 +1,10 @@
 export enum EmbedMode {
 	Seamless,
-	IFrame
+	IFrame,
 }
 
 export interface BlockAttributes {
-	formId: string,
+	formId: string;
 	iframeEmbedCode: string;
 	seamlessEmbedCode: string;
 	ampEmbedCode: string;