Migrate everything to Typescript & do lots of cleanup 🎉

src/components/block-controls.tsx.ignore

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import {
+	ToolbarButton,
+	PanelBody,
+	ToggleControl,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { edit } from '@wordpress/icons';
+
+const EmbedControls = ( {
+	blockSupportsResponsive,
+	showEditButton,
+	themeSupportsResponsive,
+	allowResponsive,
+	getResponsiveHelp,
+	toggleResponsive,
+	switchBackToURLInput,
+} ) => (
+	<>
+		<BlockControls>
+			<ToolbarGroup>
+				{ showEditButton && (
+					<ToolbarButton
+						className="components-toolbar__control"
+						label={ __( 'Edit URL' ) }
+						icon={ edit }
+						onClick={ switchBackToURLInput }
+					/>
+				) }
+			</ToolbarGroup>
+		</BlockControls>
+		{ themeSupportsResponsive && blockSupportsResponsive && (
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Media settings' ) }
+					className="blocks-responsive"
+				>
+					<ToggleControl
+						label={ __( 'Resize for smaller devices' ) }
+						checked={ allowResponsive }
+						help={ getResponsiveHelp }
+						onChange={ toggleResponsive }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		) }
+	</>
+);
+
+export default EmbedControls;

src/components/select-dialog.tsx

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import * as React from 'react';
+import { Button, Modal, FocusableIframe } from '@wordpress/components';
+
+import { baseUrl } from '../globals';
+
+type DialogProps = {
+  onSelectForm: Function;
+};
+
+type DialogState = {
+  isOpen: boolean;
+};
+
+class SelectDialog extends React.Component<DialogProps, DialogState> {
+	constructor( props: any ) {
+		super( props );
+
+		this.state = {
+			isOpen: false,
+		};
+	}
+
+	componentDidMount() {
+		window.addEventListener( 'message', this.handlePostMessage, false );
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener( 'message', this.handlePostMessage );
+	}
+
+	handlePostMessage = ( event: MessageEvent ) => {
+		console.log( 'PostMessage recieved:', event.data );
+		this.props.onSelectForm( event.data );
+	}
+
+	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 } ) } shouldCloseOnClickOutside={ false }>
+						<FocusableIframe style={ { width: '500px', height: '500px', display: 'block' } } src={ `${ baseUrl }/integrations/cms` }></FocusableIframe>
+					</Modal>
+				) }
+			</div>
+		);
+	}
+}
+
+export default SelectDialog;