Contact Form: Add Gutenberg based form builder blocks #9452

lsl · 2018-05-01T12:58:17Z

Status: In Progress

Adding a Gutenberg form builder to Jetpack for use in the contact form module.

There are a couple of issues blocking any kind of usable solution being completed, outlined further below.

Changes proposed in this Pull Request:

Add form block based on the InnerBlock component
Add text, textarea, and button form builder element blocks.

Testing instructions:

Add a Form block to a Gutenberg page or post.
Default Form should contain
- Name, Email textboxes
- Message textarea,
- Submit Button
Ability to add form elements should only be enabled against the form block (fix for this is blocked)
Text elements should have a default label, no placeholder, and be required.
Buttons should have a default label

Proposed changelog entry for your changes:

Added Gutenberg form builder blocks for the contact form module.

Further info:

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:

InnerBlock templating requires Implement nesting in cover image block WordPress/gutenberg#5452.
Some form of block inserter restrictions are needed, likely solution coming via [WIP] Child blocks WordPress/gutenberg#6346 / Introduce Child Blocks WordPress/gutenberg#5540

Todo - Integration with grunion-contact-form:

Captcha support should be relatively easy to achieve with a serverside
rendered block
Serverside controlled form action/method's - probably best implemented withAPIData

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

How it looks:

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.

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: * 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

noisysocks

Overall, I really like the approach you're taking here by using InnerBlocks. Nice work.

I left a few mostly minor comments. Note that many of them (e.g. missing key props, missing localisation) apply to all four JSX files added in this PR.

I'd like to see the contact form functionality itself implemented, e.g. one should be able to send an email by submitting the form on the frontend. Once that works we'll be in a good position to refine this PR into something shippable.

noisysocks · 2018-05-02T00:27:48Z

modules/contact-form/blocks/button/block.jsx

