From 297e9cafba7e574e3c45f9c9fab91d2476ac9c10 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Thu, 12 Sep 2024 20:08:23 +0900
Subject: [PATCH] Form Input: Don't use `flex-direction: row-reverse` for
 checkbox field (#64232)

* Form Input: Don't use `flex-direction: row-reverse` for checkbox field

* Don't create v2 variable

* Fix fixtures

* Update fixtures

* Split fixtures

* Integrate fixtures

* Remove unneccesary fixtures

* Add base fixtures for text-like inputs

All variations of the simple texts input field are added here to match the approach taken in the deprecation fixtures.

* Add base fixtures for checkbox, radio, and textarea inputs

* Add fallback style for old markup

---------

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: aristath <aristath@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .../src/form-input/deprecated.js              | 115 +++++++++++++++++-
 packages/block-library/src/form-input/edit.js |  28 +++--
 packages/block-library/src/form-input/save.js |  16 ++-
 .../block-library/src/form-input/style.scss   |  17 +--
 .../fixtures/blocks/core__form-input.html     |  17 +++
 .../fixtures/blocks/core__form-input.json     |  52 ++++++++
 .../blocks/core__form-input.parsed.json       |  72 +++++++++++
 .../blocks/core__form-input.serialized.html   |  16 +++
 .../blocks/core__form-input__checkbox.html    |   3 +
 .../blocks/core__form-input__checkbox.json    |  15 +++
 .../core__form-input__checkbox.parsed.json    |  14 +++
 ...core__form-input__checkbox.serialized.html |   3 +
 ...__form-input__checkbox__deprecated-v1.html |   7 ++
 ...__form-input__checkbox__deprecated-v1.json |  15 +++
 ...input__checkbox__deprecated-v1.parsed.json |  13 ++
 ...t__checkbox__deprecated-v1.serialized.html |   3 +
 ...__form-input__checkbox__deprecated-v2.html |   8 ++
 ...__form-input__checkbox__deprecated-v2.json |  15 +++
 ...input__checkbox__deprecated-v2.parsed.json |  13 ++
 ...t__checkbox__deprecated-v2.serialized.html |   3 +
 .../core__form-input__deprecated-v1.html      |  30 +++++
 .../core__form-input__deprecated-v1.json      |  52 ++++++++
 ...ore__form-input__deprecated-v1.parsed.json |  72 +++++++++++
 ..._form-input__deprecated-v1.serialized.html |  16 +++
 .../blocks/core__form-input__radio.html       |   3 +
 .../blocks/core__form-input__radio.json       |  15 +++
 .../core__form-input__radio.parsed.json       |  14 +++
 .../core__form-input__radio.serialized.html   |   3 +
 ...ore__form-input__radio__deprecated-v1.html |   7 ++
 ...ore__form-input__radio__deprecated-v1.json |  15 +++
 ...rm-input__radio__deprecated-v1.parsed.json |  13 ++
 ...nput__radio__deprecated-v1.serialized.html |   3 +
 ...ore__form-input__radio__deprecated-v2.html |   8 ++
 ...ore__form-input__radio__deprecated-v2.json |  15 +++
 ...rm-input__radio__deprecated-v2.parsed.json |  13 ++
 ...nput__radio__deprecated-v2.serialized.html |   3 +
 .../blocks/core__form-input__textarea.html    |   3 +
 .../blocks/core__form-input__textarea.json    |  15 +++
 .../core__form-input__textarea.parsed.json    |  13 ++
 ...core__form-input__textarea.serialized.html |   3 +
 ...__form-input__textarea__deprecated-v1.html |   6 +
 ...__form-input__textarea__deprecated-v1.json |  15 +++
 ...input__textarea__deprecated-v1.parsed.json |  13 ++
 ...t__textarea__deprecated-v1.serialized.html |   3 +
 44 files changed, 775 insertions(+), 23 deletions(-)
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea.serialized.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html

diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
index 9cd49d5b0011b..451cc704a42d5 100644
--- a/packages/block-library/src/form-input/deprecated.js
+++ b/packages/block-library/src/form-input/deprecated.js
@@ -9,6 +9,7 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
@@ -26,6 +27,118 @@ const getNameFromLabelV1 = ( content ) => {
 	);
 };
 
