Add initial block controls

src/edit.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 
 import { BlockEditProps } from '@wordpress/blocks';
-import { Placeholder, ExternalLink } from '@wordpress/components';
+import { Placeholder, ExternalLink, ToolbarButton } from '@wordpress/components';
+import { edit } from '@wordpress/icons';
+
+import {
+	BlockControls,
+	InspectorControls,
+} from '@wordpress/block-editor';
 
 import CogIcon from '@/assets/cogicon';
 import SelectDialog from '@/components/select-dialog';
@@ -20,8 +26,21 @@ 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"
@@ -42,14 +61,48 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
 						</ExternalLink>
 					</div>
 				</Placeholder>
+			</div>
 		);
 	}
 
 	return (
+		<div>
+			{
+				<BlockControls>
+					<ToolbarButton
+						icon={ edit }
+						label="Edit"
+						onClick={ () => resetForm() }
+					/>
+				</BlockControls>
+			}
+
+			<InspectorControls key="setting">
+				<div id="gutenpride-controls">
+					<fieldset>
+						<legend className="blocks-base-control__label">
+							{ __( 'Background color', 'gutenpride' ) }
+						</legend>
+						{/* <ColorPalette // Element Tag for Gutenberg standard colour selector
+							onChange={ onChangeBGColor } // onChange event callback
+						/> */}
+					</fieldset>
+					<fieldset>
+						<legend className="blocks-base-control__label">
+							{ __( 'Text color', 'gutenpride' ) }
+						</legend>
+						{/* <ColorPalette // Element Tag for Gutenberg standard colour selector
+							onChange={ onChangeTextColor } // onChange event callback
+						/> */}
+					</fieldset>
+				</div>
+			</InspectorControls>
+
 			<PreviewForm
 				formId={ attributes.formId } // TODO: this should actually be the form GUID
 				embedCode={ attributes.iframeEmbedCode }
 			/>
+		</div>
 	);
 };