128 lines
5.6 KiB
JavaScript
128 lines
5.6 KiB
JavaScript
/**
|
|
* BLOCK: cognito
|
|
*
|
|
* Allows for the embedding of Cognito Forms into the Gutenburg editor with an interactive dialog to choose a form to embed.
|
|
*/
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { __, _x } from '@wordpress/i18n';
|
|
import { registerBlockType } from '@wordpress/blocks';
|
|
import { PlainText } from '@wordpress/editor';
|
|
import { Button, Placeholder, ExternalLink } from '@wordpress/components';
|
|
import { BlockIcon } from '@wordpress/block-editor';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './editor.scss';
|
|
import './style.scss';
|
|
import SelectDialog from './select-dialog'
|
|
|
|
const CogIcon = <svg version="1.1" viewBox="-4.6 230 110.9 111" xmlns="http://www.w3.org/2000/svg"><path id="path4" class="st0" d="M 48.599609 0 L 45.699219 16 C 41.699219 17.1 37.999609 18.4 34.599609 20.5 L 21.5 11.5 L 11.699219 20.699219 L 20.599609 34.699219 C 18.399609 38.199219 16.9 41.900391 16 45.900391 L 0 48.699219 L 0 62.699219 L 15.900391 65.599609 C 17.000391 69.699609 18.499219 73.4 20.699219 77 C 20.699219 77 21.199609 77.9 20.599609 77 L 20.5 76.900391 L 11.5 90 L 21.300781 99.800781 L 34.5 90.800781 C 38 93.000781 41.699219 94.499609 45.699219 95.599609 L 48.5 111 L 62.400391 111 L 65.199219 95.099609 C 69.199219 94.099609 73.099609 92.5 76.599609 90.5 L 89.699219 99.5 L 99.5 89.699219 L 90.5 76.599609 C 92.6 73.099609 94.200781 69.299219 95.300781 65.199219 L 110.90039 62.400391 L 110.90039 48.5 L 95.300781 45.699219 C 94.200781 41.699219 92.7 37.900781 90.5 34.300781 L 99.5 21.199219 L 89.699219 11.400391 L 76.599609 20.599609 C 72.699609 18.299609 65.400391 16 65.400391 16 L 62.5 0 L 48.599609 0 z M 55.800781 26.599609 C 63.900781 26.599609 70.7 29.300391 76 34.900391 C 78.2 37.200391 80.1 39.799609 81.5 43.099609 C 80.6 44.899609 79.9 46.699219 79.5 48.699219 L 66.599609 50.900391 C 64.599609 45.300391 60.699219 42.900391 55.199219 42.900391 C 51.599219 42.900391 48.7 44.1 46.5 46.5 C 44.2 48.9 43.099609 51.899219 43.099609 55.699219 C 43.099609 59.299219 44.200391 62.199609 46.400391 64.599609 C 48.700391 66.999609 51.500391 68.099609 54.900391 68.099609 C 58.400391 68.099609 61.099219 67.1 63.199219 65 C 64.499219 63.8 65.3 62.300391 66 60.400391 L 79.400391 62.900391 L 79.400391 62.800781 C 79.800391 64.500781 80.399609 66.199219 81.099609 67.699219 C 79.699609 71.099219 77.700781 74.2 74.800781 77 C 69.800781 81.8 63.300781 84.199219 55.300781 84.199219 C 47.200781 84.199219 40.300781 81.5 34.800781 76 C 29.300781 70.5 26.5 63.699609 26.5 55.599609 C 26.5 47.399609 29.3 40.500391 35 34.900391 C 40.6 29.400391 47.600781 26.599609 55.800781 26.599609 z " transform="translate(-4.6,230)" /></svg>;
|
|
|
|
/**
|
|
* Register: aa Gutenberg Block.
|
|
*
|
|
* Registers a new block provided a unique name and an object defining its
|
|
* behavior. Once registered, the block is made editor as an option to any
|
|
* editor interface where blocks are implemented.
|
|
*
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/
|
|
* @param {string} name Block name.
|
|
* @param {Object} settings Block settings.
|
|
* @return {?WPBlock} The block, if it has been successfully
|
|
* registered; otherwise `undefined`.
|
|
*/
|
|
registerBlockType( 'cognito-forms/cognito-embed', {
|
|
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
|
|
title: __( 'Cognito Forms' ), // Block title.
|
|
icon: CogIcon,
|
|
category: 'embed', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
|
|
keywords: [
|
|
__( 'Cognito' ),
|
|
__( 'Cognito Forms' ),
|
|
__( 'Form' ),
|
|
],
|
|
attributes: {
|
|
url: {
|
|
source: 'text',
|
|
selector: '.cognito__form'
|
|
}
|
|
},
|
|
|
|
/**
|
|
* The edit function describes the structure of your block in the context of the editor.
|
|
* This represents what the editor will render when the block is used.
|
|
*
|
|
* The "edit" property must be a valid function.
|
|
*
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
|
*
|
|
* @param {Object} props Props.
|
|
* @returns {Mixed} JSX Component.
|
|
*/
|
|
edit: ( props ) => {
|
|
return (
|
|
<Placeholder
|
|
icon={ CogIcon }
|
|
label="Cognito Forms"
|
|
className={ props.className }
|
|
instructions={ __(
|
|
'Click the button below to choose a form to embed.'
|
|
) }
|
|
>
|
|
<SelectDialog></SelectDialog>
|
|
<br />
|
|
<div className="components-placeholder__learn-more">
|
|
<ExternalLink
|
|
href={ __(
|
|
'https://wordpress.org/support/article/embeds/'
|
|
) }
|
|
>
|
|
{ __( 'Learn more about embeds' ) }
|
|
</ExternalLink>
|
|
</div>
|
|
{/* <PlainText
|
|
onChange={ content => props.setAttributes({ url: content }) }
|
|
value={ props.attributes.url }
|
|
placeholder="Your form url"
|
|
className="cognito__form"
|
|
/> */}
|
|
</Placeholder>
|
|
);
|
|
},
|
|
|
|
/**
|
|
* The save function defines the way in which the different attributes should be combined
|
|
* into the final markup, which is then serialized by Gutenberg into post_content.
|
|
*
|
|
* The "save" property must be specified and must be a valid function.
|
|
*
|
|
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
|
|
*
|
|
* @param {Object} props Props.
|
|
* @returns {Mixed} JSX Frontend HTML.
|
|
*/
|
|
save: ( props ) => {
|
|
return (
|
|
<div className={ props.className }>
|
|
<p>— Hello from the frontend.</p>
|
|
<p>
|
|
CGB BLOCK: <code>cognito</code> is a new Gutenberg block.
|
|
</p>
|
|
<iframe className="cognito__form" src={ props.attributes.url }></iframe>
|
|
<p>
|
|
It was created via{ ' ' }
|
|
<code>
|
|
<a href="https://github.com/ahmadawais/create-guten-block">
|
|
create-guten-block
|
|
</a>
|
|
</code>.
|
|
</p>
|
|
</div>
|
|
);
|
|
},
|
|
} );
|