Add initial block support

This commit is contained in:
Michael Thomas 2021-06-16 23:05:18 -04:00
parent 1426db528b
commit 7abb135072
19 changed files with 8136 additions and 188 deletions

21
.editorconfig Normal file
View File

@ -0,0 +1,21 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
# WordPress Coding Standards
# https://make.wordpress.org/core/handbook/coding-standards/
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = tab
[*.yml]
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false

9
.eslintignore Normal file
View File

@ -0,0 +1,9 @@
**/*.min.js
**/*.build.js
**/node_modules/**
**/vendor/**
build
coverage
cypress
node_modules
vendor

192
.eslintrc.json Normal file
View File

@ -0,0 +1,192 @@
{
"root": true,
"parser": "babel-eslint",
"extends": [
"wordpress",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:jest/recommended"
],
"env": {
"browser": false,
"es6": true,
"node": true,
"mocha": true,
"jest/globals": true
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"globals": {
"wp": true,
"wpApiSettings": true,
"window": true,
"document": true
},
"plugins": ["react", "jsx-a11y", "jest"],
"settings": {
"react": {
"pragma": "wp"
}
},
"rules": {
"array-bracket-spacing": ["error", "always"],
"brace-style": ["error", "1tbs"],
"camelcase": ["error", { "properties": "never" }],
"comma-dangle": ["error", "always-multiline"],
"comma-spacing": "error",
"comma-style": "error",
"computed-property-spacing": ["error", "always"],
"constructor-super": "error",
"dot-notation": "error",
"eol-last": "error",
"eqeqeq": "error",
"func-call-spacing": "error",
"indent": ["error", "tab", { "SwitchCase": 1 }],
"jsx-a11y/label-has-for": [
"error",
{
"required": "id"
}
],
"jsx-a11y/media-has-caption": "off",
"jsx-a11y/no-noninteractive-tabindex": "off",
"jsx-a11y/role-has-required-aria-props": "off",
"jsx-quotes": "error",
"key-spacing": "error",
"keyword-spacing": "error",
"lines-around-comment": "off",
"no-alert": "error",
"no-bitwise": "error",
"no-caller": "error",
"no-console": "error",
"no-const-assign": "error",
"no-debugger": "error",
"no-dupe-args": "error",
"no-dupe-class-members": "error",
"no-dupe-keys": "error",
"no-duplicate-case": "error",
"no-duplicate-imports": "error",
"no-else-return": "error",
"no-eval": "error",
"no-extra-semi": "error",
"no-fallthrough": "error",
"no-lonely-if": "error",
"no-mixed-operators": "error",
"no-mixed-spaces-and-tabs": "error",
"no-multiple-empty-lines": ["error", { "max": 1 }],
"no-multi-spaces": "error",
"no-multi-str": "off",
"no-negated-in-lhs": "error",
"no-nested-ternary": "error",
"no-redeclare": "error",
"no-restricted-syntax": [
"error",
{
"selector":
"ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]",
"message": "Path access on WordPress dependencies is not allowed."
},
{
"selector": "ImportDeclaration[source.value=/^blocks$/]",
"message": "Use @wordpress/blocks as import path instead."
},
{
"selector": "ImportDeclaration[source.value=/^components$/]",
"message": "Use @wordpress/components as import path instead."
},
{
"selector": "ImportDeclaration[source.value=/^date$/]",
"message": "Use @wordpress/date as import path instead."
},
{
"selector": "ImportDeclaration[source.value=/^editor$/]",
"message": "Use @wordpress/editor as import path instead."
},
{
"selector": "ImportDeclaration[source.value=/^element$/]",
"message": "Use @wordpress/element as import path instead."
},
{
"selector": "ImportDeclaration[source.value=/^i18n$/]",
"message": "Use @wordpress/i18n as import path instead."
},
{
"selector": "ImportDeclaration[source.value=/^data$/]",
"message": "Use @wordpress/data as import path instead."
},
{
"selector": "ImportDeclaration[source.value=/^utils$/]",
"message": "Use @wordpress/utils as import path instead."
},
{
"selector":
"CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])",
"message": "Translate function arguments must be string literals."
},
{
"selector":
"CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])",
"message": "Translate function arguments must be string literals."
},
{
"selector":
"CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])",
"message": "Translate function arguments must be string literals."
}
],
"no-shadow": "error",
"no-undef": "error",
"no-undef-init": "error",
"no-unreachable": "error",
"no-unsafe-negation": "error",
"no-unused-expressions": "error",
"no-unused-vars": "error",
"no-useless-computed-key": "error",
"no-useless-constructor": "error",
"no-useless-return": "error",
"no-var": "error",
"no-whitespace-before-property": "error",
"object-curly-spacing": ["error", "always"],
"padded-blocks": ["error", "never"],
"prefer-const": "error",
"quote-props": ["error", "as-needed"],
"react/display-name": "off",
"react/jsx-curly-spacing": [
"error",
{
"when": "always",
"children": true
}
],
"react/jsx-equals-spacing": "error",
"react/jsx-indent": ["error", "tab"],
"react/jsx-indent-props": ["error", "tab"],
"react/jsx-key": "error",
"react/jsx-tag-spacing": "error",
"react/no-children-prop": "off",
"react/no-find-dom-node": "warn",
"react/prop-types": "off",
"semi": "error",
"semi-spacing": "error",
"space-before-blocks": ["error", "always"],
"space-before-function-paren": ["error", "never"],
"space-in-parens": ["error", "always"],
"space-infix-ops": ["error", { "int32Hint": false }],
"space-unary-ops": [
"error",
{
"overrides": {
"!": true
}
}
],
"template-curly-spacing": ["error", "always"],
"valid-jsdoc": ["error", { "requireReturn": false }],
"valid-typeof": "error",
"yoda": "off"
}
}

5
.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
node_modules
## Uncomment line below if you prefer to
## keep compiled files out of version control
# dist/

13
cogicon.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
viewBox="-4.6 230 110.9 111"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="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>

After

Width:  |  Height:  |  Size: 2.1 KiB

186
dist/blocks.build.js vendored Normal file

File diff suppressed because one or more lines are too long

17
dist/blocks.editor.build.css vendored Normal file
View File

@ -0,0 +1,17 @@
/**
* #.# 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; }

11
dist/blocks.style.build.css vendored Normal file
View File

@ -0,0 +1,11 @@
/**
* #.# Common SCSS
*
* Can include things like variables and mixins
* that are used across the project.
*/
/**
* #.# Styles
*
* CSS for both Frontend+Backend.
*/

