Match up attributes to postMessage

src/components/select-dialog.tsx

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { Button, Modal, FocusableIframe } from '@wordpress/components';
 
-import { baseUrl } from '../globals';
+import { baseUrl } from '@/globals';
 
 type DialogProps = {
   onSelectForm: Function;
@@ -34,6 +34,7 @@ class SelectDialog extends React.Component<DialogProps, DialogState> {
 	handlePostMessage = ( event: MessageEvent ) => {
 		console.log( 'PostMessage recieved:', event.data );
 		this.props.onSelectForm( event.data );
+		this.setState({ isOpen: false });
 	}
 
 	render() {
@@ -43,8 +44,16 @@ class SelectDialog extends React.Component<DialogProps, DialogState> {
 					Choose a form
 				</Button>
 				{ this.state.isOpen && (
-					<Modal title="Cognito Forms" className="cognito-modal" onRequestClose={ () => this.setState( { isOpen: false } ) } shouldCloseOnClickOutside={ false }>
-						<FocusableIframe style={ { width: '500px', height: '500px', display: 'block' } } src={ `${ baseUrl }/integrations/cms` }></FocusableIframe>
+					<Modal
+						title="Cognito Forms"
+						className="cognito-modal"
+						onRequestClose={ () => this.setState( { isOpen: false } ) }
+						shouldCloseOnClickOutside={ false }
+					>
+						<FocusableIframe
+							style={ { width: '500px', height: '500px', display: 'block' } }
+							src={ `${ baseUrl }/integrations/cms` }
+						></FocusableIframe>
 					</Modal>
 				) }
 			</div>

src/edit.tsx

@@ -4,17 +4,19 @@ import { __ } from '@wordpress/i18n';
 import { BlockEditProps } from '@wordpress/blocks';
 import { Placeholder, ExternalLink } from '@wordpress/components';
 
-import CogIcon from './assets/cogicon';
-import SelectDialog from './components/select-dialog';
-import { BlockAttributes, EmbedMode } from './types';
+import CogIcon from '@/assets/cogicon';
+import SelectDialog from '@/components/select-dialog';
+import { BlockAttributes, EmbedMode } from '@/types';
 
 const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
 	const handleForm = ( form: string ) => {
 		const formObj = JSON.parse( form );
+
 		setAttributes( {
-			formId: formObj.id,
-			seamlessEmbedCode: formObj.seamlessEmbedCode,
-			iframeEmbedCode: formObj.iframeEmbedCode,
+			formId: formObj.formId,
+			seamlessEmbedCode: formObj.embedCodes.Seamless,
+			iframeEmbedCode: formObj.embedCodes.IFrame,
+			ampEmbedCode: formObj.embedCodes.Amp,
 			embedMode: EmbedMode.Seamless,
 		} );
 	};
@@ -40,17 +42,16 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
 						{ __( 'Learn more about embeds' ) }
 					</ExternalLink>
 				</div>
-				{/* <PlainText
-					onChange={ content => props.setAttributes({ url: content }) }
-					value={ props.attributes.url }
-					placeholder="Your form url"
-					className="cognito__form"
-				/> */}
 			</Placeholder>
 		);
 	}
 
-	return ( <div dangerouslySetInnerHTML={ { __html: attributes.iframeEmbedCode } }></div> );
+	return (
+		<div
+			className="cog-wp-embed cog-wp-embed__preview"
+			dangerouslySetInnerHTML={ { __html: attributes.iframeEmbedCode } } // Must be Iframe embed code as others do not work in Gutenberg
+		></div>
+	);
 }
 
 export default Edit;

src/index.tsx

@@ -19,7 +19,7 @@ registerBlockType<BlockAttributes> ( 'cognito-forms/cognito-embed', {
 	title: 'Cognito Forms',
 	icon: CogIcon,
 	description: __(
-		'An example typescript block.',
+		'Easily build powerful forms.',
 		'cognito'
 	),
 	category: 'embed',
@@ -29,7 +29,7 @@ registerBlockType<BlockAttributes> ( 'cognito-forms/cognito-embed', {
 	},
 	attributes: {
 		formId: {
-			type: 'number',
+			type: 'string',
 		},
 		seamlessEmbedCode: {
 			type: 'string',

src/save.tsx

@@ -4,21 +4,24 @@ import { BlockSaveProps } from '@wordpress/blocks';
 
 import { EmbedMode, BlockAttributes } from './types';
 
-const Save: React.FC<BlockSaveProps<BlockAttributes>> = ( props: any ) => {
+const Save: React.FC<BlockSaveProps<BlockAttributes>> = ( { attributes: { formId, embedMode, seamlessEmbedCode, iframeEmbedCode } } ) => {
 	let embedCode = '';
 
-	switch ( props.attributes.embedMode ) {
+	switch ( embedMode ) {
 		case EmbedMode.Seamless:
-			embedCode = props.attributes.seamlessEmbedCode;
+			embedCode = seamlessEmbedCode;
 			break;
 		case EmbedMode.IFrame:
-			embedCode = props.attributes.iframeEmbedCode;
+			embedCode = iframeEmbedCode;
 			break;
 	}
 
+	console.log(formId);
+
 	return (
 		<div
-			className={ props.className }
+			className="cog-wp-embed"
+			data-form={ formId }
 			dangerouslySetInnerHTML={ { __html: embedCode } }
 		>
 		</div>

src/styles/editor.scss

@@ -10,6 +10,11 @@
 .cognito-modal > .components-modal__content {
   padding: initial;
 }
+
 .cognito-modal > .components-modal__content > .components-modal__header {
   margin: initial;
 }
+
+.cog-wp-embed__preview > iframe {
+	height: 500px;
+}

src/types.ts

@@ -4,7 +4,7 @@ export enum EmbedMode {
 }
 
 export interface BlockAttributes {
-	formId: number,
+	formId: string,
 	iframeEmbedCode: string;
 	seamlessEmbedCode: string;
 	ampEmbedCode: string;

tsconfig.json

@@ -6,7 +6,10 @@
 	  "module": "commonjs",
 	  "noImplicitAny": true,
 	  "allowJs": true,
-	  "allowSyntheticDefaultImports": true
+	  "allowSyntheticDefaultImports": true,
+		"paths": {
+			"@/*": ["./src/*"]
+		}
 	},
 	"include": [
 	  "src"