cognito-forms
/
cognitoforms-wordpress
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add embed mode selector

This commit is contained in:
Michael Thomas 2022-01-28 12:09:02 -05:00
parent 945561f7e0
commit 4bc1f2a9c4
1 changed files with 27 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/edit.tsx
View File

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