7243
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

13
package.json Normal file
View File

@ -0,0 +1,13 @@
{
"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"
}
}

164
plugin.php Executable file → Normal file
View File

@ -1,10 +1,9 @@
<?php <?php
/* /*
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 seemlessly with WordPress. Create contact forms, registrations forms, surveys, and more!
Version: 1.1.8 Version: 2.0.0
Author: Cognito Apps Author: Cognito Apps
Author URI: https://www.cognitoforms.com Author URI: https://www.cognitoforms.com
*/ */
@ -26,94 +25,36 @@ Author URI: https://www.cognitoforms.com
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/ */
require_once dirname(__FILE__) . '/api.php'; // Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// The Cognito Plugin! /**
class Cognito_Plugin { * Block Initializer.
*/
require_once plugin_dir_path( __FILE__ ) . 'src/init.php';
/**
* The Plugin
*/
if ( !class_exists('CognitoFormsPlugin') ) {
class CognitoFormsPlugin {
// Initialization actions // Initialization actions
private static $actions = array( private static $actions = array(
'admin_init', 'admin_menu'
'admin_menu',
'wp_ajax_fetch_api_keys',
'wp_ajax_get_forms',
'wp_enqueue_scripts'
); );
// Supported shortcodes // Registers plug-in actions
private static $shortcodes = array( private function addActions($actions) {
'Cognito' => 'renderCognitoShortcode', foreach($actions as $action)
'cognito' => 'renderCognitoShortcode', add_action($action, array($this, $action));
'CognitoForms' => 'renderCognitoFormsShortcode', }
'cognitoforms' => 'renderCognitoFormsShortcode'
);
// Entrypoint // Entrypoint
public function __construct() { public function __construct() {
$this->addActions(self::$actions); $this->addActions(self::$actions);
$this->addShortcodes(self::$shortcodes);
}
// Initialize plug-in
public function admin_init() {
if(!current_user_can('edit_posts') && !current_user_can('edit_pages')) return;
register_setting('cognito_plugin', 'cognito_api_key');
register_setting('cognito_plugin', 'cognito_admin_key');
register_setting('cognito_plugin', 'cognito_public_key');
register_setting('cognito_plugin', 'cognito_organization');
// If the flag to delete options was passed-in, delete them
if (isset($_GET['cog_clear']) && $_GET['cog_clear'] == '1') {
delete_option('cognito_api_key');
delete_option('cognito_admin_key');
delete_option('cognito_public_key');
delete_option('cognito_organization');
}
// Add tinyMCE plug-in
if(get_user_option('rich_editing') == 'true') {
$this->addfilters(array(
'mce_buttons',
'mce_external_plugins'
));
}
}
// Register required scripts
public function wp_enqueue_scripts() {
wp_enqueue_script('jquery');
}
// Ajax callback to allow fetching of API keys based on session token
public function wp_ajax_fetch_api_keys() {
$organization = CognitoAPI::get_organization($_POST['token']);
if (!is_null($organization)) {
delete_option('cognito_api_key');
delete_option('cognito_admin_key');
delete_option('cognito_public_key');
delete_option('cognito_organization');
update_option('cognito_api_key', $organization->apiKey);
update_option('cognito_admin_key', $organization->adminKey);
update_option('cognito_public_key', $organization->publicKey);
update_option('cognito_organization', $organization->code);
}
die;
}
// Ajax callback to allow fetching of forms for a given organization
public function wp_ajax_get_forms() {
$api_key = get_option('cognito_api_key');
if ($api_key) {
$forms = CognitoAPI::get_forms($api_key);
echo $forms;
}
die;
} }
// Initialize administration menu (left-bar) // Initialize administration menu (left-bar)
@ -123,66 +64,13 @@ class Cognito_Plugin {
add_submenu_page('Cognito', 'Create Form', 'New Form', 'manage_options', 'CognitoCreateForm', array($this, 'main_page')); add_submenu_page('Cognito', 'Create Form', 'New Form', 'manage_options', 'CognitoCreateForm', array($this, 'main_page'));
add_submenu_page('Cognito', 'Templates', 'Templates', 'manage_options', 'CognitoTemplates', array($this, 'main_page')); add_submenu_page('Cognito', 'Templates', 'Templates', 'manage_options', 'CognitoTemplates', array($this, 'main_page'));
add_options_page('Cognito Options', 'Cognito Forms', 'manage_options', 'CognitoOptions', array($this, 'options_page')); // add_options_page('Cognito Options', 'Cognito Forms', 'manage_options', 'CognitoOptions', array($this, 'options_page'));
}
// Called when a 'Cognito' shortcode is encountered, renders embed script
public function renderCognitoShortcode($atts, $content = null, $code = '') {
// Default to key setting, unless overridden in shortcode (allows for modules from multiple orgs)
$key = empty($atts['key']) ? get_option('cognito_public_key') : $atts['key'];
if (empty($atts['module']) || empty($atts['key'])) return '';
return CognitoAPI::get_embed_script($key, $atts['module']);
}
// Called when a 'CognitoForms' shortcode is encountered, renders form embed script
public function renderCognitoFormsShortcode($atts, $content = null, $code = '') {
// Default to key setting, unless overridden in shortcode (allows for modules from multiple orgs)
$key = empty($atts['key']) ? get_option('cognito_public_key') : $atts['key'];
if (empty($atts['id']) || empty($key)) return '';
return CognitoAPI::get_form_embed_script($key, $atts['id']);
} }
// Entrypoint for Cognito Forms access // Entrypoint for Cognito Forms access
public function main_page() { public function main_page() {
include 'tmpl/main.php'; include 'templates/main.php';
}
public function options_page() {
include 'tmpl/options.php';
}
// Set up tinyMCE buttons
public function mce_buttons($buttons) {
array_push($buttons, '|', 'cognito');
return $buttons;
}
// Initialize tinyMCE plug-in
public function mce_external_plugins($plugins) {
$plugins['cognito'] = plugin_dir_url( __FILE__ ) . 'tinymce/plugin.js';
return $plugins;
}
// Registers plug-in actions
private function addActions($actions) {
foreach($actions as $action)
add_action($action, array($this, $action));
}
// Registers shortcodes
private function addShortcodes($shortcodes) {
foreach($shortcodes as $tag => $func)
add_shortcode($tag, array($this, $func));
}
// Registers tinyMCE filters
private function addFilters($filters) {
foreach($filters as $filter)
add_filter($filter, array($this, $filter));
} }
} }
new CognitoFormsPlugin;
new Cognito_Plugin; }
?>

