Add initial block support
This commit is contained in:
parent
1426db528b
commit
7abb135072
|
|
@ -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
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
**/*.min.js
|
||||
**/*.build.js
|
||||
**/node_modules/**
|
||||
**/vendor/**
|
||||
build
|
||||
coverage
|
||||
cypress
|
||||
node_modules
|
||||
vendor
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
node_modules
|
||||
|
||||
## Uncomment line below if you prefer to
|
||||
## keep compiled files out of version control
|
||||
# dist/
|
||||
|
|
@ -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 |
File diff suppressed because one or more lines are too long
|
|
@ -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; }
|
||||
|
|
@ -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.
|
||||
*/
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
<?php
|
||||
|
||||
/*
|
||||
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!
|
||||
Version: 1.1.8
|
||||
Version: 2.0.0
|
||||
Author: Cognito Apps
|
||||
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
|
||||
*/
|
||||
|
||||
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
|
||||
private static $actions = array(
|
||||
'admin_init',
|
||||
'admin_menu',
|
||||
'wp_ajax_fetch_api_keys',
|
||||
'wp_ajax_get_forms',
|
||||
'wp_enqueue_scripts'
|
||||
'admin_menu'
|
||||
);
|
||||
|
||||
// Supported shortcodes
|
||||
private static $shortcodes = array(
|
||||
'Cognito' => 'renderCognitoShortcode',
|
||||
'cognito' => 'renderCognitoShortcode',
|
||||
'CognitoForms' => 'renderCognitoFormsShortcode',
|
||||
'cognitoforms' => 'renderCognitoFormsShortcode'
|
||||
);
|
||||
// Registers plug-in actions
|
||||
private function addActions($actions) {
|
||||
foreach($actions as $action)
|
||||
add_action($action, array($this, $action));
|
||||
}
|
||||
|
||||
// Entrypoint
|
||||
public function __construct() {
|
||||
$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)
|
||||
|
|
@ -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', 'Templates', 'Templates', 'manage_options', 'CognitoTemplates', array($this, 'main_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']);
|
||||
// add_options_page('Cognito Options', 'Cognito Forms', 'manage_options', 'CognitoOptions', array($this, 'options_page'));
|
||||
}
|
||||
|
||||
// Entrypoint for Cognito Forms access
|
||||
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;
|
||||
?>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
} );
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
// }
|
||||
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
|
|
@ -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' );
|
||||
Loading…
Reference in New Issue