Properly apply styles and classes to the experimental form block

docs/reference-guides/core-blocks.md

@@ -291,7 +291,7 @@ A form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/blo
 -	**Experimental:** true
 -	**Category:** common
 -	**Allowed Blocks:** core/paragraph, core/heading, core/form-input, core/form-submit-button, core/form-submission-notification, core/group, core/columns
--	**Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+-	**Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** action, email, method, submissionMethod
 
 ## Input Field

packages/block-library/src/form/block.json

@@ -36,7 +36,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"className": false,
 		"color": {
 			"gradients": true,
 			"link": true,

packages/block-library/src/form/deprecated.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const v1 = {
+	// The block supports here are deliberately empty despite this
+	// deprecated version of the block having adopted block supports.
+	// The attributes added by these supports have been manually
+	// added to this deprecated version's attributes definition so
+	// that the data isn't lost on migration. All this is so that the
+	// automatic application of block support classes doesn't occur
+	// as this version of the block had a bug that overrode those
+	// classes. If those block support classes are applied during the
+	// deprecation process, this deprecation doesn't match and won't
+	// run.
+	// @see https://github.com/WordPress/gutenberg/pull/55755
+	supports: {},
+	attributes: {
+		submissionMethod: {
+			type: 'string',
+			default: 'email',
+		},
+		method: {
+			type: 'string',
+			default: 'post',
+		},
+		action: {
+			type: 'string',
+		},
+		email: {
+			type: 'string',
+		},
+		// The following attributes have been added to match the block
+		// supports at the time of the deprecation. See above for details.
+		anchor: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		style: {
+			type: 'object',
+		},
+		fontFamily: {
+			type: 'string',
+		},
+		fontSize: {
+			type: 'string',
+		},
+	},
+	save( { attributes } ) {
+		const blockProps = useBlockProps.save();
+		const { submissionMethod } = attributes;
+
+		return (
+			<form
+				{ ...blockProps }
+				className="wp-block-form"
+				encType={ submissionMethod === 'email' ? 'text/plain' : null }
+			>
+				<InnerBlocks.Content />
+			</form>
+		);
+	},
+};
+
+export default [ v1 ];

packages/block-library/src/form/edit.js

@@ -161,7 +161,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			) }
 			<form
 				{ ...innerBlocksProps }
-				className="wp-block-form"
 				encType={ submissionMethod === 'email' ? 'text/plain' : null }
 			/>
 		</>

packages/block-library/src/form/index.js

@@ -6,6 +6,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import variations from './variations';
+import deprecated from './deprecated';
 
 /**
  * WordPress dependencies
@@ -19,6 +20,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	save,
+	deprecated,
 	variations,
 };
 

packages/block-library/src/form/save.js

@@ -10,7 +10,6 @@ export default function save( { attributes } ) {
 	return (
 		<form
 			{ ...blockProps }
-			className="wp-block-form"
 			encType={ submissionMethod === 'email' ? 'text/plain' : null }
 		>
 			<InnerBlocks.Content />