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,74 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const deprecated = [
+	{
+		supports: {
+			anchor: true,
+			className: false,
+			color: {
+				gradients: true,
+				link: true,
+				__experimentalDefaultControls: {
+					background: true,
+					text: true,
+					link: true,
+				},
+			},
+			spacing: {
+				margin: true,
+				padding: true,
+			},
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontFamily: true,
+				__experimentalTextDecoration: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+				__experimentalLetterSpacing: true,
+				__experimentalTextTransform: true,
+				__experimentalDefaultControls: {
+					fontSize: true,
+				},
+			},
+			__experimentalSelector: 'form',
+		},
+		attributes: {
+			submissionMethod: {
+				type: 'string',
+				default: 'email',
+			},
+			method: {
+				type: 'string',
+				default: 'post',
+			},
+			action: {
+				type: 'string',
+			},
+			email: {
+				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 />