Initial start for making a Gutenblock for the Contact Form.

At this point it just represents the parent form -- it doesn't handle any fields yet.

That will largely depend on how WordPress/gutenberg#3745 progresses.

modules/contact-form.php

@@ -28,3 +28,5 @@
 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';

modules/contact-form/gutenberg-blocks.php

@@ -0,0 +1,44 @@
+<?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' ),
+			),
+		) );
+	}
+}

modules/contact-form/js/gutenblocks.js

@@ -0,0 +1,73 @@
+( 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 );