Working Prototype

.gitignore

@@ -1,5 +1,2 @@
 node_modules
-
+dist/
-## Uncomment line below if you prefer to
-## keep compiled files out of version control
-# dist/

plugin.php

@@ -43,6 +43,7 @@ if ( !class_exists('CognitoFormsPlugin') ) {
 	class CognitoFormsPlugin {
 		// Initialization actions
 		private static $actions = array(
+			'admin_init',
 			'admin_menu'
 		);
 
@@ -52,25 +53,73 @@ if ( !class_exists('CognitoFormsPlugin') ) {
 				add_action($action, array($this, $action));
     }
 
+		// Registers tinyMCE filters
+		private function addFilters($filters) {
+			foreach($filters as $filter)
+				add_filter($filter, array($this, $filter));
+		}
+
 		// Entrypoint
 		public function __construct() {
 			$this->addActions(self::$actions);
 		}
 
+		// Initialize plug-in
+		public function admin_init() {
+			if(!current_user_can('edit_posts') && !current_user_can('edit_pages')) return;
+
+			register_setting('cognito_plugin', 'cognito_api_key');
+			register_setting('cognito_plugin', 'cognito_admin_key');
+			register_setting('cognito_plugin', 'cognito_public_key');
+			register_setting('cognito_plugin', 'cognito_organization');
+
+			// If the flag to delete options was passed-in, delete them
+			if (isset($_GET['cog_clear']) && $_GET['cog_clear'] == '1') {
+				delete_option('cognito_api_key');
+				delete_option('cognito_admin_key');
+				delete_option('cognito_public_key');
+				delete_option('cognito_organization');
+			}
+
+			// Add tinyMCE plug-in
+			if(get_user_option('rich_editing') == 'true') {
+				$this->addfilters(array(
+					'mce_buttons',
+					'mce_external_plugins'
+				));
+			}
+		}
+
+		// Set up tinyMCE buttons
+		public function mce_buttons($buttons) {
+			array_push($buttons, '|', 'cognito');
+			return $buttons;
+		}
+
+		// Initialize tinyMCE plug-in
+		public function mce_external_plugins($plugins) {
+			$plugins['cognito'] = plugin_dir_url( __FILE__ ) . 'tinymce/plugin.js';
+			return $plugins;
+		}
+
 		// Initialize administration menu (left-bar)
 		public function admin_menu() {
-			add_menu_page('Cognito Forms', 'Cognito Forms', 'manage_options', 'Cognito', array($this, 'main_page'), '../wp-content/plugins/cognito-forms/cogicon.ico');
+			add_menu_page('Cognito Forms', 'Cognito Forms', 'manage_options', 'Cognito', array($this, 'main_page'), plugin_dir_url( __FILE__ ).'cogicon.ico');
 			add_submenu_page('Cognito', 'Cognito Forms', 'View Forms', 'manage_options', 'Cognito', array($this, 'main_page'));
 			add_submenu_page('Cognito', 'Create Form', 'New Form', 'manage_options', 'CognitoCreateForm', array($this, 'main_page'));
 			add_submenu_page('Cognito', 'Templates', 'Templates', 'manage_options', 'CognitoTemplates', array($this, 'main_page'));
 
-			// add_options_page('Cognito Options', 'Cognito Forms', 'manage_options', 'CognitoOptions', array($this, 'options_page'));
+			add_options_page('Cognito Options', 'Cognito Forms', 'manage_options', 'CognitoOptions', array($this, 'options_page'));
 		}
 
 		// Entrypoint for Cognito Forms access
 		public function main_page() {
 			include 'templates/main.php';
 		}
+
+		public function options_page() {
+			include 'templates/options.php';
+		}
 	}
 	new CognitoFormsPlugin;
 }

src/block/block.js

@@ -18,7 +18,7 @@ import { BlockIcon } from '@wordpress/block-editor';
  */
 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: {
+		formID: {
-			source: 'text',
+			type: 'string',
-			selector: '.cognito__form'
+		},
-		}
+		embedCode: {
+			type: 'string',
+			source: 'html',
+			selector: 'div',
+		},
 	},
 
 	/**
@@ -64,6 +68,11 @@ registerBlockType( 'cognito-forms/cognito-embed', {
 	 * @returns {Mixed} JSX Component.
 	 */
 	edit: ( props ) => {
+		const handleForm = ( code ) => {
+			props.setAttributes( { embedCode: code } );
+		};
+
+		if ( ! props.attributes.embedCode ) {
 			return (
 				<Placeholder
 					icon={ CogIcon }
@@ -73,7 +82,7 @@ registerBlockType( 'cognito-forms/cognito-embed', {
 						'Click the button below to choose a form to embed.'
 					) }
 				>
-				<SelectDialog></SelectDialog>
+					<SelectDialog onSelectForm={ handleForm }></SelectDialog>
 					<br />
 					<div className="components-placeholder__learn-more">
 						<ExternalLink
@@ -92,6 +101,9 @@ registerBlockType( 'cognito-forms/cognito-embed', {
 					/> */}
 				</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 }>
+			<div
-				<p>— Hello from the frontend.</p>
+				className={ props.className }
-				<p>
+				dangerouslySetInnerHTML={ { __html: props.attributes.embedCode } }
-					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>
 		);
 	},

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 = () => {
+class SelectDialog extends React.Component {
-	const [ isOpen, setOpen ] = useState( false );
+	constructor(props) {
-	const openModal = () => setOpen( true );
+    super(props);
-	const closeModal = () => setOpen( false );
 
+    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 && (
+					{ this.state.isOpen && (
-						<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ closeModal } shouldCloseOnClickOutside={ false }>
+						<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ () => this.setState({isOpen: false}) } shouldCloseOnClickOutside={ false }>
-							<FocusableIframe style={{ width: "500px", height: "500px" }} src="//example.com"></FocusableIframe>
+							<FocusableIframe style={{ width: "500px", height: "500px" }} src="/wp-content/plugins/cognitoforms/testing/dialog.html"></FocusableIframe>
 						</Modal>
 					) }
 			</div>
 		);
 	};
+};
 
 export default SelectDialog

testing/dialog.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Form Selection</title>
+</head>
+<body>
+	<textarea id="embed-code"></textarea>
+	<button type="submit" onclick="postEmbedCode()">Submit</button>
+
+	<script type="text/javascript">
+		function postEmbedCode(event) {
+			var embedCode = document.querySelector("#embed-code").value;
+			window.parent.postMessage(embedCode);
+		}
+	</script>
+</body>
+</html>

tinymce/dialog.php

@@ -90,7 +90,7 @@
 			<p>Please click on the "Cognito Forms" link in the menu on the left and log in to register this plug-in with your account.</p>
 		</div>
 
-		<div id="form-list" style="display:none;">
+		<div id="form-list">
 			<h3>Embed a Form</h3>
 			<form method="post" action="">
 				<label for="formSelect">Choose a form</label>