From 0456925145f6ca180639082ae83f4190b9e303ff Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 12 Dec 2023 18:12:18 +0900
Subject: [PATCH] Input Field Block: Use `useblockProps` hook in save function
 (#56507)

* Input Field Block: Use blockProps hook in save function

* Update fixture files

* Update packages/block-library/src/form-input/deprecated.js

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

---------

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
---
 .../src/form-input/deprecated.js              | 142 ++++++++++++++++++
 packages/block-library/src/form-input/edit.js |   2 +-
 .../block-library/src/form-input/index.js     |   2 +
 packages/block-library/src/form-input/save.js |  45 +++---
 .../fixtures/blocks/core__form-input.html     |   2 +-
 .../blocks/core__form-input.parsed.json       |   4 +-
 .../blocks/core__form-input.serialized.html   |   2 +-
 .../core__form-input__deprecated-v1.html      |   6 +
 .../core__form-input__deprecated-v1.json      |  15 ++
 ...ore__form-input__deprecated-v1.parsed.json |  11 ++
 ..._form-input__deprecated-v1.serialized.html |   3 +
 .../fixtures/blocks/core__form.html           |  16 +-
 .../fixtures/blocks/core__form.parsed.json    |  32 ++--
 .../blocks/core__form.serialized.html         |   8 +-
 14 files changed, 233 insertions(+), 57 deletions(-)
 create mode 100644 packages/block-library/src/form-input/deprecated.js
 create mode 100644 test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html

diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
new file mode 100644
index 0000000000000..bb1fdf6e40204
--- /dev/null
+++ b/packages/block-library/src/form-input/deprecated.js
@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+const getNameFromLabelV1 = ( content ) => {
+	return (
+		removeAccents( stripHTML( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
+	);
+};
+
+// Version without wrapper div in saved markup
+// See: https://github.com/WordPress/gutenberg/pull/56507
+const v1 = {
+	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: {
+		className: false,
+		anchor: true,
+		reusable: false,
+		spacing: {
+			margin: [ 'top', 'bottom' ],
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { type, name, label, inlineLabel, required, placeholder, value } =
+			attributes;
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+
+		const inputStyle = {
+			...borderProps.style,
+			...colorProps.style,
+		};
+
+		const inputClasses = classNames(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		/* eslint-disable jsx-a11y/label-has-associated-control */
+		return (
+			<label
+				className={ classNames( 'wp-block-form-input__label', {
+					'is-label-inline': inlineLabel,
+				} ) }
+			>
+				<span className="wp-block-form-input__label-content">
+					<RichText.Content value={ label } />
+				</span>
+				<TagName
+					className={ inputClasses }
+					type={ 'textarea' === type ? undefined : type }
+					name={ name || getNameFromLabelV1( label ) }
+					required={ required }
+					aria-required={ required }
+					placeholder={ placeholder || undefined }
+					style={ inputStyle }
+				/>
+			</label>
+		);
+		/* eslint-enable jsx-a11y/label-has-associated-control */
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index 0742c22c22f42..0b34c70fbad2d 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -59,7 +59,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
 					autoComplete="off"
 					label={ __( 'Name' ) }
diff --git a/packages/block-library/src/form-input/index.js b/packages/block-library/src/form-input/index.js
index b700e0ade6ca7..8e0548a6b24db 100644
--- a/packages/block-library/src/form-input/index.js
+++ b/packages/block-library/src/form-input/index.js
@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -12,6 +13,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
+	deprecated,
 	edit,
 	save,
 	variations,
diff --git a/packages/block-library/src/form-input/save.js b/packages/block-library/src/form-input/save.js
index 1404e40634e82..d8f5852c2ab90 100644
--- a/packages/block-library/src/form-input/save.js
+++ b/packages/block-library/src/form-input/save.js
@@ -9,6 +9,7 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
@@ -52,30 +53,34 @@ export default function save( { attributes } ) {
 	);
 	const TagName = type === 'textarea' ? 'textarea' : 'input';
 
+	const blockProps = useBlockProps.save();
+
 	if ( 'hidden' === type ) {
 		return <input type={ type } name={ name } value={ value } />;
 	}
 
-	/* eslint-disable jsx-a11y/label-has-associated-control */
 	return (
-		<label
-			className={ classNames( 'wp-block-form-input__label', {
-				'is-label-inline': inlineLabel,
-			} ) }
-		>
-			<span className="wp-block-form-input__label-content">
-				<RichText.Content value={ label } />
-			</span>
-			<TagName
-				className={ inputClasses }
-				type={ 'textarea' === type ? undefined : type }
-				name={ name || getNameFromLabel( label ) }
-				required={ required }
-				aria-required={ required }
-				placeholder={ placeholder || undefined }
-				style={ inputStyle }
-			/>
-		</label>
+		<div { ...blockProps }>
+			{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+			<label
+				className={ classNames( 'wp-block-form-input__label', {
+					'is-label-inline': inlineLabel,
+				} ) }
+			>
+				<span className="wp-block-form-input__label-content">
+					<RichText.Content value={ label } />
+				</span>
+				<TagName
+					className={ inputClasses }
+					type={ 'textarea' === type ? undefined : type }
+					name={ name || getNameFromLabel( label ) }
+					required={ required }
+					aria-required={ required }
+					placeholder={ placeholder || undefined }
+					style={ inputStyle }
+				/>
+			</label>
+			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+		</div>
 	);
-	/* eslint-enable jsx-a11y/label-has-associated-control */
 }
diff --git a/test/integration/fixtures/blocks/core__form-input.html b/test/integration/fixtures/blocks/core__form-input.html
index f30d44a2503d2..33f1fe88c2c6a 100644
--- a/test/integration/fixtures/blocks/core__form-input.html
+++ b/test/integration/fixtures/blocks/core__form-input.html
@@ -1,3 +1,3 @@
 <!-- wp:form-input -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label>
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
 <!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input.parsed.json b/test/integration/fixtures/blocks/core__form-input.parsed.json
index f92379b595276..5470c653c403b 100644
--- a/test/integration/fixtures/blocks/core__form-input.parsed.json
+++ b/test/integration/fixtures/blocks/core__form-input.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/form-input",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/></label>\n",
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/></label></div>\n",
 		"innerContent": [
-			"\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/></label>\n"
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/></label></div>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__form-input.serialized.html b/test/integration/fixtures/blocks/core__form-input.serialized.html
index f30d44a2503d2..33f1fe88c2c6a 100644
--- a/test/integration/fixtures/blocks/core__form-input.serialized.html
+++ b/test/integration/fixtures/blocks/core__form-input.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:form-input -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label>
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
 <!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
new file mode 100644
index 0000000000000..08ea661838620
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
@@ -0,0 +1,6 @@
+<!-- wp:form-input -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
new file mode 100644
index 0000000000000..fee4df284f115
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "text",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
new file mode 100644
index 0000000000000..645337cbfdb4a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
new file mode 100644
index 0000000000000..33f1fe88c2c6a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form.html b/test/integration/fixtures/blocks/core__form.html
index f443172601a3b..825389eb75ecd 100644
--- a/test/integration/fixtures/blocks/core__form.html
+++ b/test/integration/fixtures/blocks/core__form.html
@@ -1,19 +1,19 @@
 <!-- wp:form -->
 <form class="wp-block-form" enctype="text/plain">
-<!-- wp:form-input {"label":"Name","required":true} -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Name</span><input class="wp-block-form-input__input" type="text" name="name" required aria-required="true"/></label>
+<!-- wp:form-input -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Name</span><input class="wp-block-form-input__input" type="text" name="name" required aria-required="true"/></label></div>
 <!-- /wp:form-input -->
 
-<!-- wp:form-input {"type":"email","label":"Email","required":true} -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Email</span><input class="wp-block-form-input__input" type="email" name="email" required aria-required="true"/></label>
+<!-- wp:form-input {"type":"email"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Email</span><input class="wp-block-form-input__input" type="email" name="email" required aria-required="true"/></label></div>
 <!-- /wp:form-input -->
 
-<!-- wp:form-input {"type":"url","label":"Website"} -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Website</span><input class="wp-block-form-input__input" type="url" name="website" aria-required="false"/></label>
+<!-- wp:form-input {"type":"url"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Website</span><input class="wp-block-form-input__input" type="url" name="website" aria-required="false"/></label></div>
 <!-- /wp:form-input -->
 
-<!-- wp:form-input {"type":"textarea","label":"Comment","required":true} -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Comment</span><textarea class="wp-block-form-input__input" name="comment" required aria-required="true"></textarea></label>
+<!-- wp:form-input {"type":"textarea"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Comment</span><textarea class="wp-block-form-input__input" name="comment" required aria-required="true"></textarea></label></div>
 <!-- /wp:form-input -->
 
 <!-- wp:form-submit-button -->
diff --git a/test/integration/fixtures/blocks/core__form.parsed.json b/test/integration/fixtures/blocks/core__form.parsed.json
index fb2daff4a4741..e33849b5be504 100644
--- a/test/integration/fixtures/blocks/core__form.parsed.json
+++ b/test/integration/fixtures/blocks/core__form.parsed.json
@@ -5,52 +5,44 @@
 		"innerBlocks": [
 			{
 				"blockName": "core/form-input",
-				"attrs": {
-					"label": "Name",
-					"required": true
-				},
+				"attrs": {},
 				"innerBlocks": [],
-				"innerHTML": "\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Name</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"name\" required aria-required=\"true\"/></label>\n",
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Name</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"name\" required aria-required=\"true\"/></label></div>\n",
 				"innerContent": [
-					"\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Name</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"name\" required aria-required=\"true\"/></label>\n"
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Name</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"name\" required aria-required=\"true\"/></label></div>\n"
 				]
 			},
 			{
 				"blockName": "core/form-input",
 				"attrs": {
-					"type": "email",
-					"label": "Email",
-					"required": true
+					"type": "email"
 				},
 				"innerBlocks": [],
-				"innerHTML": "\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Email</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"email\" required aria-required=\"true\"/></label>\n",
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Email</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"email\" required aria-required=\"true\"/></label></div>\n",
 				"innerContent": [
-					"\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Email</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"email\" required aria-required=\"true\"/></label>\n"
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Email</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"email\" required aria-required=\"true\"/></label></div>\n"
 				]
 			},
 			{
 				"blockName": "core/form-input",
 				"attrs": {
-					"type": "url",
-					"label": "Website"
+					"type": "url"
 				},
 				"innerBlocks": [],
-				"innerHTML": "\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Website</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"website\" aria-required=\"false\"/></label>\n",
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Website</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"website\" aria-required=\"false\"/></label></div>\n",
 				"innerContent": [
-					"\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Website</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"website\" aria-required=\"false\"/></label>\n"
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Website</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"website\" aria-required=\"false\"/></label></div>\n"
 				]
 			},
 			{
 				"blockName": "core/form-input",
 				"attrs": {
-					"type": "textarea",
-					"label": "Comment",
-					"required": true
+					"type": "textarea"
 				},
 				"innerBlocks": [],
-				"innerHTML": "\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Comment</span><textarea class=\"wp-block-form-input__input\" name=\"comment\" required aria-required=\"true\"></textarea></label>\n",
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Comment</span><textarea class=\"wp-block-form-input__input\" name=\"comment\" required aria-required=\"true\"></textarea></label></div>\n",
 				"innerContent": [
-					"\n<label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Comment</span><textarea class=\"wp-block-form-input__input\" name=\"comment\" required aria-required=\"true\"></textarea></label>\n"
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Comment</span><textarea class=\"wp-block-form-input__input\" name=\"comment\" required aria-required=\"true\"></textarea></label></div>\n"
 				]
 			},
 			{
diff --git a/test/integration/fixtures/blocks/core__form.serialized.html b/test/integration/fixtures/blocks/core__form.serialized.html
index 9bfff780f50db..e3209102ce20b 100644
--- a/test/integration/fixtures/blocks/core__form.serialized.html
+++ b/test/integration/fixtures/blocks/core__form.serialized.html
@@ -1,18 +1,18 @@
 <!-- wp:form -->
 <form class="wp-block-form" enctype="text/plain"><!-- wp:form-input -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Name</span><input class="wp-block-form-input__input" type="text" name="name" required aria-required="true"/></label>
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Name</span><input class="wp-block-form-input__input" type="text" name="name" required aria-required="true"/></label></div>
 <!-- /wp:form-input -->
 
 <!-- wp:form-input {"type":"email"} -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Email</span><input class="wp-block-form-input__input" type="email" name="email" required aria-required="true"/></label>
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Email</span><input class="wp-block-form-input__input" type="email" name="email" required aria-required="true"/></label></div>
 <!-- /wp:form-input -->
 
 <!-- wp:form-input {"type":"url"} -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Website</span><input class="wp-block-form-input__input" type="url" name="website" aria-required="false"/></label>
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Website</span><input class="wp-block-form-input__input" type="url" name="website" aria-required="false"/></label></div>
 <!-- /wp:form-input -->
 
 <!-- wp:form-input {"type":"textarea"} -->
-<label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Comment</span><textarea class="wp-block-form-input__input" name="comment" required aria-required="true"></textarea></label>
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Comment</span><textarea class="wp-block-form-input__input" name="comment" required aria-required="true"></textarea></label></div>
 <!-- /wp:form-input -->
 
 <!-- wp:form-submit-button -->