Migrate everything to Typescript & do lots of cleanup 🎉
This commit is contained in:
parent
c3cb5aa468
commit
cb5abdbb9a
File diff suppressed because one or more lines are too long
|
|
@ -1,17 +0,0 @@
|
|||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
/**
|
||||
* #.# Editor Styles
|
||||
*
|
||||
* CSS for just Backend enqueued after style.scss
|
||||
* which makes it higher in priority.
|
||||
*/
|
||||
.cognito-modal > .components-modal__content {
|
||||
padding: initial; }
|
||||
|
||||
.cognito-modal > .components-modal__content > .components-modal__header {
|
||||
margin: initial; }
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
/**
|
||||
* #.# Styles
|
||||
*
|
||||
* CSS for both Frontend+Backend.
|
||||
*/
|
||||
63
package.json
63
package.json
|
|
@ -1,13 +1,54 @@
|
|||
{
|
||||
"name": "cognito-forms-wordpress",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "cgb-scripts start",
|
||||
"build": "cgb-scripts build",
|
||||
"eject": "cgb-scripts eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"cgb-scripts": "1.23.1"
|
||||
}
|
||||
"name": "cognito-forms-wordpress",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"main": "src/blocks.ts",
|
||||
"scripts": {
|
||||
"build:js": "webpack --mode=production",
|
||||
"build:sass": "sass src/styles:dist",
|
||||
"build": "npm run build:js && npm run build:sass",
|
||||
"watch:js": "webpack --mode=development --watch",
|
||||
"watch:sass": "sass -w src/styles:dist",
|
||||
"start": "shx rm -rf dist/* && concurrently -n \"JS,CSS\" -c \"bgBlue.bold,bgMagenta.bold\" --kill-others \"npm run watch:js\" \"wait-on dist/index.js && npm run watch:sass\""
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/node": "^17.0.8",
|
||||
"@types/react": "^17.0.38",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"@types/wordpress__block-editor": "^6.0.4",
|
||||
"@types/wordpress__blocks": "^9.1.1",
|
||||
"@wordpress/block-editor": "^8.0.13",
|
||||
"@wordpress/blocks": "^11.1.5",
|
||||
"@wordpress/i18n": "^4.2.4",
|
||||
"@wordpress/scripts": "^19.2.2",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"svg-react-loader": "^0.4.6",
|
||||
"ts-loader": "^9.2.6",
|
||||
"typescript": "~4.5.4",
|
||||
"webpack": "^5.66.0",
|
||||
"webpack-cli": "^4.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^7.0.0",
|
||||
"prettier": "^2.0.5",
|
||||
"sass": "^1.48.0",
|
||||
"shx": "^0.3.4",
|
||||
"wait-on": "^6.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
55
plugin.php
55
plugin.php
|
|
@ -2,7 +2,7 @@
|
|||
/*
|
||||
Plugin Name: Cognito Forms
|
||||
Plugin URI: http://wordpress.org/plugins/cognito-forms/
|
||||
Description: Cognito Forms is a free online form builder that integrates seemlessly with WordPress. Create contact forms, registrations forms, surveys, and more!
|
||||
Description: Cognito Forms is a free online form builder that integrates seamlessly with WordPress. Create contact forms, registrations forms, surveys, and more!
|
||||
Version: 2.0.0
|
||||
Author: Cognito Apps
|
||||
Author URI: https://www.cognitoforms.com
|
||||
|
|
@ -30,11 +30,6 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Block Initializer.
|
||||
*/
|
||||
require_once plugin_dir_path( __FILE__ ) . 'src/init.php';
|
||||
|
||||
/**
|
||||
* The Plugin
|
||||
*/
|
||||
|
|
@ -44,7 +39,8 @@ if ( !class_exists('CognitoFormsPlugin') ) {
|
|||
// Initialization actions
|
||||
private static $actions = array(
|
||||
'admin_init',
|
||||
'admin_menu'
|
||||
'admin_menu',
|
||||
'init'
|
||||
);
|
||||
|
||||
// Registers plug-in actions
|
||||
|
|
@ -90,6 +86,51 @@ if ( !class_exists('CognitoFormsPlugin') ) {
|
|||
}
|
||||
}
|
||||
|
||||
public function init() {
|
||||
$this->block_init();
|
||||
}
|
||||
|
||||
// Initialize block
|
||||
public function block_init() {
|
||||
$dir = dirname( __FILE__ );
|
||||
|
||||
$asset_file = include( plugin_dir_path( __FILE__ ) . 'dist/index.asset.php');
|
||||
|
||||
// Register global block styles
|
||||
wp_register_style(
|
||||
'cognito-block-global-css', // Handle.
|
||||
plugins_url( 'dist/style.css', __FILE__ ),
|
||||
is_admin() ? array( 'wp-editor' ) : null, // Dependency to include the CSS after it.
|
||||
null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
|
||||
);
|
||||
|
||||
// Register block editor script for backend
|
||||
wp_register_script(
|
||||
'cognito-block-editor-js',
|
||||
plugins_url( 'dist/index.js', __FILE__ ),
|
||||
$asset_file['dependencies'],
|
||||
$asset_file['version']
|
||||
);
|
||||
|
||||
// Register block editor styles for backend.
|
||||
wp_register_style(
|
||||
'cognito-block-editor-css', // Handle.
|
||||
plugins_url( 'dist/editor.css', __FILE__ ), // Block editor CSS.
|
||||
array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
|
||||
null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
|
||||
);
|
||||
|
||||
register_block_type(
|
||||
'cognito-forms/cognito-embed', array(
|
||||
// Enqueue global block styles on both frontend and backend
|
||||
'style' => 'cognito-block-global-css',
|
||||
// Enqueue block js in the editor only
|
||||
'editor_script' => 'cognito-block-editor-js',
|
||||
// Enqueue editor block styles in the editor only
|
||||
'editor_style' => 'cognito-block-editor-css'
|
||||
) );
|
||||
}
|
||||
|
||||
// Set up tinyMCE buttons
|
||||
public function mce_buttons($buttons) {
|
||||
array_push($buttons, '|', 'cognito');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import * as React from 'react';
|
||||
|
||||
export default <svg version="1.1" viewBox="-4.6 230 110.9 111" xmlns="http://www.w3.org/2000/svg"><path id="path4" className="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>;
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
/**
|
||||
* 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: {
|
||||
formID: {
|
||||
type: 'integer',
|
||||
},
|
||||
seamlessEmbedCode: {
|
||||
type: 'string',
|
||||
},
|
||||
iframeEmbedCode: {
|
||||
type: 'string',
|
||||
},
|
||||
embedType: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 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 ) => {
|
||||
const handleForm = ( form ) => {
|
||||
const formObj = JSON.parse( form );
|
||||
props.setAttributes( {
|
||||
formID: formObj.id,
|
||||
seamlessEmbedCode: formObj.seamlessEmbedCode,
|
||||
iframeEmbedCode: formObj.iframeEmbedCode,
|
||||
embedType: 'seamless',
|
||||
} );
|
||||
};
|
||||
|
||||
if ( ! props.attributes.formID ) {
|
||||
return (
|
||||
<Placeholder
|
||||
icon={ CogIcon }
|
||||
label="Cognito Forms"
|
||||
className={ props.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>
|
||||
{/* <PlainText
|
||||
onChange={ content => props.setAttributes({ url: content }) }
|
||||
value={ props.attributes.url }
|
||||
placeholder="Your form url"
|
||||
className="cognito__form"
|
||||
/> */}
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
return ( <div dangerouslySetInnerHTML={ { __html: props.attributes.iframeEmbedCode } }></div> );
|
||||
},
|
||||
|
||||
/**
|
||||
* 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 ) => {
|
||||
const embedCode = ( props.attributes.embedType === 'seamless' ) ? props.attributes.seamlessEmbedCode : props.attributes.iframeEmbedCode;
|
||||
return (
|
||||
<div
|
||||
className={ props.className }
|
||||
dangerouslySetInnerHTML={ { __html: embedCode } }
|
||||
>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
} );
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { Component } from '@wordpress/element';
|
||||
|
||||
class CognitoBlockEdit extends Component {
|
||||
render() {
|
||||
const { attributes, setAttributes } = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CognitoBlockEdit;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
/**
|
||||
* Gutenberg Blocks
|
||||
*
|
||||
* All blocks related JavaScript files should be imported here.
|
||||
* You can create a new block folder in this dir and include code
|
||||
* for that block here as well.
|
||||
*
|
||||
* All blocks should be included here since this is the file that
|
||||
* Webpack is compiling as the input file.
|
||||
*/
|
||||
|
||||
import './block/block.js';
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
/**
|
||||
* #.# Common SCSS
|
||||
*
|
||||
* Can include things like variables and mixins
|
||||
* that are used across the project.
|
||||
*/
|
||||
|
||||
// Colors.
|
||||
$black: rgb(41, 41, 41);
|
||||
$white: #f4f4f4;
|
||||
$gray: #dedede;
|
||||
$green: #bada55;
|
||||
$red: orangered;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
ToolbarButton,
|
||||
|
|
@ -51,4 +52,4 @@ const EmbedControls = ( {
|
|||
</>
|
||||
);
|
||||
|
||||
export default EmbedControls;
|
||||
export default EmbedControls;
|
||||
|
|
@ -1,11 +1,21 @@
|
|||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import { Button, Modal, FocusableIframe } from '@wordpress/components';
|
||||
|
||||
class SelectDialog extends React.Component {
|
||||
constructor( props ) {
|
||||
import { baseUrl } from '../globals';
|
||||
|
||||
type DialogProps = {
|
||||
onSelectForm: Function;
|
||||
};
|
||||
|
||||
type DialogState = {
|
||||
isOpen: boolean;
|
||||
};
|
||||
|
||||
class SelectDialog extends React.Component<DialogProps, DialogState> {
|
||||
constructor( props: any ) {
|
||||
super( props );
|
||||
|
||||
this.state = {
|
||||
|
|
@ -21,7 +31,7 @@ class SelectDialog extends React.Component {
|
|||
window.removeEventListener( 'message', this.handlePostMessage );
|
||||
}
|
||||
|
||||
handlePostMessage = ( event ) => {
|
||||
handlePostMessage = ( event: MessageEvent ) => {
|
||||
console.log( 'PostMessage recieved:', event.data );
|
||||
this.props.onSelectForm( event.data );
|
||||
}
|
||||
|
|
@ -29,12 +39,12 @@ class SelectDialog extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button variant="primary" onClick={ () => this.setState( { isOpen: true } ) }>
|
||||
<Button isPrimary={true} onClick={ () => this.setState( { isOpen: true } ) }>
|
||||
Choose a form
|
||||
</Button>
|
||||
{ this.state.isOpen && (
|
||||
<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ () => this.setState( { isOpen: false } ) } shouldCloseOnClickOutside={ false }>
|
||||
<FocusableIframe style={ { width: '500px', height: '500px' } } src="/wp-content/plugins/cognitoforms/testing/dialog.html"></FocusableIframe>
|
||||
<Modal title="Cognito Forms" className="cognito-modal" onRequestClose={ () => this.setState( { isOpen: false } ) } shouldCloseOnClickOutside={ false }>
|
||||
<FocusableIframe style={ { width: '500px', height: '500px', display: 'block' } } src={ `${ baseUrl }/integrations/cms` }></FocusableIframe>
|
||||
</Modal>
|
||||
) }
|
||||
</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import * as React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { BlockEditProps } from '@wordpress/blocks';
|
||||
import { Placeholder, ExternalLink } from '@wordpress/components';
|
||||
|
||||
import CogIcon from './assets/cogicon';
|
||||
import SelectDialog from './components/select-dialog';
|
||||
import { BlockAttributes, EmbedMode } from './types';
|
||||
|
||||
const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
|
||||
const handleForm = ( form: string ) => {
|
||||
const formObj = JSON.parse( form );
|
||||
setAttributes( {
|
||||
formId: formObj.id,
|
||||
seamlessEmbedCode: formObj.seamlessEmbedCode,
|
||||
iframeEmbedCode: formObj.iframeEmbedCode,
|
||||
embedMode: EmbedMode.Seamless,
|
||||
} );
|
||||
};
|
||||
|
||||
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>
|
||||
{/* <PlainText
|
||||
onChange={ content => props.setAttributes({ url: content }) }
|
||||
value={ props.attributes.url }
|
||||
placeholder="Your form url"
|
||||
className="cognito__form"
|
||||
/> */}
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
return ( <div dangerouslySetInnerHTML={ { __html: attributes.iframeEmbedCode } }></div> );
|
||||
}
|
||||
|
||||
export default Edit;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export const baseUrl: string = '//forms.cognito.test';
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* Cognito Forms WordPress Plugin
|
||||
*/
|
||||
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { BlockAttributes } from './types';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import Save from './save';
|
||||
|
||||
import CogIcon from './assets/cogicon';
|
||||
|
||||
registerBlockType<BlockAttributes> ( 'cognito-forms/cognito-embed', {
|
||||
title: 'Cognito Forms',
|
||||
icon: CogIcon,
|
||||
description: __(
|
||||
'An example typescript block.',
|
||||
'cognito'
|
||||
),
|
||||
category: 'embed',
|
||||
supports: {
|
||||
// Removes support for an HTML mode.
|
||||
html: false,
|
||||
},
|
||||
attributes: {
|
||||
formId: {
|
||||
type: 'number',
|
||||
},
|
||||
seamlessEmbedCode: {
|
||||
type: 'string',
|
||||
},
|
||||
iframeEmbedCode: {
|
||||
type: 'string',
|
||||
},
|
||||
ampEmbedCode: {
|
||||
type: 'string',
|
||||
},
|
||||
embedMode: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
edit: Edit,
|
||||
save: Save,
|
||||
} );
|
||||
90
src/init.php
90
src/init.php
|
|
@ -1,90 +0,0 @@
|
|||
<?php
|
||||
/**
|
||||
* Blocks Initializer
|
||||
*
|
||||
* Enqueue CSS/JS of all the blocks.
|
||||
*
|
||||
* @since 1.0.0
|
||||
* @package CGB
|
||||
*/
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue Gutenberg block assets for both frontend + backend.
|
||||
*
|
||||
* Assets enqueued:
|
||||
* 1. blocks.style.build.css - Frontend + Backend.
|
||||
* 2. blocks.build.js - Backend.
|
||||
* 3. blocks.editor.build.css - Backend.
|
||||
*
|
||||
* @uses {wp-blocks} for block type registration & related functions.
|
||||
* @uses {wp-element} for WP Element abstraction — structure of blocks.
|
||||
* @uses {wp-i18n} to internationalize the block's text.
|
||||
* @uses {wp-editor} for WP editor styles.
|
||||
* @since 1.0.0
|
||||
*/
|
||||
function cognito_cgb_block_assets() { // phpcs:ignore
|
||||
// Register block styles for both frontend + backend.
|
||||
wp_register_style(
|
||||
'cognito-cgb-style-css', // Handle.
|
||||
plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
|
||||
is_admin() ? array( 'wp-editor' ) : null, // Dependency to include the CSS after it.
|
||||
null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
|
||||
);
|
||||
|
||||
// Register block editor script for backend.
|
||||
wp_register_script(
|
||||
'cognito-cgb-block-js', // Handle.
|
||||
plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
|
||||
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
|
||||
null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
|
||||
true // Enqueue the script in the footer.
|
||||
);
|
||||
|
||||
// Register block editor styles for backend.
|
||||
wp_register_style(
|
||||
'cognito-cgb-block-editor-css', // Handle.
|
||||
plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
|
||||
array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
|
||||
null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
|
||||
);
|
||||
|
||||
// WP Localized globals. Use dynamic PHP stuff in JavaScript via `cgbGlobal` object.
|
||||
wp_localize_script(
|
||||
'cognito-cgb-block-js',
|
||||
'cgbGlobal', // Array containing dynamic data for a JS Global.
|
||||
[
|
||||
'pluginDirPath' => plugin_dir_path( __DIR__ ),
|
||||
'pluginDirUrl' => plugin_dir_url( __DIR__ ),
|
||||
// Add more data here that you want to access from `cgbGlobal` object.
|
||||
]
|
||||
);
|
||||
|
||||
/**
|
||||
* Register Gutenberg block on server-side.
|
||||
*
|
||||
* Register the block on server-side to ensure that the block
|
||||
* scripts and styles for both frontend and backend are
|
||||
* enqueued when the editor loads.
|
||||
*
|
||||
* @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
|
||||
* @since 1.16.0
|
||||
*/
|
||||
register_block_type(
|
||||
'cgb/block-cognito', array(
|
||||
// Enqueue blocks.style.build.css on both frontend & backend.
|
||||
'style' => 'cognito-cgb-style-css',
|
||||
// Enqueue blocks.build.js in the editor only.
|
||||
'editor_script' => 'cognito-cgb-block-js',
|
||||
// Enqueue blocks.editor.build.css in the editor only.
|
||||
'editor_style' => 'cognito-cgb-block-editor-css',
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Hook: Block assets.
|
||||
add_action( 'init', 'cognito_cgb_block_assets' );
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { BlockSaveProps } from '@wordpress/blocks';
|
||||
|
||||
import { EmbedMode, BlockAttributes } from './types';
|
||||
|
||||
const Save: React.FC<BlockSaveProps<BlockAttributes>> = ( props: any ) => {
|
||||
let embedCode = '';
|
||||
|
||||
switch ( props.attributes.embedMode ) {
|
||||
case EmbedMode.Seamless:
|
||||
embedCode = props.attributes.seamlessEmbedCode;
|
||||
break;
|
||||
case EmbedMode.IFrame:
|
||||
embedCode = props.attributes.iframeEmbedCode;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ props.className }
|
||||
dangerouslySetInnerHTML={ { __html: embedCode } }
|
||||
>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Save;
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
/**
|
||||
* #.# Editor Styles
|
||||
*
|
||||
* CSS for just Backend enqueued after style.scss
|
||||
* which makes it higher in priority.
|
||||
* CSS for just Backend
|
||||
* Enqueued after style.scss which makes it higher in priority.
|
||||
*
|
||||
*/
|
||||
|
||||
// Remove modal padding
|
||||
|
|
@ -11,4 +12,4 @@
|
|||
}
|
||||
.cognito-modal > .components-modal__content > .components-modal__header {
|
||||
margin: initial;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
export enum EmbedMode {
|
||||
Seamless,
|
||||
IFrame
|
||||
}
|
||||
|
||||
export interface BlockAttributes {
|
||||
formId: number,
|
||||
iframeEmbedCode: string;
|
||||
seamlessEmbedCode: string;
|
||||
ampEmbedCode: string;
|
||||
embedMode: EmbedMode;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./build/",
|
||||
"target": "es5",
|
||||
"jsx": "react",
|
||||
"module": "commonjs",
|
||||
"noImplicitAny": true,
|
||||
"allowJs": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
const path = require( 'path' );
|
||||
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
|
||||
|
||||
module.exports = {
|
||||
...defaultConfig,
|
||||
entry: './src/index.tsx',
|
||||
module: {
|
||||
...defaultConfig.module,
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'svg-react-loader',
|
||||
options: {
|
||||
jsx: true
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [ 'style-loader', 'sass-loader' ]
|
||||
},
|
||||
...defaultConfig.module.rules,
|
||||
],
|
||||
},
|
||||
|
||||
resolve: {
|
||||
...defaultConfig.resolve,
|
||||
extensions: [ '.tsx', '.ts', 'js', 'jsx' ],
|
||||
},
|
||||
|
||||
output: {
|
||||
...defaultConfig.output,
|
||||
filename: 'index.js',
|
||||
path: path.resolve( __dirname, 'dist' ),
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue