Commit cba9fb03 authored by Eric Windham's avatar Eric Windham

new gutenberg block with visual form in editor

parent 62412f0b
.nf-iframe-container {
position: relative;
}
.nf-iframe-overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
// block.js
( function( blocks, element ) {
// These are gutenberg items(React components, etc.)
var el = element.createElement,
source = blocks.source;
// Register our Gutenberg block
blocks.registerBlockType( 'ninja-forms/forms', {
/**
* Ninja Forms Form Block
*
* A block for embedding a Ninja Forms form into a post/page.
*/
( function( blocks, i18n, element, components ) {
var el = element.createElement, // function to create elements
// TextControl = blocks.InspectorControls.TextControl, // not needed
SelectControl = blocks.InspectorControls.SelectControl, // select control
InspectorControls = blocks.InspectorControls, // sidebar controls
Sandbox = components.Sandbox; // needed to register the block
// register our block
blocks.registerBlockType( 'ninja-forms/form', {
title: 'Ninja Forms',
icon: 'feedback',
category: 'common',
attributes: {
nf_form_id: {
type: 'string',
source: source.children( 'div' ), // This is why we wrap the
// short code in the div in the save method. So that we can
// grab the short code
default: ''
},
formID: {
type: 'integer',
default: 0
},
},
// This function sets up the block HTML(what you see in the editor)
edit: function( props ) {
var children,
options;
function setFormId( event ) {
// Get the ID value from the select element
var selected = event.target.querySelector( 'option:checked' );
var tmpId = selected.value;
var shortCodeStr = '';
// set the nf_form_id prop value with the new ID selected
if ( 0 !== tmpId.length ) {
shortCodeStr = "[ninja_form id=" + tmpId + "]";
}
props.setAttributes( { nf_form_id: shortCodeStr } );
event.preventDefault();
}
function getElementValue( props ) {
// Get our current nf_form_id prop value
var tmpVal = props.attributes.nf_form_id;
// Get the actual id value from the short code string
// This value will be a Ninja Form short code and we need
// the form ID
if( 0 < tmpVal.length ) {
tmpVal = tmpVal.split( '=' )[1];
tmpVal = tmpVal.substring( 0, tmpVal.length - 1 );
}
return tmpVal;
}
// children will be an array of HTML elements that will be
// rendered in the block
children = [];
var containerDiv = el( 'div', {style : {width: '100%'}}, el( 'img',
{ src: ninja_forms.block_logo}) );
children.push(containerDiv);
var focus = props.focus;
options = [];
// create the options for the form dropdown
options.push( el( 'option', { value: '' }, '- Select -' ) );
var formID = props.attributes.formID;
// iterate over the form data passed from PHP
_.each( ninja_forms.nf_forms, function( nf_form ) {
options.push( el( 'option' , { value: nf_form.id }, nf_form.title + " (ID: " + nf_form.id + ")" ) );
if( ! formID ) formID = 1; // Default.
});
// create a select element, get the value that was last saved,
// and append the options
children.push( el( 'select', {
style: { width: '100%' },
name: 'nf_form_id',
id: 'nf_form_id',
value: getElementValue( props ),
onChange: setFormId
},
options
)
);
// Create the form and append the label and select elements
var form = el( 'form', { onSubmit: setFormId }, children );
function onFormChange( newFormID ) {
// updates the form id on the props
props.setAttributes( { formID: newFormID } );
}
// This is what renders the elements to the blocks, so we wrap
// the form in a div here
return el( 'div', { class: 'wp-block-shortcode' }, form );
// Set up the form dropdown in the side bar 'block' settings
var inspectorControls = el( InspectorControls, {},
el( SelectControl, { label: 'Form ID', value: formID, options: ninjaFormsBlock.forms, onChange: onFormChange } )
);
/**
* Create the div container, add an overlay so the user can interact
* with the form in Gutenberg, then render the iframe with form
*/
return [
el( 'div', { className: 'nf-iframe-container' },
el( 'div', { className: 'nf-iframe-overlay' } ),
el( 'iframe', { src: '/?nf_preview_form=' + formID + '&nf_iframe', height: '0', width: '500' })
),
!! focus && inspectorControls
];
},
save: function( props ) {
// This is what will be rendered by our block on the front-end
return "<div>" + props.attributes.nf_form_id + "</div>";
var formID = props.attributes.formID;
if( ! formID ) return '';
/**
* we're essentially just adding a short code, here is where
* it's save in the editor
*/
return '[ninja_forms id="' + formID + '"]';
}
} );
} )(
window.wp.blocks,
window.wp.element
);
\ No newline at end of file
window.wp.i18n,
window.wp.element,
window.wp.components
);
......@@ -8,6 +8,10 @@ class NF_FormBlock {
*/
public function __construct() {
add_action( 'ninja_forms_loaded', array($this, 'nf_form_block_load' ) );
// load the preview information and form
add_action( 'wp_head', array( $this, 'load_preview_data' ) );
// load the iframe containing the iframe
add_action( 'init', array( $this, 'load_preview_iframe' ) );
}
function nf_form_block_load() {
......@@ -17,34 +21,126 @@ class NF_FormBlock {
function nf_form_block() {
$js_dir = Ninja_Forms::$url . 'assets/js/min/';
$css_dir = Ninja_Forms::$url . 'assets/css/';
// Once we have Gutenberg block javascript, we can enqueue our assets
wp_enqueue_script(
'nf-block',
wp_register_script(
'ninja-forms-block',
$js_dir . 'block.js',
array( 'wp-blocks', 'wp-element' )
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'underscore' )
);
// we need to get our forms so that the block can build a dropdown
// with the forms
$forms = Ninja_Forms()->form()->get_forms();
wp_register_style(
'ninja-forms-block-style',
$css_dir . 'nf-form-block-style.css',
array( 'wp-edit-blocks' )
);
wp_register_style(
'ninja-forms-block-editor',
$css_dir . 'nf-form-block-editor.css',
array( 'wp-edit-blocks', 'form-blocks-style' )
);
$nf_forms = array();
/**
* we need to get our forms so that the block can build a dropdown
* with the forms
* */
wp_enqueue_script( 'ninja-forms-block' );
// We only need form title and ID
foreach ( $forms as $nf_form ) {
$tmpArray = array( 'id' => $nf_form->get_id(), 'title' =>
$nf_form->get_setting( 'title' ) );
$nf_forms[] = $tmpArray;
$forms = [];
foreach( Ninja_Forms()->form()->get_forms() as $form ){
$forms[] = [
'value' => $form->get_id(),
'label' => $form->get_setting( 'title' ),
];
}
$block_logo = NF_PLUGIN_URL . 'assets/img/nf-logo-dashboard.png';
$thumbnail_logo = NF_PLUGIN_URL . 'assets/img/ninja-forms-app-header-logo.png';
// Pass form id and title data to the javascript
wp_localize_script( 'nf-block', 'ninja_forms', array(
'nf_forms' => $nf_forms,
'block_logo' => $block_logo,
'thumbnail_logo' => $thumbnail_logo
wp_localize_script( 'ninja-forms-block', 'ninjaFormsBlock', array(
'forms' => $forms,
) );
wp_enqueue_style( 'ninja-forms-block-style' );
wp_enqueue_style( 'ninja-forms-block-editor' );
}
public function load_preview_data() {
// check for preview and iframe get parameters
if( isset( $_GET[ 'nf_preview_form' ] ) && isset( $_GET[ 'nf_iframe' ] ) ){
$form_id = intval( $_GET[ 'nf_preview_form' ] );
// Style below: update width and height for particular form
?>
<style media="screen">
#wpadminbar {
display: none;
}
#nf-form-<?php echo $form_id; ?>-cont {
z-index: 9001;
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: white;
/* overflow-x: hidden; */
}
</style>
<script type="text/javascript">
jQuery(document).on( 'nfFormReady', function(){
var frameEl = window.frameElement;
// get the form element
var $form = jQuery("#nf-form-<?php echo $form_id; ?>-cont");
// get the height of the form
var height = $form.find( '.ninja-forms-form-wrap' ).outerHeight(true);
if (frameEl) {
// add 75 to height b/c the submit button was missing
frameEl.height = height + 75;
}
});
</script>
<?php
}
}
public function load_preview_iframe() {
if( ! isset( $_GET[ 'form_preview_iframe' ] ) ) return;
// Style below: set styling for iframe
?>
<style media="screen">
.iframe-container {
position: relative;
}
.iframe-overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
</style>
<div class="iframe-container">
<div class="iframe-overlay"></div>
<iframe
id="idIframe"
src="/?nf_preview_form=1&nf_iframe"
frameborder="0"
width="100%"
onload="iframeLoaded()"
></iframe>
</div>
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
var target = iFrameID.contentWindow.document.getElementById('nf-form-1-cont');
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
// set initial iFrame height
iFrameID.height = target.scrollHeight;
}
}
</script>
<?php
exit();
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment