Post Comments Form: Migrate to text-align block support

docs/reference-guides/core-blocks.md

@@ -683,8 +683,7 @@ Display a post's comments form. ([Source](https://github.com/WordPress/gutenberg
 
 -	**Name:** core/post-comments-form
 -	**Category:** theme
--	**Supports:** anchor, color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Supports:** anchor, color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight, textAlign), ~~html~~
 
 ## Comments Link
 

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

@@ -6,11 +6,6 @@
 	"category": "theme",
 	"description": "Display a post's comments form.",
 	"textdomain": "default",
-	"attributes": {
-		"textAlign": {
-			"type": "string"
-		}
-	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
@@ -31,6 +26,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
@@ -60,7 +56,11 @@
 	],
 	"example": {
 		"attributes": {
-			"textAlign": "center"
+			"style": {
+				"typography": {
+					"textAlign": "center"
+				}
+			}
 		}
 	}
 }

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

@@ -0,0 +1,69 @@
+/**
+ * Internal dependencies
+ */
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		color: {
+			gradients: true,
+			heading: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+	save: () => null,
+};
+
+export default [ v1 ];

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

@@ -1,16 +1,7 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import {
-	AlignmentControl,
-	BlockControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -20,40 +11,22 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import CommentsForm from './form';
 
-export default function PostCommentsFormEdit( {
-	attributes,
-	context,
-	setAttributes,
-} ) {
-	const { textAlign } = attributes;
+export default function PostCommentsFormEdit( { context } ) {
 	const { postId, postType } = context;
 
 	const instanceId = useInstanceId( PostCommentsFormEdit );
 	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );
 
 	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
 		'aria-describedby': instanceIdDesc,
 	} );
 
 	return (
-		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
-			<div { ...blockProps }>
-				<CommentsForm postId={ postId } postType={ postType } />
-				<VisuallyHidden id={ instanceIdDesc }>
-					{ __( 'Comments form disabled in editor.' ) }
-				</VisuallyHidden>
-			</div>
-		</>
+		<div { ...blockProps }>
+			<CommentsForm postId={ postId } postType={ postType } />
+			<VisuallyHidden id={ instanceIdDesc }>
+				{ __( 'Comments form disabled in editor.' ) }
+			</VisuallyHidden>
+		</div>
 	);
 }

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

@@ -9,13 +9,15 @@ import { postCommentsForm as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
 	icon,
 	edit,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

test/integration/fixtures/blocks/core__post-comments-form__deprecated-v1.html

@@ -0,0 +1,5 @@
+<!-- wp:post-comments-form {"textAlign":"left"} /-->
+
+<!-- wp:post-comments-form {"textAlign":"center"} /-->
+
+<!-- wp:post-comments-form {"textAlign":"right"} /-->

test/integration/fixtures/blocks/core__post-comments-form__deprecated-v1.json

@@ -0,0 +1,38 @@
+[
+	{
+		"name": "core/post-comments-form",
+		"isValid": true,
+		"attributes": {
+			"style": {
+				"typography": {
+					"textAlign": "left"
+				}
+			}
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/post-comments-form",
+		"isValid": true,
+		"attributes": {
+			"style": {
+				"typography": {
+					"textAlign": "center"
+				}
+			}
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/post-comments-form",
+		"isValid": true,
+		"attributes": {
+			"style": {
+				"typography": {
+					"textAlign": "right"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__post-comments-form__deprecated-v1.parsed.json

@@ -0,0 +1,43 @@
+[
+	{
+		"blockName": "core/post-comments-form",
+		"attrs": {
+			"textAlign": "left"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/post-comments-form",
+		"attrs": {
+			"textAlign": "center"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/post-comments-form",
+		"attrs": {
+			"textAlign": "right"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__post-comments-form__deprecated-v1.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:post-comments-form {"style":{"typography":{"textAlign":"left"}}} /-->
+
+<!-- wp:post-comments-form {"style":{"typography":{"textAlign":"center"}}} /-->
+
+<!-- wp:post-comments-form {"style":{"typography":{"textAlign":"right"}}} /-->