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

azure-pipelines.yaml

@@ -1,16 +1,16 @@
 trigger:
-	- main
+  - main
 
 pool:
-	vmImage: 'ubuntu-latest'
+  vmImage: 'ubuntu-latest'
 
 steps:
-	- script: yarn install
+  - script: yarn install
-		displayName: 🛠️ Install Dependencies
+    displayName: 🛠️ Install Dependencies
-	- script: yarn build
+  - script: yarn build
-		displayName: 🚀 Build Plugin
+    displayName: 🚀 Build Plugin
-	- task: PublishPipelineArtifact@1
+  - task: PublishPipelineArtifact@1
-		displayName: 📦 Create Artifact
+    displayName: 📦 Create Artifact
-		inputs:
+    inputs:
-			targetPath: $(System.DefaultWorkingDirectory)
+      targetPath: $(System.DefaultWorkingDirectory)
-			artifactName: CognitoFormsPlugin
+      artifactName: CognitoFormsPlugin

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 = {
+interface IDialogState {
-  isOpen: boolean;
+}
-};
-
-class SelectDialog extends React.Component<DialogProps, DialogState> {
-	constructor( props: any ) {
-		super( props );
-
-		this.state = {
-			isOpen: false,
-		};
-	}
 
+class SelectDialog extends React.Component<IDialogProps, IDialogState> {
 	componentDidMount() {
 		window.addEventListener( 'message', this.handlePostMessage, false );
 	}
@@ -32,32 +24,25 @@ class SelectDialog extends React.Component<DialogProps, DialogState> {
 	}
 
 	handlePostMessage = ( event: MessageEvent ) => {
-		if (event.origin === baseUrl && event.data.type === 'cog-form-selected') {
+		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>
+			<Modal
-				<Button isPrimary={true} onClick={ () => this.setState( { isOpen: true } ) }>
+				title="Cognito Forms"
-					Choose a form
+				className="cognito-modal"
-				</Button>
+				onRequestClose={ () => this.props.setOpen( false ) }
-				{ this.state.isOpen && (
+				shouldCloseOnClickOutside={ false }
-					<Modal
+			>
-						title="Cognito Forms"
+				<FocusableIframe
-						className="cognito-modal"
+					style={ { width: '500px', height: '500px', display: 'block' } }
-						onRequestClose={ () => this.setState( { isOpen: false } ) }
+					src={ `${ baseUrl }/integrations/cms` }
-						shouldCloseOnClickOutside={ false }
+				></FocusableIframe>
-					>
+			</Modal>
-						<FocusableIframe
-							style={ { width: '500px', height: '500px', display: 'block' } }
-							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,71 +35,71 @@ 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>
-				<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>
+		<div className={ className }>
-			{
+			{ attributes.formId ?
-				<BlockControls>
+			// A form has already been selected, so render the form preview.
-					<ToolbarButton
+				<div>
-						icon={ edit }
+					<BlockControls>
-						label="Edit"
+						<ToolbarButton
-						onClick={ () => resetForm() }
+							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 }
 					/>
-				</BlockControls>
+				</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>
 			}
 
-			<InspectorControls key="setting">
+			{ selectDialogOpen &&
-				<PanelBody title="Embed Settings">
+				// Selectively render the select dialog
-					<PanelRow>
+				<SelectDialog
-						<RadioControl
+					setOpen={ ( val: boolean ) => setSelectDialogOpen( val ) }
-							label="Embed Mode"
+					onSelectForm={ handleForm }
-							help={
+				></SelectDialog>
-								<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>
 	);
 };

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,51 +7,56 @@
  */
 
 // Remove modal padding
-.cognito-modal > .components-modal__content {
+.wp-block-cognito-forms-cognito-embed {
-  padding: initial;
+	.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;
-
-	.focus-grabber {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
 	}
 
-	.loader {
+	.form-preview {
-		padding: 1em;
-		background: #fff;
-		text-align: center;
 		min-height: 200px;
-		border-radius: 2px;
-		box-shadow: inset 0 0 0 1px #1e1e1e;
 
-		display: flex;
+		.focus-grabber {
-		gap: 0.5em;
+			position: absolute;
-		flex-direction: column;
+			width: 100%;
-		align-items: center;
+			height: 100%;
-		justify-content: center;
+			z-index: 1;
-
-		.icon {
-			width: 2em;
-			height: 2em;
-			margin: 0 auto;
 		}
 
-		p {
+		.loader {
-			font-size: 13px;
+			padding: 1em;
-			margin: 0;
+			background: #fff;
+			text-align: center;
+			min-height: 200px;
+			border-radius: 2px;
+			box-shadow: inset 0 0 0 1px #1e1e1e;
+
+			display: flex;
+			gap: 0.5em;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			.icon {
+				width: 2em;
+				height: 2em;
+				margin: 0 auto;
+			}
+
+			p {
+				font-size: 13px;
+				margin: 0;
+			}
 		}
 	}
 }
+
+.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;