+const inputName = (str) => str.toLowerCase().replace(/[^a-z0-9]/, '');
+
+// Define the form block
+let FormButton = {


We should communicate that we don't intend for this variable's value to change by declaring it const.

noisysocks · 2018-05-02T00:32:19Z

modules/contact-form/blocks/button/block.jsx

+
+	save: ( { attributes, className } ) => {
+		return <div className={ className }>
+			<Button isPrimary={ true } type={ "submit" }>


We can shorten this to:

<Button isPrimary type="submit">

https://reactjs.org/docs/jsx-in-depth.html#string-literals
https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true

noisysocks · 2018-05-02T00:37:16Z

modules/contact-form/blocks/button/block.jsx

+		}
+
+		return [
+			<TextControl


We'll need to specify a key prop on the <TextControl> since it is contained within a list.

Better yet, we could just omit the list altogether:

return ( <TextControl ... /> );

noisysocks · 2018-05-02T00:51:57Z

modules/contact-form/blocks/button/block.jsx

+	},
+	edit: ( { attributes, setAttributes, className, isSelected } ) => {
+		if ( ! isSelected ) {
+			return <div className={ className }>


JSX is easier to read, I think, when opening and closing tags align. We can do this by wrapping multiline JSX with parentheses.

if ( ! isSelected ) { return ( <div className={ className }> ... </div> ); }

noisysocks · 2018-05-02T00:54:31Z

modules/contact-form/blocks/button/editor.css

@@ -0,0 +1 @@
+.wp-block-jetpack-form-button {}


Are these files necessary?

No, development artifacts to remove.

noisysocks · 2018-05-02T01:11:36Z

modules/contact-form/blocks/form/block.jsx

+			/>,
+
+			// Display on Focus
+			!! isSelected &&


We can remove this check. WordPress/gutenberg#5029 made <InspectorControls> check for isSelected automatically.

noisysocks · 2018-05-02T01:17:31Z

modules/contact-form/blocks/text/block.jsx

+		// 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 }>


I don't think using <BaseControl> in save() is a good idea. If, down the track, we modify the markup within BaseControl, Gutenberg will be unable to parse existing jetpack/form-text blocks.

I recommend instead that we manually render the necessary <label> markup here.

noisysocks · 2018-05-02T01:23:06Z

modules/contact-form/blocks/text/block.jsx

+
+	edit: ( { attributes, setAttributes, className, isSelected } ) => {
+		if ( ! isSelected ) {
+			return FormText.save( { attributes: attributes, className: className } )


Clever! I think it would be clearer, though, if we split this out into its own component that both save() and edit() use.

function FormTextInput( { attributes, className } ) { return ...; } const FormText = { save( { attributes, className } ) { return <FormTextInput attributes={ attributes } className={ className } />; }, edit( { attributes, setAttributes, className, isSelected } ) { if ( ! isSelected ) { return <FormTextInput attributes={ attributes } className={ className } />; } }, ... };

noisysocks · 2018-05-02T01:27:55Z

modules/contact-form/blocks/text/block.jsx

+		}
+
+		return [
+			<TextControl


This is missing a key prop. Alternatively, we could use Fragment (exposed as wp.element.Fragment) instead of a list.

noisysocks · 2018-05-02T01:29:29Z

modules/contact-form/jetpack-contact-form-gutenberg.php

+
+    if ( "form" == $name ) {
+    	$namespace = "jetpack/form";
+    }


There's some mixed indentation going on here.

MichaelArestad · 2018-05-11T15:47:26Z

I think this needs a rebase before I can test it. There was a bug introduced to Jetpack that bricks the admin screen for me.

MichaelArestad · 2018-05-11T16:08:45Z

I'm having some issues testing this branch. I've got the branch checked out. I have the required Gutenberg branch checked out. I confirmed on the server, but I'm getting this message:

oskosk · 2018-05-11T16:38:56Z

modules/contact-form/jetpack-contact-form-gutenberg.php

+        JETPACK__VERSION
+    );
+
+    register_block_type( $type, array(


$type is undefined here.

oskosk · 2018-05-11T16:45:04Z

To check this PR (which comes from a fork of the Jetpack repo) when working on a local clone of the Automattic/Jetpack repo:

git fetch origin pull/9452/head:pr/9452
git checkout pr/9452
yarn build

Make sure Gutenberg is installed and Jetpack is connected.

oskosk · 2018-07-11T20:14:42Z

@lsl could you create a version of this branch but on this same repo instead of being a branch on a fork ?

@oskosk

Context: #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 #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

lsl · 2018-07-12T05:46:18Z

@oskosk https://github.com/Automattic/jetpack/tree/try/gutenberg-contact-form

oskosk · 2018-07-12T18:20:05Z

Thank you @lsl !

George Stephanis and others added 2 commits May 1, 2018 21:49

Initial start for making a Gutenblock for the Contact Form.

8c997cd

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.

lsl requested review from georgestephanis and a team as code owners May 1, 2018 12:58

noisysocks reviewed May 2, 2018

View reviewed changes

jeherve added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Feature] Contact Form [Status] In Progress [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels May 2, 2018

oskosk reviewed May 11, 2018

View reviewed changes

oskosk added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] In Progress labels Jul 11, 2018

oskosk added this to the 6.4 milestone Jul 11, 2018

lsl closed this Jul 12, 2018

kraftbj removed the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label Sep 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contact Form: Add Gutenberg based form builder blocks #9452

Contact Form: Add Gutenberg based form builder blocks #9452

lsl commented May 1, 2018

noisysocks left a comment

noisysocks May 2, 2018

noisysocks May 2, 2018

noisysocks May 2, 2018

noisysocks May 2, 2018

noisysocks May 2, 2018

lsl May 6, 2018

noisysocks May 2, 2018

noisysocks May 2, 2018

noisysocks May 2, 2018

noisysocks May 2, 2018

noisysocks May 2, 2018

MichaelArestad commented May 11, 2018

MichaelArestad commented May 11, 2018

oskosk May 11, 2018

oskosk commented May 11, 2018

oskosk commented Jul 11, 2018

lsl commented Jul 12, 2018

oskosk commented Jul 12, 2018

		@@ -0,0 +1 @@
		.wp-block-jetpack-form-button {}

Contact Form: Add Gutenberg based form builder blocks #9452

Contact Form: Add Gutenberg based form builder blocks #9452

Conversation

lsl commented May 1, 2018

Changes proposed in this Pull Request:

Testing instructions:

Proposed changelog entry for your changes:

Further info:

noisysocks left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MichaelArestad commented May 11, 2018

MichaelArestad commented May 11, 2018

Choose a reason for hiding this comment

oskosk commented May 11, 2018

oskosk commented Jul 11, 2018

lsl commented Jul 12, 2018

oskosk commented Jul 12, 2018