From b078e730c7b7e1f5d6470075b1b32efb3a52befb Mon Sep 17 00:00:00 2001
From: Louis Laugesen <louis.laugesen@gmail.com>
Date: Fri, 23 Mar 2018 15:08:18 +1100
Subject: [PATCH] Contact Form: Add a Gutenberg based form builder

Context: https://github.com/Automattic/jetpack/pull/9452

@oskosk Requested this unfinished branch to be pushed up to
Automattic/jetpack for use in the Jetpck Beta Tester Plugin.

--

Adds a set of Gutenberg "Form" blocks for use with the contact form
module.

Blocks:

* Form - The main block, consists of an InnerBlock for the <form>
element and a set template consisting of a default set of inner blocks
preconfigured as a contact form

* Text - General <input type=text>/<textarea> field with configurable
  label, rows

* Button - A <button type=submit> with configurable button text

Blocking Release:

* Fix issues identified in original PR Automattic/jetpack#9452

* InnerBlock templating requires WordPress/gutenberg#5452.

* WordPress/gutenberg#5452 needs to override isPrivate settings to
  prevent form blocks being seen in the inserter when out of form
  context.

* WordPress/gutenberg#5452 is whitelist only meaning we cant add
  extra blocks in between form elements - not really a huge issue
  for this but likely an issue for other use cases.

Todo - Integration with grunion-contact-form:

* Captcha support should be relatively easy to achieve with a serverside
  rendered block

* A server side filter / hook could replace the form action

Todo - Handle duplicate field names gracefully

* Currently uses a variation on the label / field name to set
  id / for settings on label / inputs.

* Currently uses same variation for <input name=""> attributes
---
 modules/contact-form.php                      |   7 +-
 modules/contact-form/blocks/README.md         |  33 ++++++
 modules/contact-form/blocks/button/block.jsx  |  62 ++++++++++
 modules/contact-form/blocks/button/editor.css |   1 +
 modules/contact-form/blocks/form/block.jsx    |  95 +++++++++++++++
 modules/contact-form/blocks/form/editor.css   |   1 +
 modules/contact-form/blocks/text/block.jsx    |  95 +++++++++++++++
 modules/contact-form/blocks/text/editor.css   |   1 +
 .../contact-form/blocks/textarea/block.jsx    | 110 ++++++++++++++++++
 .../contact-form/blocks/textarea/editor.css   |   1 +
 modules/contact-form/gutenberg-blocks.php     |  44 -------
 .../jetpack-contact-form-gutenberg.php        |  63 ++++++++++
 modules/contact-form/js/gutenblocks.js        |  73 ------------
 13 files changed, 466 insertions(+), 120 deletions(-)
 create mode 100644 modules/contact-form/blocks/README.md
 create mode 100644 modules/contact-form/blocks/button/block.jsx
 create mode 100644 modules/contact-form/blocks/button/editor.css
 create mode 100644 modules/contact-form/blocks/form/block.jsx
 create mode 100644 modules/contact-form/blocks/form/editor.css
 create mode 100644 modules/contact-form/blocks/text/block.jsx
 create mode 100644 modules/contact-form/blocks/text/editor.css
 create mode 100644 modules/contact-form/blocks/textarea/block.jsx
 create mode 100644 modules/contact-form/blocks/textarea/editor.css
 delete mode 100644 modules/contact-form/gutenberg-blocks.php
 create mode 100644 modules/contact-form/jetpack-contact-form-gutenberg.php
 delete mode 100644 modules/contact-form/js/gutenblocks.js

diff --git a/modules/contact-form.php b/modules/contact-form.php
index 5801d64773872..dc12f53f24257 100644
--- a/modules/contact-form.php
+++ b/modules/contact-form.php
@@ -13,7 +13,8 @@
  * Additional Search Queries: contact, form, grunion, feedback, submission
  */
 
-include dirname( __FILE__ ) . '/contact-form/grunion-contact-form.php';
+require_once dirname( __FILE__ ) . '/contact-form/grunion-contact-form.php';
+
 /*
  * Filters if the new Contact Form Editor View should be used.
  *
@@ -22,11 +23,11 @@
  * Expected to be removed in Jetpack 5.8 or if a security issue merits removing the old code sooner.
  *
  * @since 5.2.0
- * 
+ *
  * @param boolean $view Use new Editor View. Default true.
  */
 if ( is_admin() && apply_filters( 'tmp_grunion_allow_editor_view', true ) ) {
 	require_once dirname( __FILE__ ) . '/contact-form/grunion-editor-view.php';
 }
 
