Introduce experimental form & inputs blocks to allow building basic forms

docs/reference-guides/core-blocks.md

@@ -277,6 +277,45 @@ Display footnotes added to the page. ([Source](https://github.com/WordPress/gute
 -	**Supports:** color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~multiple~~, ~~reusable~~
 -	**Attributes:** 
 
+## Form
+
+A form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form))
+
+-	**Name:** core/form
+-	**Category:** common
+-	**Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+-	**Attributes:** action, email, method, submissionMethod
+
+## Input field
+
+The basic building block for forms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-input))
+
+-	**Name:** core/form-input
+-	**Category:** common
+-	**Parent:** core/form
+-	**Supports:** anchor, spacing (margin), ~~reusable~~
+-	**Attributes:** inlineLabel, label, name, placeholder, required, type, value, visibilityPermissions
+
+## Form Submission Notification
+
+Provide a notification message after the form has been submitted. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submission-notification))
+
+-	**Name:** core/form-submission-notification
+-	**Category:** common
+-	**Parent:** core/form
+-	**Supports:** 
+-	**Attributes:** type
+
+## Form submit button
+
+A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submit-button))
+
+-	**Name:** core/form-submit-button
+-	**Category:** common
+-	**Parent:** core/form
+-	**Supports:** 
+-	**Attributes:** 
+
 ## Classic
 
 Use the classic WordPress editor. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/freeform))

lib/blocks.php

@@ -22,6 +22,8 @@ function gutenberg_reregister_core_block_types() {
 				'column',
 				'columns',
 				'details',
+				'form-input',
+				'form-submit-button',
 				'group',
 				'html',
 				'list',
@@ -66,6 +68,9 @@ function gutenberg_reregister_core_block_types() {
 				'comments.php'                     => 'core/comments',
 				'footnotes.php'                    => 'core/footnotes',
 				'file.php'                         => 'core/file',
+				'form.php'                         => 'core/form',
+				'form-input.php'                   => 'core/form-input',
+				'form-submission-notification.php' => 'core/form-submission-notification',
 				'home-link.php'                    => 'core/home-link',
 				'image.php'                        => 'core/image',
 				'gallery.php'                      => 'core/gallery',

lib/experimental/editor-settings.php

@@ -33,3 +33,15 @@ function gutenberg_enable_experiments() {
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
+
+/**
+ * Sets a global JS variable used to trigger the availability of form & input blocks.
+ */
+function gutenberg_enable_form_input_blocks() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-form-blocks', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableFormBlocks = true', 'before' );
+	}
+}
+
+add_action( 'admin_init', 'gutenberg_enable_form_input_blocks' );

lib/experimental/kses-allowed-html.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Modifies the wp_kses_allowed_html array.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Add the form elements to the allowed tags array.
+ *
+ * @param array $allowedtags The allowed tags.
+ *
+ * @return array The allowed tags.
+ */
+function gutenberg_kses_allowed_html( $allowedtags ) {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return $allowedtags;
+	}
+
+	$allowedtags['input'] = array(
+		'type'          => array(),
+		'name'          => array(),
+		'value'         => array(),
+		'checked'       => array(),
+		'required'      => array(),
+		'aria-required' => array(),
+		'class'         => array(),
+	);
+
+	$allowedtags['label'] = array(
+		'for'   => array(),
+		'class' => array(),
+	);
+
+	$allowedtags['textarea'] = array(
+		'name'          => array(),
+		'required'      => array(),
+		'aria-required' => array(),
+		'class'         => array(),
+	);
+	return $allowedtags;
+}
+add_filter( 'wp_kses_allowed_html', 'gutenberg_kses_allowed_html', 10, 2 );

lib/experiments-page.php

@@ -78,6 +78,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-color-randomizer',
 		)
 	);
+	add_settings_field(
+		'gutenberg-form-blocks',
+		__( 'Form and input blocks ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test new blocks to allow building forms (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ),
+			'id'    => 'gutenberg-form-blocks',
+		)
+	);
 
 	add_settings_field(
 		'gutenberg-group-grid-variation',

lib/load.php

@@ -66,6 +66,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 	}
 	require_once __DIR__ . '/experimental/class-gutenberg-rest-template-revision-count.php';
 	require_once __DIR__ . '/experimental/rest-api.php';
+
+	require_once __DIR__ . '/experimental/kses-allowed-html.php';
 }
 
 require __DIR__ . '/experimental/editor-settings.php';

packages/block-library/src/editor.scss

@@ -16,6 +16,8 @@
 @import "./details/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
+@import "./form-input/editor.scss";
+@import "./form-submission-notification/editor.scss";
 @import "./freeform/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";

packages/block-library/src/form-input/block.json

