Working Prototype

src/block/block.js

@@ -12,13 +12,13 @@ import { registerBlockType } from '@wordpress/blocks';
 import { PlainText } from '@wordpress/editor';
 import { Button, Placeholder, ExternalLink } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
- 
+
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import './style.scss';
-import SelectDialog from './select-dialog'
+import SelectDialog from './select-dialog';
 
 const CogIcon = <svg version="1.1" viewBox="-4.6 230 110.9 111" xmlns="http://www.w3.org/2000/svg"><path id="path4" class="st0" d="M 48.599609 0 L 45.699219 16 C 41.699219 17.1 37.999609 18.4 34.599609 20.5 L 21.5 11.5 L 11.699219 20.699219 L 20.599609 34.699219 C 18.399609 38.199219 16.9 41.900391 16 45.900391 L 0 48.699219 L 0 62.699219 L 15.900391 65.599609 C 17.000391 69.699609 18.499219 73.4 20.699219 77 C 20.699219 77 21.199609 77.9 20.599609 77 L 20.5 76.900391 L 11.5 90 L 21.300781 99.800781 L 34.5 90.800781 C 38 93.000781 41.699219 94.499609 45.699219 95.599609 L 48.5 111 L 62.400391 111 L 65.199219 95.099609 C 69.199219 94.099609 73.099609 92.5 76.599609 90.5 L 89.699219 99.5 L 99.5 89.699219 L 90.5 76.599609 C 92.6 73.099609 94.200781 69.299219 95.300781 65.199219 L 110.90039 62.400391 L 110.90039 48.5 L 95.300781 45.699219 C 94.200781 41.699219 92.7 37.900781 90.5 34.300781 L 99.5 21.199219 L 89.699219 11.400391 L 76.599609 20.599609 C 72.699609 18.299609 65.400391 16 65.400391 16 L 62.5 0 L 48.599609 0 z M 55.800781 26.599609 C 63.900781 26.599609 70.7 29.300391 76 34.900391 C 78.2 37.200391 80.1 39.799609 81.5 43.099609 C 80.6 44.899609 79.9 46.699219 79.5 48.699219 L 66.599609 50.900391 C 64.599609 45.300391 60.699219 42.900391 55.199219 42.900391 C 51.599219 42.900391 48.7 44.1 46.5 46.5 C 44.2 48.9 43.099609 51.899219 43.099609 55.699219 C 43.099609 59.299219 44.200391 62.199609 46.400391 64.599609 C 48.700391 66.999609 51.500391 68.099609 54.900391 68.099609 C 58.400391 68.099609 61.099219 67.1 63.199219 65 C 64.499219 63.8 65.3 62.300391 66 60.400391 L 79.400391 62.900391 L 79.400391 62.800781 C 79.800391 64.500781 80.399609 66.199219 81.099609 67.699219 C 79.699609 71.099219 77.700781 74.2 74.800781 77 C 69.800781 81.8 63.300781 84.199219 55.300781 84.199219 C 47.200781 84.199219 40.300781 81.5 34.800781 76 C 29.300781 70.5 26.5 63.699609 26.5 55.599609 C 26.5 47.399609 29.3 40.500391 35 34.900391 C 40.6 29.400391 47.600781 26.599609 55.800781 26.599609 z " transform="translate(-4.6,230)" /></svg>;
 
