Add initial block support

.editorconfig

@@ -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

.eslintignore

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

.eslintrc.json

@@ -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"
+	}
+}

.gitignore

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

cogicon.svg

@@ -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>

dist/blocks.build.js

@@ -0,0 +1,186 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/*!***********************!*\
+  !*** ./src/blocks.js ***!
+  \***********************/
+/*! no exports provided */
+/*! all exports used */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__block_block_js__ = __webpack_require__(/*! ./block/block.js */ 1);\n/**\n * Gutenberg Blocks\n *\n * All blocks related JavaScript files should be imported here.\n * You can create a new block folder in this dir and include code\n * for that block here as well.\n *\n * All blocks should be included here since this is the file that\n * Webpack is compiling as the input file.\n */\n\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9ibG9ja3MuanM/N2I1YiJdLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEd1dGVuYmVyZyBCbG9ja3NcbiAqXG4gKiBBbGwgYmxvY2tzIHJlbGF0ZWQgSmF2YVNjcmlwdCBmaWxlcyBzaG91bGQgYmUgaW1wb3J0ZWQgaGVyZS5cbiAqIFlvdSBjYW4gY3JlYXRlIGEgbmV3IGJsb2NrIGZvbGRlciBpbiB0aGlzIGRpciBhbmQgaW5jbHVkZSBjb2RlXG4gKiBmb3IgdGhhdCBibG9jayBoZXJlIGFzIHdlbGwuXG4gKlxuICogQWxsIGJsb2NrcyBzaG91bGQgYmUgaW5jbHVkZWQgaGVyZSBzaW5jZSB0aGlzIGlzIHRoZSBmaWxlIHRoYXRcbiAqIFdlYnBhY2sgaXMgY29tcGlsaW5nIGFzIHRoZSBpbnB1dCBmaWxlLlxuICovXG5cbmltcG9ydCAnLi9ibG9jay9ibG9jay5qcyc7XG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9zcmMvYmxvY2tzLmpzXG4vLyBtb2R1bGUgaWQgPSAwXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Iiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///0\n");
+
+/***/ }),
+/* 1 */
+/*!****************************!*\
+  !*** ./src/block/block.js ***!
+  \****************************/
+/*! no exports provided */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__wordpress_i18n__ = __webpack_require__(/*! @wordpress/i18n */ 4);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__wordpress_i18n___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__wordpress_i18n__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__wordpress_blocks__ = __webpack_require__(/*! @wordpress/blocks */ 5);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__wordpress_blocks___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__wordpress_blocks__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__wordpress_editor__ = __webpack_require__(/*! @wordpress/editor */ 6);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__wordpress_editor___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__wordpress_editor__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__wordpress_components__ = __webpack_require__(/*! @wordpress/components */ 7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__wordpress_components___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__wordpress_components__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__wordpress_block_editor__ = __webpack_require__(/*! @wordpress/block-editor */ 10);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__wordpress_block_editor___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4__wordpress_block_editor__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__editor_scss__ = __webpack_require__(/*! ./editor.scss */ 2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__editor_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5__editor_scss__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__style_scss__ = __webpack_require__(/*! ./style.scss */ 3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__style_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6__style_scss__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__select_dialog__ = __webpack_require__(/*! ./select-dialog */ 9);\n/**\n * BLOCK: cognito\n *\n * Allows for the embedding of Cognito Forms into the Gutenburg editor with an interactive dialog to choose a form to embed.\n */\n\n/**\n * WordPress dependencies\n */\n\n\n\n\n\n\n/**\n * Internal dependencies\n */\n\n\n\n\nvar CogIcon = wp.element.createElement(\n\t'svg',\n\t{ version: '1.1', viewBox: '-4.6 230 110.9 111', xmlns: 'http://www.w3.org/2000/svg' },\n\twp.element.createElement('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)' })\n);\n\n/**\n * Register: aa Gutenberg Block.\n *\n * Registers a new block provided a unique name and an object defining its\n * behavior. Once registered, the block is made editor as an option to any\n * editor interface where blocks are implemented.\n *\n * @link https://wordpress.org/gutenberg/handbook/block-api/\n * @param  {string}   name     Block name.\n * @param  {Object}   settings Block settings.\n * @return {?WPBlock}          The block, if it has been successfully\n *                             registered; otherw
Line truncated
+
+/***/ }),
+/* 2 */
+/*!*******************************!*\
+  !*** ./src/block/editor.scss ***!
+  \*******************************/
+/*! dynamic exports provided */
+/***/ (function(module, exports) {
+
+eval("// removed by extract-text-webpack-plugin//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9ibG9jay9lZGl0b3Iuc2Nzcz80OWQyIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIHJlbW92ZWQgYnkgZXh0cmFjdC10ZXh0LXdlYnBhY2stcGx1Z2luXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9zcmMvYmxvY2svZWRpdG9yLnNjc3Ncbi8vIG1vZHVsZSBpZCA9IDJcbi8vIG1vZHVsZSBjaHVua3MgPSAwIl0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///2\n");
+
+/***/ }),
+/* 3 */
+/*!******************************!*\
+  !*** ./src/block/style.scss ***!
+  \******************************/
+/*! dynamic exports provided */
+/***/ (function(module, exports) {
+
+eval("// removed by extract-text-webpack-plugin//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9ibG9jay9zdHlsZS5zY3NzPzgwZjMiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gcmVtb3ZlZCBieSBleHRyYWN0LXRleHQtd2VicGFjay1wbHVnaW5cblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL3NyYy9ibG9jay9zdHlsZS5zY3NzXG4vLyBtb2R1bGUgaWQgPSAzXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///3\n");
+
+/***/ }),
+/* 4 */
+/*!**************************!*\
+  !*** external "wp.i18n" ***!
+  \**************************/
+/*! dynamic exports provided */
+/*! exports used: __ */
+/***/ (function(module, exports) {
+
+module.exports = wp.i18n;
+
+/***/ }),
+/* 5 */
+/*!****************************!*\
+  !*** external "wp.blocks" ***!
+  \****************************/
+/*! dynamic exports provided */
+/*! exports used: registerBlockType */
+/***/ (function(module, exports) {
+
+module.exports = wp.blocks;
+
+/***/ }),
+/* 6 */
+/*!****************************!*\
+  !*** external "wp.editor" ***!
+  \****************************/
+/*! dynamic exports provided */
+/***/ (function(module, exports) {
+
+module.exports = wp.editor;
+
+/***/ }),
+/* 7 */
+/*!********************************!*\
+  !*** external "wp.components" ***!
+  \********************************/
+/*! dynamic exports provided */
+/*! exports used: Button, ExternalLink, FocusableIframe, Modal, Placeholder */
+/***/ (function(module, exports) {
+
+module.exports = wp.components;
+
+/***/ }),
+/* 8 */
+/*!*****************************!*\
+  !*** external "wp.element" ***!
+  \*****************************/
+/*! dynamic exports provided */
+/*! exports used: useState */
+/***/ (function(module, exports) {
+
+module.exports = wp.element;
+
+/***/ }),
+/* 9 */
+/*!************************************!*\
+  !*** ./src/block/select-dialog.js ***!
+  \************************************/
+/*! exports provided: default */
+/*! exports used: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__wordpress_components__ = __webpack_require__(/*! @wordpress/components */ 7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__wordpress_components___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__wordpress_components__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__wordpress_element__ = __webpack_require__(/*! @wordpress/element */ 8);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__wordpress_element___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__wordpress_element__);\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\n/** \n * WordPress dependencies\n */\n\n\n\nvar SelectDialog = function SelectDialog() {\n\tvar _useState = Object(__WEBPACK_IMPORTED_MODULE_1__wordpress_element__[\"useState\"])(false),\n\t    _useState2 = _slicedToArray(_useState, 2),\n\t    isOpen = _useState2[0],\n\t    setOpen = _useState2[1];\n\n\tvar openModal = function openModal() {\n\t\treturn setOpen(true);\n\t};\n\tvar closeModal = function closeModal() {\n\t\treturn setOpen(false);\n\t};\n\n\treturn wp.element.createElement(\n\t\t'div',\n\t\tnull,\n\t\twp.element.createElement(\n\t\t\t__WEBPACK_IMPORTED_MODULE_0__wordpress_components__[\"Button\"],\n\t\t\t{ variant: 'primary', onClick: openModal },\n\t\t\t'Choose a form'\n\t\t),\n\t\tisOpen && wp.element.createElement(\n\t\t\t__WEBPACK_IMPORTED_MODULE_0__wordpress_components__[\"Modal\"],\n\t\t\t{ title: 'Cognito Forms Embed', className: 'cognito-modal', onRequestClose: closeModal, shouldCloseOnClickOutside: false },\n\t\t\twp.element.createElement(__WEBPACK_IMPORTED_MODULE_0__wordpress_components__[\"FocusableIframe\"], { style: { width: \"500px\", height: \"500px\" }, src: '//example.com' })\n\t\t)\n\t);\n};\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (SelectDialog);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiOS5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9ibG9jay9zZWxlY3QtZGlhbG9nLmpzPzRiNGEiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIF9zbGljZWRUb0FycmF5ID0gZnVuY3Rpb24gKCkgeyBmdW5jdGlvbiBzbGljZUl0ZXJhdG9yKGFyciwgaSkgeyB2YXIgX2FyciA9IFtdOyB2YXIgX24gPSB0cnVlOyB2YXIgX2QgPSBmYWxzZTsgdmFyIF9lID0gdW5kZWZpbmVkOyB0cnkgeyBmb3IgKHZhciBfaSA9IGFycltTeW1ib2wuaXRlcmF0b3JdKCksIF9zOyAhKF9uID0gKF9zID0gX2kubmV4dCgpKS5kb25lKTsgX24gPSB0cnVlKSB7IF9hcnIucHVzaChfcy52YWx1ZSk7IGlmIChpICYmIF9hcnIubGVuZ3RoID09PSBpKSBicmVhazsgfSB9IGNhdGNoIChlcnIpIHsgX2QgPSB0cnVlOyBfZSA9IGVycjsgfSBmaW5hbGx5IHsgdHJ5IHsgaWYgKCFfbiAmJiBfaVtcInJldHVyblwiXSkgX2lbXCJyZXR1cm5cIl0oKTsgfSBmaW5hbGx5IHsgaWYgKF9kKSB0aHJvdyBfZTsgfSB9IHJldHVybiBfYXJyOyB9IHJldHVybiBmdW5jdGlvbiAoYXJyLCBpKSB7IGlmIChBcnJheS5pc0FycmF5KGFycikpIHsgcmV0dXJuIGFycjsgfSBlbHNlIGlmIChTeW1ib2wuaXRlcmF0b3IgaW4gT2JqZWN0KGFycikpIHsgcmV0dXJuIHNsaWNlSXRlcmF0b3IoYXJyLCBpKTsgfSBlbHNlIHsgdGhyb3cgbmV3IFR5cGVFcnJvcihcIkludmFsaWQgYXR0ZW1wdCB0byBkZXN0cnVjdHVyZSBub24taXRlcmFibGUgaW5zdGFuY2VcIik7IH0gfTsgfSgpO1xuXG4vKiogXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEJ1dHRvbiwgTW9kYWwsIEZvY3VzYWJsZUlmcmFtZSB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbnZhciBTZWxlY3REaWFsb2cgPSBmdW5jdGlvbiBTZWxlY3REaWFsb2coKSB7XG5cdHZhciBfdXNlU3RhdGUgPSB1c2VTdGF0ZShmYWxzZSksXG5cdCAgICBfdXNlU3RhdGUyID0gX3NsaWNlZFRvQXJyYXkoX3VzZVN0YXRlLCAyKSxcblx0ICAgIGlzT3BlbiA9IF91c2VTdGF0ZTJbMF0sXG5cdCAgICBzZXRPcGVuID0gX3VzZVN0YXRlMlsxXTtcblxuXHR2YXIgb3Blbk1vZGFsID0gZnVuY3Rpb24gb3Blbk1vZGFsKCkge1xuXHRcdHJldHVybiBzZXRPcGVuKHRydWUpO1xuXHR9O1xuXHR2YXIgY2xvc2VNb2RhbCA9IGZ1bmN0aW9uIGNsb3NlTW9kYWwoKSB7XG5cdFx0cmV0dXJuIHNldE9wZW4oZmFsc2UpO1xuXHR9O1xuXG5cdHJldHVybiB3cC5lbGVtZW50LmNyZWF0ZUVsZW1lbnQoXG5cdFx0J2RpdicsXG5cdFx0bnVsbCxcblx0XHR3cC5lbGVtZW50LmNyZWF0ZUVsZW1lbnQoXG5cdFx0XHRCdXR0b24sXG5cdFx0XHR7IHZhcmlhbnQ6ICdwcmltYXJ5Jywgb25DbGljazogb3Blbk1vZGFsIH0sXG5cdFx0XHQnQ2hvb3NlIGEgZm9ybSdcblx0XHQpLFxuXHRcdGlzT3BlbiAmJiB3cC5lbGVtZW50LmNyZWF0ZUVsZW1lbnQoXG5cdFx0XHRNb2RhbCxcblx0XHRcdHsgdGl0bGU6ICdDb2duaXRvIEZvcm1zIEVtYmVkJywgY2xhc3NOYW1lOiAnY29nbml0by1tb2RhbCcsIG9uUmVxdWVzdENsb3NlOiBjbG9zZU1vZGFsLCBzaG91bGRDbG9zZU9uQ2xpY2tPdXRzaWRlOiBmYWxzZSB9LFxuXHRcdFx0d3AuZWxlbWVudC5jcmVhdGVFbGVtZW50KEZvY3VzYWJsZUlmcmFtZSwgeyBzdHlsZTogeyB3aWR0aDogXCI1MDBweFwiLCBoZWlnaHQ6IFwiNTAwcHhcIiB9LCBzcmM6ICcvL2V4YW1wbGUuY29tJyB9KVxuXHRcdClcblx0KTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFNl
Line truncated
+
+/***/ }),
+/* 10 */
+/*!*********************************!*\
+  !*** external "wp.blockEditor" ***!
+  \*********************************/
+/*! dynamic exports provided */
+/***/ (function(module, exports) {
+
+module.exports = wp.blockEditor;
+
+/***/ })
+/******/ ]);

dist/blocks.editor.build.css

@@ -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; }

dist/blocks.style.build.css

@@ -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.
+ */

package.json

@@ -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"
+  }
+}

plugin.php

@@ -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';
-	}
-	
-	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));
+			include 'templates/main.php';
 		}
 	}
-
-new Cognito_Plugin;
-?>
+	new CognitoFormsPlugin;
+}

src/block/block-controls.js

@@ -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;

src/block/block.js

@@ -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>
+		);
+	},
+} );

src/block/editor.scss

@@ -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;
+}

src/block/select-dialog.js

@@ -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

src/block/style.scss

@@ -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;
+// }

src/blocks.js

@@ -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';

src/common.scss

@@ -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;

src/init.php

@@ -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' );