@@ -0,0 +1,72 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/form-input",
+	"title": "Input field",
+	"category": "common",
+	"parent": [ "core/form" ],
+	"description": "The basic building block for forms.",
+	"keywords": [ "input", "form" ],
+	"textdomain": "default",
+	"icon": "forms",
+	"attributes": {
+		"type": {
+			"type": "string",
+			"default": "text"
+		},
+		"name": {
+			"type": "string"
+		},
+		"label": {
+			"type": "string",
+			"default": "Label",
+			"selector": ".wp-block-form-input__label-content",
+			"source": "html",
+			"__experimentalRole": "content"
+		},
+		"inlineLabel": {
+			"type": "boolean",
+			"default": false
+		},
+		"required": {
+			"type": "boolean",
+			"default": false,
+			"selector": ".wp-block-form-input__input",
+			"source": "attribute",
+			"attribute": "required"
+		},
+		"placeholder": {
+			"type": "string",
+			"selector": ".wp-block-form-input__input",
+			"source": "attribute",
+			"attribute": "placeholder",
+			"__experimentalRole": "content"
+		},
+		"value": {
+			"type": "string",
+			"default": "",
+			"selector": "input",
+			"source": "attribute",
+			"attribute": "value"
+		},
+		"visibilityPermissions": {
+			"type": "string",
+			"default": "all"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"reusable": false,
+		"spacing": {
+			"margin": [ "top", "bottom" ]
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		}
+	},
+	"style": [ "wp-block-form-input" ]
+}

packages/block-library/src/form-input/edit.js

@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
+
+import { useRef } from '@wordpress/element';
+
+function InputFieldBlock( { attributes, setAttributes, className } ) {
+	const { type, name, label, inlineLabel, required, placeholder, value } =
+		attributes;
+	const blockProps = useBlockProps();
+	const ref = useRef();
+	const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	if ( ref.current ) {
+		ref.current.focus();
+	}
+
+	const controls = (
+		<>
+			{ 'hidden' !== type && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Input settings' ) }>
+						{ 'checkbox' !== type && (
+							<CheckboxControl
+								label={ __( 'Inline label' ) }
+								checked={ inlineLabel }
+								onChange={ ( newVal ) => {
+									setAttributes( {
+										inlineLabel: newVal,
+									} );
+								} }
+							/>
+						) }
+						<CheckboxControl
+							label={ __( 'Required' ) }
+							checked={ required }
+							onChange={ ( newVal ) => {
+								setAttributes( {
+									required: newVal,
+								} );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<InspectorControls __experimentalGroup="advanced">
+				<TextControl
+					autoComplete="off"
+					label={ __( 'Name' ) }
+					value={ name }
+					onChange={ ( newVal ) => {
+						setAttributes( {
+							name: newVal,
+						} );
+					} }
+					help={ __(
+						'Affects the "name" atribute of the input element, and is used as a name for the form submission results.'
+					) }
+				/>
+			</InspectorControls>
+		</>
+	);
+
+	if ( 'hidden' === type ) {
+		return (
+			<>
+				{ controls }
+				<input
+					type="hidden"
+					className={ classNames(
+						className,
+						'wp-block-form-input__input',
+						colorProps.className,
+						borderProps.className
+					) }
+					aria-label={ __( 'Value' ) }
+					value={ value }
+					onChange={ ( event ) =>
+						setAttributes( { value: event.target.value } )
+					}
+				/>
+			</>
+		);
+	}
+
+	return (
+		<div { ...blockProps }>
+			{ controls }
+			<span
+				className={ classNames( 'wp-block-form-input__label', {
+					'is-label-inline': inlineLabel || 'checkbox' === type,
+				} ) }
+			>
+				<RichText
+					tagName="span"
+					className="wp-block-form-input__label-content"
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+					aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
+					data-empty={ label ? false : true }
+					placeholder={ __( 'Type the label for this input' ) }
+				/>
+				<TagName
+					type={ 'textarea' === type ? undefined : type }
+					className={ classNames(
+						className,
+						'wp-block-form-input__input',
+						colorProps.className,
+						borderProps.className
+					) }
+					aria-label={ __( 'Optional placeholder text' ) }
+					// We hide the placeholder field's placeholder when there is a value. This
+					// stops screen readers from reading the placeholder field's placeholder
+					// which is confusing.
+					placeholder={
+						placeholder ? undefined : __( 'Optional placeholder…' )
+					}
+					value={ placeholder }
+					onChange={ ( event ) =>
+						setAttributes( { placeholder: event.target.value } )
+					}
+					aria-required={ required }
+					style={ {
+						...borderProps.style,
+						...colorProps.style,
+					} }
+				/>
+			</span>
+		</div>
+	);
+}
+
+export default InputFieldBlock;