+const v2 = {
+	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,
+			},
+		},
+	},
+	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 = clsx(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		const blockProps = useBlockProps.save();
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		return (
+			<div { ...blockProps }>
+				{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+				<label
+					className={ clsx( '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 */ }
+			</div>
+		);
+	},
+};
+
 // Version without wrapper div in saved markup
 // See: https://github.com/WordPress/gutenberg/pull/56507
 const v1 = {
@@ -137,6 +250,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v1 ];
+const deprecated = [ v2, 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 6939443011ee5..5f3713e83975f 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -31,6 +31,9 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		ref.current.focus();
 	}
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	const controls = (
 		<>
 			{ 'hidden' !== type && (
@@ -81,6 +84,18 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		</>
 	);
 
+	const content = (
+		<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 }
+			placeholder={ __( 'Type the label for this input' ) }
+		/>
+	);
+
 	if ( 'hidden' === type ) {
 		return (
 			<>
@@ -111,17 +126,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					'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' ) }
-				/>
+				{ ! isCheckboxOrRadio && content }
 				<TagName
 					type={ 'textarea' === type ? undefined : type }
 					className={ clsx(
@@ -147,6 +152,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						...colorProps.style,
 					} }
 				/>
+				{ isCheckboxOrRadio && content }
 			</span>
 		</div>
 	);
diff --git a/packages/block-library/src/form-input/save.js b/packages/block-library/src/form-input/save.js
index c408e06923ca9..941c23dc2014d 100644
--- a/packages/block-library/src/form-input/save.js
+++ b/packages/block-library/src/form-input/save.js
@@ -55,6 +55,9 @@ export default function save( { attributes } ) {
 
 	const blockProps = useBlockProps.save();
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	if ( 'hidden' === type ) {
 		return <input type={ type } name={ name } value={ value } />;
 	}
@@ -67,9 +70,11 @@ export default function save( { attributes } ) {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>
-				<span className="wp-block-form-input__label-content">
-					<RichText.Content value={ label } />
-				</span>
+				{ ! isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 				<TagName
 					className={ inputClasses }
 					type={ 'textarea' === type ? undefined : type }
@@ -79,6 +84,11 @@ export default function save( { attributes } ) {
 					placeholder={ placeholder || undefined }
 					style={ inputStyle }
 				/>
+				{ isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 			</label>
 			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
 		</div>
diff --git a/packages/block-library/src/form-input/style.scss b/packages/block-library/src/form-input/style.scss
index f9e1753cf0a7b..7b1ac53cc89c0 100644
--- a/packages/block-library/src/form-input/style.scss
+++ b/packages/block-library/src/form-input/style.scss
@@ -15,16 +15,17 @@
 		}
 	}
 
-	/*
-	Small tweak to left-align the checkbox.
-	Even though `:has` is not currently supported in Firefox, this is a small tweak
-	and does not affect the functionality of the block or the user's experience.
-	There will be a minor inconsistency between browsers. However, it's more important to provide
-	a better experience for 80+% of users, until Firefox catches up and supports `:has`.
-	*/
 	&:has(input[type="checkbox"]) {
+		flex-direction: row;
 		width: fit-content;
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+
+		.wp-block-form-input__label-content {
+			margin: 0;
+		}
+	}
+
+	&:has(.wp-block-form-input__label-content + input[type="checkbox"]) {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
 		flex-direction: row-reverse;
 	}
 }
diff --git a/test/integration/fixtures/blocks/core__form-input.html b/test/integration/fixtures/blocks/core__form-input.html
index 33f1fe88c2c6a..81ff6cf53534e 100644
--- a/test/integration/fixtures/blocks/core__form-input.html
+++ b/test/integration/fixtures/blocks/core__form-input.html
@@ -1,3 +1,20 @@
 <!-- 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 -->
+
+<!-- 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">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<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="number" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<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="tel" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- 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">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
diff --git a/test/integration/fixtures/blocks/core__form-input.json b/test/integration/fixtures/blocks/core__form-input.json
index fee4df284f115..2d9865ef73556 100644
--- a/test/integration/fixtures/blocks/core__form-input.json
+++ b/test/integration/fixtures/blocks/core__form-input.json
@@ -11,5 +11,57 @@
 			"visibilityPermissions": "all"
 		},
 		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "email",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "number",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "tel",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "url",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__form-input.parsed.json b/test/integration/fixtures/blocks/core__form-input.parsed.json
index 5470c653c403b..439943df2841c 100644
--- a/test/integration/fixtures/blocks/core__form-input.parsed.json
+++ b/test/integration/fixtures/blocks/core__form-input.parsed.json
@@ -7,5 +7,77 @@
 		"innerContent": [
 			"\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"
 		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "email"
+		},
+		"innerBlocks": [],
+		"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=\"email\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\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=\"email\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "number"
+		},
+		"innerBlocks": [],
+		"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=\"number\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\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=\"number\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "tel"
+		},
+		"innerBlocks": [],
+		"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=\"tel\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\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=\"tel\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "url"
+		},
+		"innerBlocks": [],
+		"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=\"url\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\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=\"url\" 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 33f1fe88c2c6a..d66cedcf9215b 100644
--- a/test/integration/fixtures/blocks/core__form-input.serialized.html
+++ b/test/integration/fixtures/blocks/core__form-input.serialized.html
@@ -1,3 +1,19 @@
 <!-- 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 -->
