From 69a9987bdf61994c3ab8b30bb7a6f78afe050a38 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 21 Sep 2022 15:03:40 +0300
Subject: [PATCH] Add name attribute in fields

---
 docs/reference-guides/core-blocks.md           |  4 ++--
 .../block-library/src/input-field/block.json   |  3 +++
 packages/block-library/src/input-field/edit.js | 15 ++++++++++++++-
 packages/block-library/src/input-field/save.js | 18 +++++++++++-------
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index e973fc2f278c8..2ac89f58e18f0 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -258,7 +258,7 @@ A form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/blo
 -	**Name:** core/form
 -	**Category:** common
 -	**Supports:** 
--	**Attributes:** 
+-	**Attributes:** action, method
 
 ## Classic
 
@@ -330,7 +330,7 @@ The basic building block for forms. ([Source](https://github.com/WordPress/guten
 -	**Name:** core/input-field
 -	**Category:** common
 -	**Supports:** 
--	**Attributes:** inlineLabel, label, type
+-	**Attributes:** inlineLabel, label, name, type
 
 ## Latest Comments
 
diff --git a/packages/block-library/src/input-field/block.json b/packages/block-library/src/input-field/block.json
index 2465312d7f437..1d41a626aec17 100644
--- a/packages/block-library/src/input-field/block.json
+++ b/packages/block-library/src/input-field/block.json
@@ -13,6 +13,9 @@
 			"type": "string",
 			"default": "text"
 		},
+		"name": {
+			"type": "string"
+		},
 		"label": {
 			"type": "string",
 			"default": "Label"
diff --git a/packages/block-library/src/input-field/edit.js b/packages/block-library/src/input-field/edit.js
index b3b26a88dfba9..5afd73b944b71 100644
--- a/packages/block-library/src/input-field/edit.js
+++ b/packages/block-library/src/input-field/edit.js
@@ -51,7 +51,7 @@ const inputTypeOptions = [
 ];
 
 function InputFieldBlock( { attributes, setAttributes } ) {
-	const { type, label, inlineLabel } = attributes;
+	const { type, name, label, inlineLabel } = attributes;
 	const blockProps = useBlockProps();
 	const ref = useRef();
 
@@ -75,6 +75,17 @@ function InputFieldBlock( { attributes, setAttributes } ) {
 							} );
 						} }
 					/>
+					{ type !== 'submit' && (
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ name }
+							onChange={ ( newVal ) => {
+								setAttributes( {
+									name: newVal,
+								} );
+							} }
+						/>
+					) }
 					{ type !== 'submit' && (
 						<CheckboxControl
 							label={ __( 'Inline label' ) }
@@ -97,6 +108,7 @@ function InputFieldBlock( { attributes, setAttributes } ) {
 					<textarea
 						className="wp-block-input-field"
 						disabled="true"
+						name={ name }
 					/>
 				</label>
 				/* eslint-enable jsx-a11y/label-has-associated-control */
@@ -156,6 +168,7 @@ function InputFieldBlock( { attributes, setAttributes } ) {
 					<input
 						className="wp-block-input-field"
 						type={ type }
+						name={ name }
 						disabled="true"
 					/>
 				</label>
diff --git a/packages/block-library/src/input-field/save.js b/packages/block-library/src/input-field/save.js
index c1090953d18bc..9bdc83306a1c0 100644
--- a/packages/block-library/src/input-field/save.js
+++ b/packages/block-library/src/input-field/save.js
@@ -1,5 +1,5 @@
 export default function save( { attributes } ) {
-	const { type, label, inlineLabel } = attributes;
+	const { type, name, label, inlineLabel } = attributes;
 
 	return (
 		<>
@@ -8,7 +8,10 @@ export default function save( { attributes } ) {
 				<label>
 					{ inlineLabel && label && <span>{ label }</span> }
 					{ ! inlineLabel && label && <p>{ label }</p> }
-					<textarea className="wp-block-input-field" />
+					<textarea
+						className="wp-block-input-field"
+						name={ name || label }
+					/>
 				</label>
 				/* eslint-enable jsx-a11y/label-has-associated-control */
 			) }
@@ -16,10 +19,7 @@ export default function save( { attributes } ) {
 			{ type === 'submit' && (
 				<div className="wp-block-buttons">
 					<div className="wp-block-button">
-						<button
-							className="wp-block-button__link wp-element-button"
-							disabled="true"
-						>
+						<button className="wp-block-button__link wp-element-button">
 							{ label }
 						</button>
 					</div>
@@ -31,7 +31,11 @@ export default function save( { attributes } ) {
 				<label>
 					{ inlineLabel && label && <span>{ label }</span> }
 					{ ! inlineLabel && label && <p>{ label }</p> }
-					<input className="wp-block-input-field" type={ type } />
+					<input
+						className="wp-block-input-field"
+						type={ type }
+						name={ name || label }
+					/>
 				</label>
 				/* eslint-enable jsx-a11y/label-has-associated-control */
 			) }