Add name attribute in fields

WordPress · Sep 21, 2022 · 69a9987 · 69a9987
1 parent dd9abd9
commit 69a9987
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,5 +1,5 @@
 export default function save( { attributes } ) {
-	const { type, label, inlineLabel } = attributes;
+	const { type, name, label, inlineLabel } = attributes;
 
 	return (
 		<>
@@ -8,18 +8,18 @@ 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 */
 			) }
 
 			{ 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 */
 			) }