+
+<!-- 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">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<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="number" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<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="tel" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- 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">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.html b/test/integration/fixtures/blocks/core__form-input__checkbox.html
new file mode 100644
index 0000000000000..fd08525a17eb3
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="checkbox" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.json b/test/integration/fixtures/blocks/core__form-input__checkbox.json
new file mode 100644
index 0000000000000..cc86ecd2a9080
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "checkbox",
+			"label": "Label",
+			"inlineLabel": true,
+			"required": true,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.parsed.json b/test/integration/fixtures/blocks/core__form-input__checkbox.parsed.json
new file mode 100644
index 0000000000000..60b7b7dd37b09
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "checkbox",
+			"inlineLabel": true
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html b/test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html
new file mode 100644
index 0000000000000..fd08525a17eb3
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="checkbox" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html
new file mode 100644
index 0000000000000..bd64e201e1918
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html
@@ -0,0 +1,7 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<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="checkbox" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.json
new file mode 100644
index 0000000000000..162304dc84b0c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "checkbox",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.parsed.json
new file mode 100644
index 0000000000000..2a2490e5c1260
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "checkbox"
+		},
+		"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=\"checkbox\" 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=\"checkbox\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html
new file mode 100644
index 0000000000000..6670593401970
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html
new file mode 100644
index 0000000000000..3f1de1c602847
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html
@@ -0,0 +1,8 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<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="checkbox" name="label" aria-required="false"/>
+	</label>
+</div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.json
new file mode 100644
index 0000000000000..162304dc84b0c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "checkbox",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.parsed.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.parsed.json
new file mode 100644
index 0000000000000..dfa57c0755f68
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "checkbox"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html
new file mode 100644
index 0000000000000..6670593401970
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></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
index 08ea661838620..5f043b0b2ef64 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
@@ -4,3 +4,33 @@
 	<input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/>
 </label>
 <!-- /wp:form-input -->
+
+
+<!-- wp:form-input {"type":"email"} -->
+<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="email" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<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="number" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<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="tel" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"url"} -->
+<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="url" 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
index fee4df284f115..2d9865ef73556 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
@@ -11,5 +11,57 @@
 			"visibilityPermissions": "all"
 		},
 		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "email",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "number",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "tel",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "url",
+			"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
index 645337cbfdb4a..963614974675d 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
@@ -7,5 +7,77 @@
 		"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"
 		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n\n",
+		"innerContent": [ "\n\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "email"
+		},
+		"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=\"email\" 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=\"email\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "number"
+		},
+		"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=\"number\" 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=\"number\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "tel"
+		},
+		"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=\"tel\" 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=\"tel\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "url"
+		},
+		"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=\"url\" 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=\"url\" 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
index 33f1fe88c2c6a..d66cedcf9215b 100644
--- a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
@@ -1,3 +1,19 @@
 <!-- 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 -->
