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,36 +26,83 @@ 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 (
-			<Placeholder
-				icon={ CogIcon }
-				label="Cognito Forms"
-				className={ 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>
-			</Placeholder>
+			<div>
+				<Placeholder
+					icon={ CogIcon }
+					label="Cognito Forms"
+					className={ 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>
+				</Placeholder>
+			</div>
 		);
 	}
 
 	return (
-		<PreviewForm
-			formId={ attributes.formId } // TODO: this should actually be the form GUID
-			embedCode={ attributes.iframeEmbedCode }
-		/>
+		<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>
 	);
 };