View File

@ -0,0 +1,54 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
ToolbarButton,
PanelBody,
ToggleControl,
ToolbarGroup,
} from '@wordpress/components';
import { BlockControls, InspectorControls } from '@wordpress/block-editor';
import { edit } from '@wordpress/icons';
const EmbedControls = ( {
blockSupportsResponsive,
showEditButton,
themeSupportsResponsive,
allowResponsive,
getResponsiveHelp,
toggleResponsive,
switchBackToURLInput,
} ) => (
<>
<BlockControls>
<ToolbarGroup>
{ showEditButton && (
<ToolbarButton
className="components-toolbar__control"
label={ __( 'Edit URL' ) }
icon={ edit }
onClick={ switchBackToURLInput }
/>
) }
</ToolbarGroup>
</BlockControls>
{ themeSupportsResponsive && blockSupportsResponsive && (
<InspectorControls>
<PanelBody
title={ __( 'Media settings' ) }
className="blocks-responsive"
>
<ToggleControl
label={ __( 'Resize for smaller devices' ) }
checked={ allowResponsive }
help={ getResponsiveHelp }
onChange={ toggleResponsive }
/>
</PanelBody>
</InspectorControls>
) }
</>
);
export default EmbedControls;

127
src/block/block.js Normal file
View File

@ -0,0 +1,127 @@
/**
* 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>
);
},
} );

14
src/block/editor.scss Normal file
View File

@ -0,0 +1,14 @@
/**
* #.# Editor Styles
*
* CSS for just Backend enqueued after style.scss
* which makes it higher in priority.
*/
// Remove modal padding
.cognito-modal > .components-modal__content {
padding: initial;
}
.cognito-modal > .components-modal__content > .components-modal__header {
margin: initial;
}

