Properly apply styles and classes to the experimental form block

docs/reference-guides/core-blocks.md

@@ -336,7 +336,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,96 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	useBlockProps,
+	getTypographyClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+} 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',
+			source: 'attribute',
+			attribute: 'id',
+			selector: '*',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		style: {
+			type: 'object',
+		},
+		fontFamily: {
+			type: 'string',
+		},
+		fontSize: {
+			type: 'string',
+		},
+	},
+	save( { attributes } ) {
+		const { submissionMethod } = attributes;
+		const colorProps = getColorClassesAndStyles( attributes );
+		const typographyProps = getTypographyClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const blockProps = useBlockProps.save( {
+			// In this deprecated version, the block support is deliberately empty.
+			// As a result, the useBlockProps.save() does not output style or id attributes,
+			// so we apply them explicitly here.
+			style: {
+				...colorProps.style,
+				...typographyProps.style,
+				...spacingProps.style,
+			},
+			id: attributes.anchor,
+		} );
+
+		return (
+			<form
+				{ ...blockProps }
+				className="wp-block-form"
+				encType={ submissionMethod === 'email' ? 'text/plain' : null }
+			>
+				<InnerBlocks.Content />
+			</form>
+		);
+	},
+};
+
+export default [ v1 ];

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,
 	example: {},
 };

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 />

phpunit/class-block-fixture-test.php

