Contact Form Gutenblock

.gitignore

@@ -45,4 +45,3 @@ phpcs.xml
 /css
 _inc/jetpack-strings.php
 /modules/**/*/block.js
-

gulpfile.babel.js

@@ -390,6 +390,7 @@ gulp.task( 'js:hint', function() {
 		'!modules/*.min.',
 		'!modules/**/*.min.js',
 		'!**/*/*block.js',
+		'!**/*/editor.js', // Don't scan these files -- they're synced with Calypso and actually jsx or built files.
 	] )
 		.pipe( jshint( '.jshintrc' ) )
 		.pipe( jshint.reporter( 'jshint-stylish' ) )

modules/contact-form/block/build/editor.css

@@ -0,0 +1,72 @@
+/**
+ * SASS placeholder selectors for form styles
+ */
+.jetpack-form .components-base-control * {
+  margin: 0; }
+
+.jetpack-form .jetpack-field .jetpack-field-label.jetpack-field-label.jetpack-field-label {
+  border-color: #fff;
+  border-radius: 0;
+  font-weight: bold;
+  margin: 0;
+  margin-bottom: 2px;
+  width: calc( 100% - 100px); }
+  .jetpack-form .jetpack-field .jetpack-field-label.jetpack-field-label.jetpack-field-label:hover {
+    border-color: #357CB5; }
+  .jetpack-form .jetpack-field .jetpack-field-label.jetpack-field-label.jetpack-field-label:focus {
+    border-color: #E3E5E8;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+
+.jetpack-form .jetpack-field input:disabled,
+.jetpack-form .jetpack-field textarea:disabled {
+  border-color: #8d96a0;
+  padding: 10px 8px; }
+
+.jetpack-form .jetpack-field input:disabled {
+  margin-right: 4px; }
+
+.jetpack-form .jetpack-field span.required {
+  float: right; }
+
+.editor-block-list__block[data-type="jetpack/field-checkbox-multiple"] ol, .editor-block-list__block[data-type="jetpack/field-radio"] ol, .editor-block-list__block[data-type="jetpack/field-select"] ol {
+  list-style-type: none; }
+  .editor-block-list__block[data-type="jetpack/field-checkbox-multiple"] ol:empty, .editor-block-list__block[data-type="jetpack/field-radio"] ol:empty, .editor-block-list__block[data-type="jetpack/field-select"] ol:empty {
+    display: none; }
+
+.editor-block-list__block[data-type="jetpack/field-select"] ol {
+  border: 1px solid #8d96a0;
+  border-radius: 4px;
+  padding: 4px; }
+
+.editor-block-list__block ol li button.components-icon-button {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 6px;
+  vertical-align: bottom; }
+
+.editor-block-list__block input.option {
+  border-color: #fff;
+  border-radius: 0;
+  width: calc( 100% - 5em);
+  display: inline-block; }
+  .editor-block-list__block input.option:hover {
+    border-color: #357CB5; }
+  .editor-block-list__block input.option:focus {
+    border-color: #E3E5E8;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+
+.editor-block-list__block .block-list-appender__toggle {
+  background-color: #f7f7f7;
+  display: none;
+  margin: 32px auto;
+  width: calc(100% - 32px); }
+  .editor-block-list__block .block-list-appender__toggle:hover {
+    outline: 1px solid #555d66; }
+
+.editor-block-list__block.is-selected .block-list-appender__toggle, .editor-block-list__block.is-selected-parent .block-list-appender__toggle,
+.editor-block-list__block.is-typing ~ .block-list-appender .block-list-appender__toggle {
+  display: block; }
+

modules/contact-form/block/build/editor.rtl.css

@@ -0,0 +1,72 @@
+/**
+ * SASS placeholder selectors for form styles
+ */
+.jetpack-form .components-base-control * {
+  margin: 0; }
+
+.jetpack-form .jetpack-field .jetpack-field-label.jetpack-field-label.jetpack-field-label {
+  border-color: #fff;
+  border-radius: 0;
+  font-weight: bold;
+  margin: 0;
+  margin-bottom: 2px;
+  width: calc( 100% - 100px); }
+  .jetpack-form .jetpack-field .jetpack-field-label.jetpack-field-label.jetpack-field-label:hover {
+    border-color: #357CB5; }
+  .jetpack-form .jetpack-field .jetpack-field-label.jetpack-field-label.jetpack-field-label:focus {
+    border-color: #E3E5E8;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+
+.jetpack-form .jetpack-field input:disabled,
+.jetpack-form .jetpack-field textarea:disabled {
+  border-color: #8d96a0;
+  padding: 10px 8px; }
+
+.jetpack-form .jetpack-field input:disabled {
+  margin-left: 4px; }
+
+.jetpack-form .jetpack-field span.required {
+  float: left; }
+
+.editor-block-list__block[data-type="jetpack/field-checkbox-multiple"] ol, .editor-block-list__block[data-type="jetpack/field-radio"] ol, .editor-block-list__block[data-type="jetpack/field-select"] ol {
+  list-style-type: none; }
+  .editor-block-list__block[data-type="jetpack/field-checkbox-multiple"] ol:empty, .editor-block-list__block[data-type="jetpack/field-radio"] ol:empty, .editor-block-list__block[data-type="jetpack/field-select"] ol:empty {
+    display: none; }
+
+.editor-block-list__block[data-type="jetpack/field-select"] ol {
+  border: 1px solid #8d96a0;
+  border-radius: 4px;
+  padding: 4px; }
+
+.editor-block-list__block ol li button.components-icon-button {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 6px;
+  vertical-align: bottom; }
+
+.editor-block-list__block input.option {
+  border-color: #fff;
+  border-radius: 0;
+  width: calc( 100% - 5em);
+  display: inline-block; }
+  .editor-block-list__block input.option:hover {
+    border-color: #357CB5; }
+  .editor-block-list__block input.option:focus {
+    border-color: #E3E5E8;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+
+.editor-block-list__block .block-list-appender__toggle {
+  background-color: #f7f7f7;
+  display: none;
+  margin: 32px auto;
+  width: calc(100% - 32px); }
+  .editor-block-list__block .block-list-appender__toggle:hover {
+    outline: 1px solid #555d66; }
+
+.editor-block-list__block.is-selected .block-list-appender__toggle, .editor-block-list__block.is-selected-parent .block-list-appender__toggle,
+.editor-block-list__block.is-typing ~ .block-list-appender .block-list-appender__toggle {
+  display: block; }
+

modules/contact-form/block/components/JetpackField.jsx

@@ -0,0 +1,44 @@
+/*global wp*/
+/** @jsx wp.element.createElement */
+/** @format */
+
+/**
+ * External dependencies
+ */
+import {
+	TextControl
+} from '@wordpress/components';
+
+import {
+	Fragment
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import JetpackFieldSettings from './JetpackFieldSettings';
+import JetpackFieldLabel from './JetpackFieldLabel';
+
+function JetpackField( props ) {
+	return (
+		<Fragment>
+			<JetpackFieldSettings
+				required={ props.required }
+				setAttributes={ props.setAttributes }
+			/>
+			<div className="jetpack-field">
+				<TextControl
+					type={ props.type }
+					label={ <JetpackFieldLabel
+						required={ props.required }
+						label={ props.label }
+						setAttributes={ props.setAttributes }
+					/> }
+					disabled
+				/>
+			</div>
+		</Fragment>
+	);
+}
+
+export default JetpackField;

modules/contact-form/block/components/JetpackFieldCheckbox.jsx

@@ -0,0 +1,52 @@
+/*global wp*/
+/** @jsx wp.element.createElement */
+/** @format */
+
+/**
+ * External dependencies
+ */
+import {
+	BaseControl,
+	CheckboxControl
+} from '@wordpress/components';
+
+import {
+	withInstanceId
+} from '@wordpress/compose';
+
+import {
+	Fragment
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import JetpackFieldSettings from './JetpackFieldSettings';
+import JetpackFieldLabel from './JetpackFieldLabel';
+
+function JetpackFieldCheckbox( props ) {
+	return (
+		<Fragment>
+			<JetpackFieldSettings
+				required={ props.required }
+				setAttributes={ props.setAttributes }
+			/>
+			<BaseControl
+				id={ `jetpack-field-checkbox-${ props.instanceId }` }
+				className="jetpack-field"
+			>
+				<CheckboxControl
+					id={ `jetpack-field-checkbox-${ props.instanceId }` }
+					label={ <JetpackFieldLabel
+						required={ props.required }
+						label={ props.label }
+						setAttributes={ props.setAttributes }
+					/> }
+					disabled
+				/>
+			</BaseControl>
+		</Fragment>
+	);
+}
+
+export default withInstanceId( JetpackFieldCheckbox );

modules/contact-form/block/components/JetpackFieldLabel.jsx

@@ -0,0 +1,44 @@
+/*global wp*/
+/** @jsx wp.element.createElement */
+/** @format */
+
+/**
+ * External dependencies
+ */
+
+import {
+	Component,
+	Fragment
+} from '@wordpress/element';
+
+import {
+	__
+} from '@wordpress/i18n';
+
+class JetpackFieldLabel extends Component {
+	constructor( ...args ) {
+		super( ...args );
+		this.onChangeLabel = this.onChangeLabel.bind( this );
+	}
+
+	onChangeLabel( event ) {
+		this.props.setAttributes( { label: event.target.value } );
+	}
+
+	render() {
+		return (
+			<Fragment>
+				<input
+					type="text"
+					value={ this.props.label }
+					className="jetpack-field-label"
+					onChange={ this.onChangeLabel }
+					placeholder={ __( 'Type here…', 'jetpack' ) }
+				/>
+				{ this.props.required && <span className="required">{ __( '(required)', 'jetpack' ) }</span> }
+			</Fragment>
+		);
+	}
+}
+
+export default JetpackFieldLabel;

modules/contact-form/block/components/JetpackFieldMultiple.jsx

@@ -0,0 +1,91 @@
+/*global wp*/
+/** @jsx wp.element.createElement */
+/** @format */
+
+/**
+ * External dependencies
+ */
+import {
+	BaseControl,
+	IconButton
+} from '@wordpress/components';
+
+import {
+	withInstanceId
+} from '@wordpress/compose';
+
+import {
+	Component,
+	Fragment
+} from '@wordpress/element';
+
+import {
+	__
+} from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import JetpackFieldSettings from './JetpackFieldSettings';
+import JetpackFieldLabel from './JetpackFieldLabel';
+import JetpackOption from './JetpackOption';
+
+class JetpackFieldMultiple extends Component {
+	constructor( ...args ) {
+		super( ...args );
+		this.onChangeOption = this.onChangeOption.bind( this );
+	}
+
+	onChangeOption( key = null, option = null ) {
+		const newOptions = this.props.options.slice( 0 );
+		if ( 'object' === typeof key ) {
+			newOptions.push( '' );
+		} else if ( null === option ) {
+			newOptions.splice( key, 1 );
+		} else {
+			newOptions.splice( key, 1, option );
+		}
+		this.props.setAttributes( { options: newOptions } );
+	}
+
+	render() {
+		this.type = this.props.type;
+
+		return (
+			<Fragment>
+				<JetpackFieldSettings
+					required={ this.props.required }
+					setAttributes={ this.props.setAttributes }
+				/>
+				<BaseControl
+					id={ `jetpack-field-multiple-${ this.props.instanceId }` }
+					className="jetpack-field"
+					label={ <JetpackFieldLabel
+						required={ this.props.required }
+						label={ this.props.label }
+						setAttributes={ this.props.setAttributes }
+					/> }
+				>
+					<ol id={ `jetpack-field-multiple-${ this.props.instanceId }` }>
+						{ this.props.options.map( ( option, index )=>(
+							<JetpackOption
+								type={ this.type }
+								key={ index }
+								option={ option }
+								index={ index }
+								onChangeOption={ this.onChangeOption }
+							/>
+						) ) }
+					</ol>
+					<IconButton
+						icon="insert"
+						label={ __( 'Insert option', 'jetpack' ) }
+						onClick={ this.onChangeOption }
+					> { __( 'Add', 'jetpack' ) }</IconButton>
+				</BaseControl>
+			</Fragment>
+		);
+	}
+}
+
+export default withInstanceId( JetpackFieldMultiple );