-include dirname( __FILE__ ) . '/contact-form/gutenberg-blocks.php';
\ No newline at end of file
+require_once dirname( __FILE__ ) . '/contact-form/jetpack-contact-form-gutenberg.php';
diff --git a/modules/contact-form/blocks/README.md b/modules/contact-form/blocks/README.md
new file mode 100644
index 0000000000000..ef06991c92371
--- /dev/null
+++ b/modules/contact-form/blocks/README.md
@@ -0,0 +1,33 @@
+# Contact Form - Gutenberg Blocks
+
+Contact form Gutenberg Blocks are implemented in JSX and currently depends on using Gutenberg's [5452](https://github.com/WordPress/gutenberg/pull/5452).
+
+Current form is more of a v0.1 library we can expand on to incorporate the original contact form logic.
+
+Development:
+
+* Run `gulp build` initially to create the blocks .js files after that you can run `gulp gutenpack` and `gulp gutenpack:watch` to continue development.
+* Set `define('SCRIPT_DEBUG', true)` and `Jetpack_Constants::set_constant('SCRIPT_DEBUG', true)` somewhere to use your local blocks built with gutenpack.
+
+Blocks Available:
+
+* Form - The main block, consists of an InnerBlock for the `<form>` element and a set template consisting of a default set of inner blocks preconfigured as a contact form
+
+* Text - General `<input type=text>`/`<textarea>` field with configurable label, rows
+
+* Button - A `<button type=submit>` with configurable button text
+
+Current state:
+
+* InnerBlock templating requires [5452](https://github.com/WordPress/gutenberg/pull/5452)
+* Needs a solution to filtering blocks in the inserter so we can prevent showing form blocks in non form context. Talks of this in [5452](https://github.com/WordPress/gutenberg/pull/5452).
+* allowedBlocks solution in [5452](https://github.com/WordPress/gutenberg/pull/5452) is whitelist only meaning we cant add extra blocks in between form elements - not really a huge issue for this but likely an issue for other use cases
+
+Todo
+
+* Integration with grunion-contact-form:
+  * Captcha support should be relatively easy to achieve with a serverside rendered block
+  * A server side filter / hook could replace the form action
+* Handle duplicate field names gracefully:
+  * Currently uses a variation on the label / field name to set id / for settings on label / inputs.
+  * Currently uses same variation for `<input name="">` attributes
\ No newline at end of file
diff --git a/modules/contact-form/blocks/button/block.jsx b/modules/contact-form/blocks/button/block.jsx
new file mode 100644
index 0000000000000..63d86e2908b58
--- /dev/null
+++ b/modules/contact-form/blocks/button/block.jsx
@@ -0,0 +1,62 @@
+const {
+	registerBlockType,
+	InspectorControls,
+	InnerBlocks,
+} = wp.blocks;
+
+const { createElement } = wp.element;
+const { ToggleControl, TextControl, ButtonGroup, Button, RadioControl } = wp.components;
+
+const { __ } = wp.i18n;
+
+const inputName = (str) => str.toLowerCase().replace(/[^a-z0-9]/, '');
+
+// Define the form block
+let FormButton = {
+	title : __( 'Form - Submit' ),
+	icon : 'button',
+	category : 'common',
+	description: __( 'A submit button' ),
+	keywords: [
+		__( 'send' ),
+		__( 'submit' ),
+		__( 'contact' ),
+	],
+	useOnce: true,
+	// isPrivate: true,
+	attributes: {
+		label: {
+			type: 'string',
+			default: 'Submit',
+		}
+	},
+
+	save: ( { attributes, className } ) => {
+		return <div className={ className }>
+			<Button isPrimary={ true } type={ "submit" }>
+				{ attributes.label }
+			</Button>
+		</div>
+	},
+	edit: ( { attributes, setAttributes, className, isSelected } ) => {
+		if ( ! isSelected ) {
+			return <div className={ className }>
+				<Button isPrimary={ true } type={ "submit" }>
+					{ attributes.label }
+				</Button>
+			</div>
+		}
+
+		return [
+			<TextControl
+				label={ __( 'Button Text' ) }
+				placeholder={ __( 'Submit' ) }
+				value={ attributes.label }
+				onChange={ value => setAttributes( { 'label': value } ) }
+			/>
+		];
+	},
+};
+
+// Register the form block under jetpack/form
+registerBlockType( 'jetpack/form-button', FormButton );
diff --git a/modules/contact-form/blocks/button/editor.css b/modules/contact-form/blocks/button/editor.css
new file mode 100644
index 0000000000000..2c44161ac2681
--- /dev/null
+++ b/modules/contact-form/blocks/button/editor.css
@@ -0,0 +1 @@
+.wp-block-jetpack-form-button {}
diff --git a/modules/contact-form/blocks/form/block.jsx b/modules/contact-form/blocks/form/block.jsx
new file mode 100644
index 0000000000000..8a138275920bd
--- /dev/null
+++ b/modules/contact-form/blocks/form/block.jsx
@@ -0,0 +1,95 @@
+const {
+	registerBlockType,
+	InspectorControls,
+	InnerBlocks,
+} = wp.blocks;
+
+const { createElement } = wp.element;
+const { CheckboxControl, TextControl } = wp.components;
+
+const { __ } = wp.i18n;
+
+// Define the form block
+let Form = {
+	title: __( 'Form' ),
+	icon: 'feedback',
+	category: 'common',
+	description: __( 'Contact Form Settings' ),
+	keywords: [
+		__( 'form' ),
+		__( 'contact' ),
+	],
+	useOnce: true,
+	attributes: {
+		subject: {
+			type: 'string',
+			default: 'Feedback',
+		},
+
+		to: {
+			type: 'string',
+			default: ''
+		}
+	},
+
+	save: ( { attributes, className } ) => {
+		return <div className={ className }>
+			<form>
+				<InnerBlocks.Content />
+			</form>
+		</div>
+	},
+
+	edit: ( { attributes, setAttributes, className, isSelected } ) => {
+		return [
+			// Display the inner blocks
+			<InnerBlocks
+				template={[
+					[ 'jetpack/form-text', {
+						'label': __( 'Name' ),
+						'placeholder': __( 'Full Name' ),
+						'required': true,
+					} ],
+					[ 'jetpack/form-text', {
+						'label': __( 'Email' ),
+						'placeholder': __( 'example@example.com' ),
+						'required': true,
+					} ],
+					[ 'jetpack/form-textarea', {
+						'label': __( 'Message' ),
+						'placeholder': __( 'Enter message' ),
+						'required': true,
+					} ],
+					[ 'jetpack/form-button', { 'label': __( 'Send' ) } ]
+				]}
+				allowedBlocks={ [
+					'jetpack/form-text',
+					'jetpack/form-textarea',
+					'jetpack/form-button'
+				] }
+			/>,
+
+			// Display on Focus
+			!! isSelected &&
+				<InspectorControls key="inspector">
+					<TextControl
+						label={ __( 'Email Subject' ) }
+						help={ __( 'What would you like the subject line of the email to be?' ) }
+						placeholder={ __( '[Site Feedback]' ) }
+						value={ attributes.subject }
+						onChange={ value => setAttributes( { 'subject': value } ) }
+					/>
+					<TextControl
+						label={ __( 'Email Address' ) }
+						help={ __( 'Which email address should we send the submissions to?' ) }
+						value={ attributes.to }
+						placeholder={ __( 'admin@example.com' ) }
+						onChange={ value => setAttributes( { 'to': value } ) }
+					/>
+				</InspectorControls>
+		];
+	},
+};
+
+// Register the form block under jetpack/form
+registerBlockType( 'jetpack/form', Form );
diff --git a/modules/contact-form/blocks/form/editor.css b/modules/contact-form/blocks/form/editor.css
new file mode 100644
index 0000000000000..708181836225e
--- /dev/null
+++ b/modules/contact-form/blocks/form/editor.css
@@ -0,0 +1 @@
+.wp-block-jetpack-form {}
\ No newline at end of file
diff --git a/modules/contact-form/blocks/text/block.jsx b/modules/contact-form/blocks/text/block.jsx
new file mode 100644
index 0000000000000..2814e01b8072f
--- /dev/null
+++ b/modules/contact-form/blocks/text/block.jsx
@@ -0,0 +1,95 @@
+const {
+	registerBlockType,
+	InspectorControls,
+	InnerBlocks,
+} = wp.blocks;
+
+const { createElement } = wp.element;
+const { ToggleControl, TextControl, BaseControl } = wp.components;
+
+const { __ } = wp.i18n;
+
+const inputName = ( str ) => str.toLowerCase().replace(/[^a-z0-9]/, '');
+
+// Define the form block
+let FormText = {
+	title : __( 'Form - Text' ),
+	icon : 'editor-textcolor',
+	category : 'common',
+	description: __( 'Text field' ),
+	keywords: [
+		__( 'text' ),
+		__( 'name' ),
+		__( 'email' ),
+	],
+	// isPrivate: true,
+	attributes: {
+		// Set label to display above the input
+		label: {
+			type: 'string',
+			default: 'Custom Text',
+ 		},
+
+		// Inspector: set placeholder value for the input
+		placeholder: {
+			type: 'string',
+			default: '',
+		},
+
+		// Inspector: determine if input is required or optional
+		isRequired : {
+			type : 'boolean',
+			default : true,
+		},
+	},
+
+	save: ( { attributes, className } ) => {
+		// todo: replace with uuid4 + saved as attribute?
+		// The id needs to be unique for for="" but also needs to be saved for block validation
+		const id = 'jetpack-form-text-input-' + inputName( attributes.label );
+
+		return <BaseControl label={ attributes.label } id={ id }>
+			<input className={ `${className} components-text-control__input` }
+				type="text"
+				id={ id }
+				name={ inputName( attributes.label ) }
+				placeholder={ attributes.placeholder }
+
+			/>
+		</BaseControl>
+	},
+
+	edit: ( { attributes, setAttributes, className, isSelected } ) => {
+		if ( ! isSelected ) {
+			return FormText.save( { attributes: attributes, className: className } )
+		}
+
+		return [
+			<TextControl
+				label={ attributes.label }
+				value={ attributes.label }
+				placeholder={ __( 'e.g. Name' ) }
+				onChange= { value => setAttributes ( { 'label': value  } ) }
+				required={ true }
+			/>,
+			<InspectorControls key="inspector">
+				<TextControl
+					label={ __( 'Placeholder Text' ) }
+					help={ __( 'Text shown when field is empty.' ) }
+					placeholder={ __( 'Placeholder' ) }
+					value={ attributes.placeholder }
+					onChange={ value => setAttributes( { 'placeholder': value } ) }
+				/>
+				<ToggleControl
+					label={ __( 'Is required?' ) }
+					help={ ( checked ) => checked ? __( 'Field must be filled out.' ) : __( 'Field is optional.' ) }
+					checked={ !! attributes.isRequired }
+					onChange={ value => setAttributes( { 'isRequired': value } ) }
+				/>
+			</InspectorControls>
+		];
+	},
+};
+
+// Register the form block under jetpack/form
+registerBlockType( 'jetpack/form-text', FormText );
diff --git a/modules/contact-form/blocks/text/editor.css b/modules/contact-form/blocks/text/editor.css
new file mode 100644
index 0000000000000..ba79e02b276d5
--- /dev/null
+++ b/modules/contact-form/blocks/text/editor.css
@@ -0,0 +1 @@
+.wp-block-jetpack-form-text {}
diff --git a/modules/contact-form/blocks/textarea/block.jsx b/modules/contact-form/blocks/textarea/block.jsx
new file mode 100644
index 0000000000000..beb5b30d0f47c
--- /dev/null
+++ b/modules/contact-form/blocks/textarea/block.jsx
@@ -0,0 +1,110 @@
+const {
+	registerBlockType,
+	InspectorControls,
+	InnerBlocks,
+} = wp.blocks;
+
+const { createElement } = wp.element;
+const { ToggleControl, TextControl, TextareaControl, BaseControl } = wp.components;
+
+const { __ } = wp.i18n;
+
+const inputName = ( str ) => str.toLowerCase().replace(/[^a-z0-9]/, '');
+
+// Define the form block
+let FormTextarea = {
+	title : __( 'Form - Textarea' ),
+	icon : 'text',
+	category : 'common',
+	description: __( 'Multiline text field' ),
+	keywords: [
+		__( 'text' ),
+		__( 'textarea' ),
+		__( 'message' ),
+	],
+	// isPrivate: true,
+	attributes: {
+		// Set label to display above the input
+		label: {
+			type: 'string',
+			default: 'Text',
+		},
+
+		// Inspector: set placeholder value for the input
+		placeholder: {
+			type: 'string',
+			default: '',
+		},
+
+		// Inspector: determine if input is required or optional
+		isRequired: {
+			type: 'boolean',
+			default: false,
+		},
+
+		// Inspector: number of rows to display
+		rows: {
+			type: 'number',
+			default: 4
+		},
+	},
+
+	save: ( { attributes, className } ) => {
+		// todo: replace with uuid4 + saved as attribute?
+		// The id needs to be unique for for="" but also needs to be saved for block validation
+		const id = 'jetpack-form-textarea-input-' + inputName( attributes.label );
+
+		return <BaseControl label={ attributes.label } id={ id }>
+			<textarea className={ `${className} components-textarea-control__input` }
+				type="text"
+				id={ id }
+				rows={ attributes.rows }
+				name={ inputName( attributes.label ) }
+				placeholder={ attributes.placeholder }
+				required={ attributes.isRequired }
+			/>
+		</BaseControl>
+	},
+
+	edit: ( { attributes, setAttributes, className, isSelected  } ) => {
+		if ( ! isSelected ) {
+			return FormTextarea.save( { attributes: attributes, className: className } )
+		}
+
+		return [
+			<TextareaControl
+				label={ attributes.label }
+				value={ attributes.label }
+				placeholder={ __( 'e.g. Message' ) }
+				onChange= { value => setAttributes ( { 'label': value } ) }
+				required={ true }
+				rows={ attributes.rows }
+			/>,
+			<InspectorControls key="inspector">
+				<TextControl
+					label={ __( 'Placeholder Text' ) }
+					help={ __( 'Text shown when field is empty.' ) }
+					placeholder={ __( 'Placeholder' ) }
+					value={ attributes.placeholder }
+					onChange={ value => setAttributes( { 'placeholder': value } ) }
+				/>
+				<ToggleControl
+					label={ __( 'Is required?' ) }
+					help={ ( checked ) => checked ? __( 'Field must be filled out.' ) : __( 'Field is optional.' ) }
+					checked={ !! attributes.isRequired }
+					onChange={ value => setAttributes( { 'isRequired': value } ) }
+				/>
+				<TextControl
+					label={ __( 'Rows' ) }
+					help={ __( 'How many lines would you like the text box to be?' ) }
+					placeholder={ __( '4' ) }
+					value={ attributes.rows }
+					onChange={ value => setAttributes( { 'rows': value } ) }
+				/>
+			</InspectorControls>
+		];
+	},
+};
+
+// Register the form block under jetpack/form
+registerBlockType( 'jetpack/form-textarea', FormTextarea );
diff --git a/modules/contact-form/blocks/textarea/editor.css b/modules/contact-form/blocks/textarea/editor.css
new file mode 100644
index 0000000000000..f9e8245a1016e
--- /dev/null
+++ b/modules/contact-form/blocks/textarea/editor.css
@@ -0,0 +1 @@
+.wp-block-jetpack-form-textarea {}
diff --git a/modules/contact-form/gutenberg-blocks.php b/modules/contact-form/gutenberg-blocks.php
deleted file mode 100644
index 7f928f2c5e2c4..0000000000000
--- a/modules/contact-form/gutenberg-blocks.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-
-add_action( 'init', array( 'Grunion_Contact_Form_Gutenblocks', 'register_block_types' ) );
-add_action( 'enqueue_block_editor_assets', array( 'Grunion_Contact_Form_Gutenblocks', 'enqueue_block_editor_assets' ) );
-
-class Grunion_Contact_Form_Gutenblocks {
-
-	public static function register_block_types() {
-		register_block_type( 'jetpack/contact-form', array(
-			'render_callback' => array( __CLASS__, 'render_contact_form' ),
-		) );
-
-		// Stubbed out for now until nested blocks are in.
-		register_block_type( 'jetpack/contact-field', array(
-			'render_callback' => array( __CLASS__, 'render_contact_field' ),
-		) );
-	}
-
-	public static function render_contact_form( $args ) {
-		// return Grunion_Contact_Form::parse( $args );
-		return '<pre>' . print_r( $args, true ) . '</pre>';
-	}
-
-	// Stubbed out for now until nested blocks are in.
-	public static function render_contact_field( $args ) {}
-
-	public static function enqueue_block_editor_assets() {
-		wp_register_script(
-			'jetpack-contact-form-gutenblocks',
-			plugins_url( 'js/gutenblocks.js', __FILE__ ),
-			array( 'wp-blocks', 'wp-element' )
-		);
-		wp_enqueue_script( 'jetpack-contact-form-gutenblocks' );
-		wp_localize_script( 'jetpack-contact-form-gutenblocks', 'grunionGutenblocks', array(
-			'strings' => array(
-				'Contact Form' => __( 'Contact Form', 'jetpack' ),
-				'What would you like the subject of the email to be?' =>
-						__( 'What would you like the subject of the email to be?', 'jetpack' ),
-				'Which email address should we send the submissions to?' =>
-						__( 'Which email address should we send the submissions to?', 'jetpack' ),
-			),
-		) );
-	}
-}
\ No newline at end of file
diff --git a/modules/contact-form/jetpack-contact-form-gutenberg.php b/modules/contact-form/jetpack-contact-form-gutenberg.php
new file mode 100644
index 0000000000000..b3d84f82efdaf
--- /dev/null
+++ b/modules/contact-form/jetpack-contact-form-gutenberg.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * Jetpack Gutenberg Form
+ *
+ * Loads Gutenberg block support for the Jetpack contact form module.
+ *
+ * @package Jetpack\modules\contact-form
+ * @since 5.9
+ */
+
+/**
+ * Enqueue Block (scripts)
+ *
+ * @param  string $name Block name to enqueue
+ * @return void
+ */
+function jetpack_form_enqueue_block( $name ) {
+	$namespace = "jetpack/form-{$name}";
+
+    if ( "form" == $name ) {
+    	$namespace = "jetpack/form";
+    }
+
+	wp_enqueue_script(
+		$namespace,
+		Jetpack::get_file_url_for_environment(
+			"_inc/build/contact-form/blocks/{$name}/block.min.js",
+			"modules/contact-form/blocks/{$name}/block.js"
+		),
+		array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n' ),
+		JETPACK__VERSION
+	);
+
+    wp_register_style(
+        $namespace,
+        Jetpack::get_file_url_for_environment(
+			"_inc/build/contact-form/blocks/{$name}/editor.css",
+			"modules/contact-form/blocks/{$name}/editor.css"
+		),
+        array( 'wp-edit-blocks' ),
+        JETPACK__VERSION
+    );
+
+    register_block_type( $type, array(
+        'editor_script' => $namespace,
+        'editor_style'  => $namespace,
+    ) );
+
+}
+
+/**
+ * Enqueue Block Assets Action
+ *
+ * @return void
+ */
+function jetpack_form_enqueue_editor() {
+	jetpack_form_enqueue_block( 'form' );
+	jetpack_form_enqueue_block( 'text' );
+	jetpack_form_enqueue_block( 'textarea' );
+	jetpack_form_enqueue_block( 'button' );
+}
+
+add_action( 'enqueue_block_editor_assets', 'jetpack_form_enqueue_editor' );
diff --git a/modules/contact-form/js/gutenblocks.js b/modules/contact-form/js/gutenblocks.js
deleted file mode 100644
index ee417b55470c7..0000000000000
--- a/modules/contact-form/js/gutenblocks.js
+++ /dev/null
@@ -1,73 +0,0 @@
-( function( wp, strings ) {
-	wp.blocks.registerBlockType( 'jetpack/contact-form', {
-		title : strings['Contact Form'],
-		icon : 'feedback',
-		category : 'common',
-
-		attributes : {
-			subject : {
-				type : 'string',
-				default : ''
-			},
-			to : {
-				type : 'string',
-				default : ''
-			}
-		},
-
-		edit : function( props ) {
-			function handleSubjectChange( value ) {
-				props.setAttributes({
-					subject : value
-				});
-				return value;
-			}
-			function handleToChange( value ) {
-				props.setAttributes({
-					to : value
-				});
-				return value;
-			}
-
-			return [
-				wp.element.createElement(
-					'h1',
-					{
-						key : 'jetpack/contact-form/placeholder',
-					},
-					'This is a Placeholder.'
-				),
-				!! props.focus && wp.element.createElement(
-					wp.blocks.InspectorControls,
-					{ key : 'inspector' },
-					[
-						wp.element.createElement(
-							wp.blocks.InspectorControls.TextControl,
-							{
-								key : 'jetpack/contact-form/inspector/subject',
-								onChange : handleSubjectChange,
-								value : props.attributes.subject,
-								label : strings['What would you like the subject of the email to be?']
-							}
-						),
-						wp.element.createElement(
-							wp.blocks.InspectorControls.TextControl,
-							{
-								key : 'jetpack/contact-form/inspector/to',
-								onChange : handleToChange,
-								value : props.attributes.to,
-								label : strings['Which email address should we send the submissions to?'],
-								help : 'Help for to line whatever'
-							}
-						)
-					]
-				),
-			];
-		},
-
-		save : function() {
-			return null;
-		}
-
-	} );
-} )( window.wp, window.grunionGutenblocks.strings );
\ No newline at end of file