cognito-forms/cognitoforms-wordpress
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add initial block support

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

54
src/block/block-controls.js Normal file
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;
}

26
src/block/select-dialog.js Normal file
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' );