@@ -46,10 +46,14 @@ registerBlockType( 'cognito-forms/cognito-embed', {
 		__( 'Form' ),
 	],
 	attributes: {
-		url: {
-			source: 'text',
-			selector: '.cognito__form'
-		}
+		formID: {
+			type: 'string',
+		},
+		embedCode: {
+			type: 'string',
+			source: 'html',
+			selector: 'div',
+		},
 	},
 
 	/**
@@ -64,34 +68,42 @@ registerBlockType( 'cognito-forms/cognito-embed', {
 	 * @returns {Mixed} JSX Component.
 	 */
 	edit: ( props ) => {
-		return (
-			<Placeholder
-				icon={ CogIcon }
-				label="Cognito Forms"
-				className={ props.className }
-				instructions={ __(
-					'Click the button below to choose a form to embed.'
-				) }
-			>
-				<SelectDialog></SelectDialog>
-				<br />
-				<div className="components-placeholder__learn-more">
-					<ExternalLink
-						href={ __(
-							'https://wordpress.org/support/article/embeds/'
-						) }
-					>
-						{ __( '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>
-		);
+		const handleForm = ( code ) => {
+			props.setAttributes( { embedCode: code } );
+		};
+
+		if ( ! props.attributes.embedCode ) {
+			return (
+				<Placeholder
+					icon={ CogIcon }
+					label="Cognito Forms"
+					className={ props.className }
+					instructions={ __(
+						'Click the button below to choose a form to embed.'
+					) }
+				>
+					<SelectDialog onSelectForm={ handleForm }></SelectDialog>
+					<br />
+					<div className="components-placeholder__learn-more">
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/support/article/embeds/'
+							) }
+						>
+							{ __( '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: props.attributes.embedCode } }></div> );
 	},
 
 	/**
@@ -107,20 +119,10 @@ registerBlockType( 'cognito-forms/cognito-embed', {
 	 */
 	save: ( props ) => {
 		return (
-			<div className={ props.className }>
-				<p>— Hello from the frontend.</p>
-				<p>
-					CGB BLOCK: <code>cognito</code> is a new Gutenberg block.
-				</p>
-				<iframe className="cognito__form" src={ props.attributes.url }></iframe>
-				<p>
-					It was created via{ ' ' }
-					<code>
-						<a href="https://github.com/ahmadawais/create-guten-block">
-							create-guten-block
-						</a>
-					</code>.
-				</p>
+			<div
+				className={ props.className }
+				dangerouslySetInnerHTML={ { __html: props.attributes.embedCode } }
+			>
 			</div>
 		);
 	},

src/block/blockEdit.js

@@ -0,0 +1,15 @@
+import { Component } from '@wordpress/element';
+
+class CognitoBlockEdit extends Component {
+	render() {
+		const { attributes, setAttributes } = this.props;
+
+		return (
+			<div>
+
+			</div>
+		);
+	}
+}
+
+export default CognitoBlockEdit;

src/block/select-dialog.js

@@ -1,26 +1,45 @@
-/** 
+/**
  * WordPress dependencies
  */
+import React from 'react';
 import { Button, Modal, FocusableIframe } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
-const SelectDialog = () => {
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
+class SelectDialog extends React.Component {
+	constructor(props) {
+    super(props);
 
-	return (
+    this.state = {
+			isOpen: false
+		};
+	};
+
+	componentDidMount() {
+		window.addEventListener('message', this.handlePostMessage, false);
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener('message', this.handlePostMessage);
+	}
+
+	handlePostMessage = (event) => {
+		console.log('PostMessage recieved:', event.data);
+		this.props.onSelectForm(event.data);
+	}
+
+	render() {
+		return (
 			<div>
-					<Button variant="primary" onClick={ openModal }>
+					<Button variant="primary" onClick={ () => this.setState({isOpen: true}) }>
 							Choose a form
 					</Button>
-					{ isOpen && (
-						<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ closeModal } shouldCloseOnClickOutside={ false }>
-							<FocusableIframe style={{ width: "500px", height: "500px" }} src="//example.com"></FocusableIframe>
+					{ this.state.isOpen && (
+						<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ () => this.setState({isOpen: false}) } shouldCloseOnClickOutside={ false }>
+							<FocusableIframe style={{ width: "500px", height: "500px" }} src="/wp-content/plugins/cognitoforms/testing/dialog.html"></FocusableIframe>
 						</Modal>
 					) }
 			</div>
-	);
+		);
+	};
 };
 
-export default SelectDialog
+export default SelectDialog