+
+<!-- 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">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<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="number" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<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="tel" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- 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">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.html b/test/integration/fixtures/blocks/core__form-input__radio.html
new file mode 100644
index 0000000000000..1e6c76424334f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="radio" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.json b/test/integration/fixtures/blocks/core__form-input__radio.json
new file mode 100644
index 0000000000000..18cec11e3305b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "radio",
+			"label": "Label",
+			"inlineLabel": true,
+			"required": true,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.parsed.json b/test/integration/fixtures/blocks/core__form-input__radio.parsed.json
new file mode 100644
index 0000000000000..8dbb5b5a09942
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "radio",
+			"inlineLabel": true
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.serialized.html b/test/integration/fixtures/blocks/core__form-input__radio.serialized.html
new file mode 100644
index 0000000000000..1e6c76424334f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="radio" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html
new file mode 100644
index 0000000000000..8c41e02f10f04
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html
@@ -0,0 +1,7 @@
+<!-- wp:form-input {"type":"radio"} -->
+<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="radio" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.json
new file mode 100644
index 0000000000000..113ce01f7ab7e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "radio",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.parsed.json
new file mode 100644
index 0000000000000..7433a6c7e9c50
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "radio"
+		},
+		"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=\"radio\" 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=\"radio\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html
new file mode 100644
index 0000000000000..be1ae98e02310
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="radio" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html
new file mode 100644
index 0000000000000..a1c1b58f9b7fc
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html
@@ -0,0 +1,8 @@
+<!-- wp:form-input {"type":"radio"} -->
+<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="radio" name="label" aria-required="false"/>
+	</label>
+</div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.json
new file mode 100644
index 0000000000000..113ce01f7ab7e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "radio",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.parsed.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.parsed.json
new file mode 100644
index 0000000000000..14c7828b1c890
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "radio"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html
new file mode 100644
index 0000000000000..be1ae98e02310
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="radio" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.html b/test/integration/fixtures/blocks/core__form-input__textarea.html
new file mode 100644
index 0000000000000..b39e1c8b51166
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.html
@@ -0,0 +1,3 @@
+<!-- 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">Label</span><textarea class="wp-block-form-input__input" name="label" required aria-required="true"></textarea></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.json b/test/integration/fixtures/blocks/core__form-input__textarea.json
new file mode 100644
index 0000000000000..62ae6f76a0e9d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "textarea",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": true,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.parsed.json b/test/integration/fixtures/blocks/core__form-input__textarea.parsed.json
new file mode 100644
index 0000000000000..3f76a2194f27e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "textarea"
+		},
+		"innerBlocks": [],
+		"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><textarea class=\"wp-block-form-input__input\" name=\"label\" required aria-required=\"true\"></textarea></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><textarea class=\"wp-block-form-input__input\" name=\"label\" required aria-required=\"true\"></textarea></label></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.serialized.html b/test/integration/fixtures/blocks/core__form-input__textarea.serialized.html
new file mode 100644
index 0000000000000..b39e1c8b51166
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.serialized.html
@@ -0,0 +1,3 @@
+<!-- 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">Label</span><textarea class="wp-block-form-input__input" name="label" required aria-required="true"></textarea></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html
new file mode 100644
index 0000000000000..8f7722f81ccc5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html
@@ -0,0 +1,6 @@
+<!-- wp:form-input {"type":"textarea"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<textarea class="wp-block-form-input__input" name="label" aria-required="false"></textarea>
+</label>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.json
new file mode 100644
index 0000000000000..398106d8de1ca
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "textarea",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.parsed.json
new file mode 100644
index 0000000000000..e5e11f26d9960
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "textarea"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<textarea class=\"wp-block-form-input__input\" name=\"label\" aria-required=\"false\"></textarea>\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<textarea class=\"wp-block-form-input__input\" name=\"label\" aria-required=\"false\"></textarea>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html
new file mode 100644
index 0000000000000..530403c4964fa
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+<!-- 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">Label</span><textarea class="wp-block-form-input__input" name="label" aria-required="false"></textarea></label></div>
+<!-- /wp:form-input -->