View File

@ -0,0 +1,26 @@
/**
* WordPress dependencies
*/
import { Button, Modal, FocusableIframe } from '@wordpress/components';
import { useState } from '@wordpress/element';
const SelectDialog = () => {
const [ isOpen, setOpen ] = useState( false );
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );
return (
<div>
<Button variant="primary" onClick={ openModal }>
Choose a form
</Button>
{ isOpen && (
<Modal title="Cognito Forms Embed" className="cognito-modal" onRequestClose={ closeModal } shouldCloseOnClickOutside={ false }>
<FocusableIframe style={{ width: "500px", height: "500px" }} src="//example.com"></FocusableIframe>
</Modal>
) }
</div>
);
};
export default SelectDialog

14
src/block/style.scss Normal file
View File

@ -0,0 +1,14 @@
/**
* #.# Styles
*
* CSS for both Frontend+Backend.
*/
// .wp-block-cgb-block-cognito {
// background: $red;
// border: 0.2rem solid $black;
// color: $black;
// margin: 0 auto;
// max-width: 740px;
// padding: 2rem;
// }

12
src/blocks.js Normal file
View File

@ -0,0 +1,12 @@
/**
* 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';

13
src/common.scss Normal file
View File

@ -0,0 +1,13 @@
/**
* #.# 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;

90
src/init.php Normal file
View File

@ -0,0 +1,90 @@
<?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' );