Add embed mode selector

src/edit.tsx

@@ -2,13 +2,17 @@ import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 
 import { BlockEditProps } from '@wordpress/blocks';
-import { Placeholder, ExternalLink, ToolbarButton } from '@wordpress/components';
+import {
+	Placeholder,
+	ToolbarButton,
+	RadioControl,
+	PanelBody,
+	PanelRow,
+	ExternalLink,
+} from '@wordpress/components';
 import { edit } from '@wordpress/icons';
 
-import {
-	BlockControls,
-	InspectorControls,
-} from '@wordpress/block-editor';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 
 import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
 import SelectDialog from '@/components/select-dialog';
@@ -50,16 +54,6 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
 					) }
 				>
 					<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>
 		);
@@ -78,28 +72,27 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
 			}
 
 			<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>
+				<PanelBody title="Embed Settings">
+					<PanelRow>
+						<RadioControl
+							label="Embed Mode"
+							help={
+								<span>
+									The type of embed code to use with your form. <ExternalLink href="https://www.cognitoforms.com/support/10/style-publish">Learn more</ExternalLink>
+								</span>
+							}
+							selected={ attributes.embedMode }
+							options={ [
+								{ label: 'Seamless', value: EmbedMode.Seamless },
+								{ label: 'Iframe', value: EmbedMode.IFrame },
+							] }
+							onChange={ ( value: EmbedMode ) => setAttributes( { embedMode: parseInt( value.toString() ) } ) }
+						/>
+					</PanelRow>
+				</PanelBody>
 			</InspectorControls>
 
 			<PreviewForm
-				formId={ attributes.formId } // TODO: this should actually be the form GUID
 				embedCode={ attributes.iframeEmbedCode }
 			/>
 		</div>