@@ -10,6 +10,8 @@ class Block_Fixture_Test extends WP_UnitTestCase {
 	public function filter_allowed_html( $tags ) {
 		$tags['form']['class']   = true;
 		$tags['form']['enctype'] = true;
+		$tags['form']['style']   = true;
+		$tags['form']['id']      = true;
 		return $tags;
 	}
 

test/integration/fixtures/blocks/core__form__deprecated-v1-custom-value.html

@@ -0,0 +1,3 @@
+<!-- wp:form {"className":"custom-class","style":{"elements":{"link":{"color":{"text":"#ff0000"}}},"color":{"text":"#ff0000","background":"#00ffff"},"typography":{"fontSize":"30px"},"spacing":{"padding":{"top":"1px","bottom":"1px","left":"2px","right":"2px"},"margin":{"top":"3px","bottom":"3px","left":"4px","right":"4px"}}}} -->
+<form id="anchor" class="wp-block-form" style="color:#ff0000;background-color:#00ffff;margin-top:3px;margin-right:4px;margin-bottom:3px;margin-left:4px;padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;font-size:30px" enctype="text/plain"></form>
+<!-- /wp:form -->

test/integration/fixtures/blocks/core__form__deprecated-v1-custom-value.json

@@ -0,0 +1,42 @@
+[
+	{
+		"name": "core/form",
+		"isValid": true,
+		"attributes": {
+			"submissionMethod": "email",
+			"method": "post",
+			"anchor": "anchor",
+			"style": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#ff0000"
+						}
+					}
+				},
+				"color": {
+					"text": "#ff0000",
+					"background": "#00ffff"
+				},
+				"typography": {
+					"fontSize": "30px"
+				},
+				"spacing": {
+					"padding": {
+						"top": "1px",
+						"bottom": "1px",
+						"left": "2px",
+						"right": "2px"
+					},
+					"margin": {
+						"top": "3px",
+						"bottom": "3px",
+						"left": "4px",
+						"right": "4px"
+					}
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__form__deprecated-v1-custom-value.parsed.json

@@ -0,0 +1,43 @@
+[
+	{
+		"blockName": "core/form",
+		"attrs": {
+			"className": "custom-class",
+			"style": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#ff0000"
+						}
+					}
+				},
+				"color": {
+					"text": "#ff0000",
+					"background": "#00ffff"
+				},
+				"typography": {
+					"fontSize": "30px"
+				},
+				"spacing": {
+					"padding": {
+						"top": "1px",
+						"bottom": "1px",
+						"left": "2px",
+						"right": "2px"
+					},
+					"margin": {
+						"top": "3px",
+						"bottom": "3px",
+						"left": "4px",
+						"right": "4px"
+					}
+				}
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<form id=\"anchor\" class=\"wp-block-form\" style=\"color:#ff0000;background-color:#00ffff;margin-top:3px;margin-right:4px;margin-bottom:3px;margin-left:4px;padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;font-size:30px\" enctype=\"text/plain\"></form>\n",
+		"innerContent": [
+			"\n<form id=\"anchor\" class=\"wp-block-form\" style=\"color:#ff0000;background-color:#00ffff;margin-top:3px;margin-right:4px;margin-bottom:3px;margin-left:4px;padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;font-size:30px\" enctype=\"text/plain\"></form>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__form__deprecated-v1-custom-value.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:form {"style":{"elements":{"link":{"color":{"text":"#ff0000"}}},"color":{"text":"#ff0000","background":"#00ffff"},"typography":{"fontSize":"30px"},"spacing":{"padding":{"top":"1px","bottom":"1px","left":"2px","right":"2px"},"margin":{"top":"3px","bottom":"3px","left":"4px","right":"4px"}}}} -->
+<form id="anchor" class="wp-block-form has-text-color has-background has-link-color" style="color:#ff0000;background-color:#00ffff;margin-top:3px;margin-right:4px;margin-bottom:3px;margin-left:4px;padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;font-size:30px" enctype="text/plain"></form>
+<!-- /wp:form -->

test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.html

@@ -0,0 +1,3 @@
+<!-- wp:form {"className":"custom-class","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"backgroundColor":"accent-1","textColor":"contrast","fontSize":"x-large"} -->
+<form id="anchor" class="wp-block-form" style="margin-top:var(--wp--preset--spacing--40);margin-right:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)" enctype="text/plain"></form>
+<!-- /wp:form -->

test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.json

@@ -0,0 +1,38 @@
+[
+	{
+		"name": "core/form",
+		"isValid": true,
+		"attributes": {
+			"submissionMethod": "email",
+			"method": "post",
+			"anchor": "anchor",
+			"backgroundColor": "accent-1",
+			"textColor": "contrast",
+			"style": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|contrast"
+						}
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "var:preset|spacing|40",
+						"bottom": "var:preset|spacing|40",
+						"left": "var:preset|spacing|40",
+						"right": "var:preset|spacing|40"
+					},
+					"margin": {
+						"top": "var:preset|spacing|40",
+						"bottom": "var:preset|spacing|40",
+						"left": "var:preset|spacing|40",
+						"right": "var:preset|spacing|40"
+					}
+				}
+			},
+			"fontSize": "x-large"
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.parsed.json

@@ -0,0 +1,39 @@
+[
+	{
+		"blockName": "core/form",
+		"attrs": {
+			"className": "custom-class",
+			"style": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var:preset|color|contrast"
+						}
+					}
+				},
+				"spacing": {
+					"padding": {
+						"top": "var:preset|spacing|40",
+						"bottom": "var:preset|spacing|40",
+						"left": "var:preset|spacing|40",
+						"right": "var:preset|spacing|40"
+					},
+					"margin": {
+						"top": "var:preset|spacing|40",
+						"bottom": "var:preset|spacing|40",
+						"left": "var:preset|spacing|40",
+						"right": "var:preset|spacing|40"
+					}
+				}
+			},
+			"backgroundColor": "accent-1",
+			"textColor": "contrast",
+			"fontSize": "x-large"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<form id=\"anchor\" class=\"wp-block-form\" style=\"margin-top:var(--wp--preset--spacing--40);margin-right:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\" enctype=\"text/plain\"></form>\n",
+		"innerContent": [
+			"\n<form id=\"anchor\" class=\"wp-block-form\" style=\"margin-top:var(--wp--preset--spacing--40);margin-right:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\" enctype=\"text/plain\"></form>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:form {"backgroundColor":"accent-1","textColor":"contrast","fontSize":"x-large","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}}} -->
+<form id="anchor" class="wp-block-form has-contrast-color has-accent-1-background-color has-text-color has-background has-link-color has-x-large-font-size" style="margin-top:var(--wp--preset--spacing--40);margin-right:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)" enctype="text/plain"></form>
+<!-- /wp:form -->