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

Add initial block controls

This commit is contained in:
Michael Thomas 2022-01-22 22:20:12 -05:00
parent 8e51f2ca38
commit 972d62a5cf
1 changed files with 78 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/edit.tsx
View File

@ -2,7 +2,13 @@ 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 } 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 CogIcon from '@/assets/cogicon';
import SelectDialog from '@/components/select-dialog'; 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 ) { if ( ! attributes.formId ) {
return ( return (
<Placeholder <div>
icon={ CogIcon } <Placeholder
label="Cognito Forms" icon={ CogIcon }
className={ className } label="Cognito Forms"
instructions={ __( className={ className }
'Click the button below to choose a form to embed.' instructions={ __(
) } 'Click the button below to choose a form to embed.'
> ) }
<SelectDialog onSelectForm={ handleForm }></SelectDialog> >
<br /> <SelectDialog onSelectForm={ handleForm }></SelectDialog>
<div className="components-placeholder__learn-more"> <br />
<ExternalLink <div className="components-placeholder__learn-more">
href={ __( <ExternalLink
'https://wordpress.org/support/article/embeds/' href={ __(
) } 'https://wordpress.org/support/article/embeds/'
> ) }
{ __( 'Learn more about embeds' ) } >
</ExternalLink> { __( 'Learn more about embeds' ) }
</div> </ExternalLink>
</Placeholder> </div>
</Placeholder>
</div>
); );
} }
return ( return (
<PreviewForm <div>
formId={ attributes.formId } // TODO: this should actually be the form GUID {
embedCode={ attributes.iframeEmbedCode } <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>
); );
}; };