Properly apply styles and classes to the experimental form block

docs/reference-guides/core-blocks.md

@@ -284,7 +284,7 @@ A form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/blo
 -	**Name:** core/form
 -	**Experimental:** true
 -	**Category:** common
--	**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,75 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const deprecated = [
+	{
+		// 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.
+			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 deprecated;

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 @@ const Save = ( { attributes } ) => {
 	return (
 		<form
 			{ ...blockProps }
-			className="wp-block-form"
 			encType={ submissionMethod === 'email' ? 'text/plain' : null }
 		>
 			<InnerBlocks.Content />