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",
|
"name": "cognito-forms-wordpress",
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"main": "src/blocks.ts",
|
||||||
"start": "cgb-scripts start",
|
"scripts": {
|
||||||
"build": "cgb-scripts build",
|
"build:js": "webpack --mode=production",
|
||||||
"eject": "cgb-scripts eject"
|
"build:sass": "sass src/styles:dist",
|
||||||
},
|
"build": "npm run build:js && npm run build:sass",
|
||||||
"dependencies": {
|
"watch:js": "webpack --mode=development --watch",
|
||||||
"cgb-scripts": "1.23.1"
|
"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 Name: Cognito Forms
|
||||||
Plugin URI: http://wordpress.org/plugins/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
|
Version: 2.0.0
|
||||||
Author: Cognito Apps
|
Author: Cognito Apps
|
||||||
Author URI: https://www.cognitoforms.com
|
Author URI: https://www.cognitoforms.com
|
||||||
|
|
@ -30,11 +30,6 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Block Initializer.
|
|
||||||
*/
|
|
||||||
require_once plugin_dir_path( __FILE__ ) . 'src/init.php';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The Plugin
|
* The Plugin
|
||||||
*/
|
*/
|
||||||
|
|
@ -44,7 +39,8 @@ if ( !class_exists('CognitoFormsPlugin') ) {
|
||||||
// Initialization actions
|
// Initialization actions
|
||||||
private static $actions = array(
|
private static $actions = array(
|
||||||
'admin_init',
|
'admin_init',
|
||||||
'admin_menu'
|
'admin_menu',
|
||||||
|
'init'
|
||||||
);
|
);
|
||||||
|
|
||||||
// Registers plug-in actions
|
// 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
|
// Set up tinyMCE buttons
|
||||||
public function mce_buttons($buttons) {
|
public function mce_buttons($buttons) {
|
||||||
array_push($buttons, '|', 'cognito');
|
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
|
* WordPress dependencies
|
||||||
*/
|
*/
|
||||||
|
import * as React from 'react';
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import {
|
import {
|
||||||
ToolbarButton,
|
ToolbarButton,
|
||||||
|
|
@ -1,11 +1,21 @@
|
||||||
/**
|
/**
|
||||||
* WordPress dependencies
|
* WordPress dependencies
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import * as React from 'react';
|
||||||
import { Button, Modal, FocusableIframe } from '@wordpress/components';
|
import { Button, Modal, FocusableIframe } from '@wordpress/components';
|
||||||
|
|
||||||
class SelectDialog extends React.Component {
|
import { baseUrl } from '../globals';
|
||||||
constructor( props ) {
|
|
||||||
|
type DialogProps = {
|
||||||
|
onSelectForm: Function;
|
||||||
|
};
|
||||||
|
|
||||||
|
type DialogState = {
|
||||||
|
isOpen: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
class SelectDialog extends React.Component<DialogProps, DialogState> {
|
||||||
|
constructor( props: any ) {
|
||||||
super( props );
|
super( props );
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
|
|
@ -21,7 +31,7 @@ class SelectDialog extends React.Component {
|
||||||
window.removeEventListener( 'message', this.handlePostMessage );
|
window.removeEventListener( 'message', this.handlePostMessage );
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePostMessage = ( event ) => {
|
handlePostMessage = ( event: MessageEvent ) => {
|
||||||
console.log( 'PostMessage recieved:', event.data );
|
console.log( 'PostMessage recieved:', event.data );
|
||||||
this.props.onSelectForm( event.data );
|
this.props.onSelectForm( event.data );
|
||||||
}
|
}
|
||||||
|
|
@ -29,12 +39,12 @@ class SelectDialog extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Button variant="primary" onClick={ () => this.setState( { isOpen: true } ) }>
|
<Button isPrimary={true} onClick={ () => this.setState( { isOpen: true } ) }>
|
||||||
Choose a form
|
Choose a form
|
||||||
</Button>
|
</Button>
|
||||||
{ this.state.isOpen && (
|
{ this.state.isOpen && (
|
||||||
<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ () => this.setState( { isOpen: false } ) } shouldCloseOnClickOutside={ false }>
|
<Modal title="Cognito Forms" 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>
|
<FocusableIframe style={ { width: '500px', height: '500px', display: 'block' } } src={ `${ baseUrl }/integrations/cms` }></FocusableIframe>
|
||||||
</Modal>
|
</Modal>
|
||||||
) }
|
) }
|
||||||
</div>
|
</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
|
* #.# Editor Styles
|
||||||
*
|
*
|
||||||
* CSS for just Backend enqueued after style.scss
|
* CSS for just Backend
|
||||||
* which makes it higher in priority.
|
* Enqueued after style.scss which makes it higher in priority.
|
||||||
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Remove modal padding
|
// Remove modal padding
|
||||||
|
|
@ -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