diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
index 9cd49d5b0011be..451cc704a42d55 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 ;
+ }
+
+ return (
+
+ { /* eslint-disable jsx-a11y/label-has-associated-control */ }
+
+ { /* eslint-enable jsx-a11y/label-has-associated-control */ }
+
+ );
+ },
+};
+
// 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 6939443011ee5b..5f3713e83975f1 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 = (
+ 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,
} ) }
>
-
- setAttributes( { label: newLabel } )
- }
- aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
- data-empty={ label ? false : true }
- placeholder={ __( 'Type the label for this input' ) }
- />
+ { ! isCheckboxOrRadio && content }
+ { isCheckboxOrRadio && content }
);
diff --git a/packages/block-library/src/form-input/save.js b/packages/block-library/src/form-input/save.js
index c408e06923ca9f..941c23dc2014d1 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 ;
}
@@ -67,9 +70,11 @@ export default function save( { attributes } ) {
'is-label-inline': inlineLabel,
} ) }
>
-
-
-
+ { ! isCheckboxOrRadio && (
+
+
+
+ ) }
+ { isCheckboxOrRadio && (
+
+
+
+ ) }
{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
diff --git a/packages/block-library/src/form-input/style.scss b/packages/block-library/src/form-input/style.scss
index f9e1753cf0a7b7..7b1ac53cc89c01 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 33f1fe88c2c6a1..81ff6cf53534e8 100644
--- a/test/integration/fixtures/blocks/core__form-input.html
+++ b/test/integration/fixtures/blocks/core__form-input.html
@@ -1,3 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/integration/fixtures/blocks/core__form-input.json b/test/integration/fixtures/blocks/core__form-input.json
index fee4df284f1156..2d9865ef735562 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 5470c653c403b5..439943df2841c8 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\n"
]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "email"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "number"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "tel"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "url"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
}
]
diff --git a/test/integration/fixtures/blocks/core__form-input.serialized.html b/test/integration/fixtures/blocks/core__form-input.serialized.html
index 33f1fe88c2c6a1..d66cedcf9215b8 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 00000000000000..fd08525a17eb33
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..cc86ecd2a9080b
--- /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 00000000000000..60b7b7dd37b091
--- /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\n",
+ "innerContent": [
+ "\n\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 00000000000000..fd08525a17eb33
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..bd64e201e19185
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html
@@ -0,0 +1,7 @@
+
+
+
+
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 00000000000000..162304dc84b0c2
--- /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 00000000000000..2a2490e5c12607
--- /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\n",
+ "innerContent": [
+ "\n\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 00000000000000..66705934019701
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..3f1de1c6028470
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html
@@ -0,0 +1,8 @@
+
+
+
+
+
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 00000000000000..162304dc84b0c2
--- /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 00000000000000..dfa57c0755f685
--- /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\n\t\n
\n",
+ "innerContent": [
+ "\n\n\t\n
\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 00000000000000..66705934019701
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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 08ea6618386200..5f043b0b2ef644 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 fee4df284f1156..2d9865ef735562 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 645337cbfdb4a1..963614974675d5 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\n"
]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n\n",
+ "innerContent": [ "\n\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "email"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "number"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "tel"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/form-input",
+ "attrs": {
+ "type": "url"
+ },
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\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 33f1fe88c2c6a1..d66cedcf9215b8 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 00000000000000..1e6c76424334fb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..18cec11e3305b1
--- /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 00000000000000..8dbb5b5a09942a
--- /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\n",
+ "innerContent": [
+ "\n\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 00000000000000..1e6c76424334fb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..8c41e02f10f04a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html
@@ -0,0 +1,7 @@
+
+
+
+
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 00000000000000..113ce01f7ab7ef
--- /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 00000000000000..7433a6c7e9c508
--- /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\n",
+ "innerContent": [
+ "\n\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 00000000000000..be1ae98e023107
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..a1c1b58f9b7fc5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html
@@ -0,0 +1,8 @@
+
+
+
+
+
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 00000000000000..113ce01f7ab7ef
--- /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 00000000000000..14c7828b1c890d
--- /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\n\t\n
\n",
+ "innerContent": [
+ "\n\n\t\n
\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 00000000000000..be1ae98e023107
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..b39e1c8b51166f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..62ae6f76a0e9d2
--- /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 00000000000000..3f76a2194f27e4
--- /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\n",
+ "innerContent": [
+ "\n\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 00000000000000..b39e1c8b51166f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.serialized.html
@@ -0,0 +1,3 @@
+
+
+
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 00000000000000..8f7722f81ccc57
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html
@@ -0,0 +1,6 @@
+
+
+
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 00000000000000..398106d8de1caf
--- /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 00000000000000..e5e11f26d99606
--- /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\n",
+ "innerContent": [
+ "\n\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 00000000000000..530403c4964fae
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+
+
+