Post Comments Count: Migrate to text-align block support

docs/reference-guides/core-blocks.md

@@ -674,8 +674,7 @@ Display a post's comments count. ([Source](https://github.com/WordPress/gutenber
 
 -	**Name:** core/post-comments-count
 -	**Category:** theme
--	**Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight, textAlign), ~~html~~
 
 ## Comments Form
 

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

@@ -6,11 +6,6 @@
 	"category": "theme",
 	"description": "Display a post's comments count.",
 	"textdomain": "default",
-	"attributes": {
-		"textAlign": {
-			"type": "string"
-		}
-	},
 	"usesContext": [ "postId" ],
 	"example": {
 		"viewportWidth": 350
@@ -32,6 +27,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

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

@@ -0,0 +1,61 @@
+/**
+ * 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,
+			__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,
+		},
+	},
+	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-count/edit.js

@@ -1,39 +1,24 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import {
-	AlignmentControl,
-	BlockControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
-export default function PostCommentsCountEdit( {
-	attributes,
-	context,
-	setAttributes,
-} ) {
-	const { textAlign } = attributes;
+export default function PostCommentsCountEdit( { context } ) {
 	const { postId } = context;
 	const [ commentsCount, setCommentsCount ] = useState();
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+
+	const blockProps = useBlockProps();
 
 	useEffect( () => {
 		if ( ! postId ) {
 			return;
 		}
+
 		const currentPostId = postId;
+
 		apiFetch( {
 			path: addQueryArgs( '/wp/v2/comments', {
 				post: postId,
@@ -48,6 +33,7 @@ export default function PostCommentsCountEdit( {
 	}, [ postId ] );
 
 	const hasPostAndComments = postId && commentsCount !== undefined;
+
 	const blockStyles = {
 		...blockProps.style,
 		textDecoration: hasPostAndComments
@@ -56,18 +42,8 @@ export default function PostCommentsCountEdit( {
 	};
 
 	return (
-		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
-			<div { ...blockProps } style={ blockStyles }>
-				{ hasPostAndComments ? commentsCount : '0' }
-			</div>
-		</>
+		<div { ...blockProps } style={ blockStyles }>
+			{ hasPostAndComments ? commentsCount : '0' }
+		</div>
 	);
 }

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

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	edit,
 	transforms,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/post-comments-link/transforms.js

@@ -10,7 +10,7 @@ const transforms = {
 			blocks: [ 'core/post-comments-count' ],
 			transform: ( { textAlign } ) => {
 				return createBlock( 'core/post-comments-count', {
-					textAlign,
+					style: { typography: { textAlign } },
 				} );
 			},
 		},

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

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

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

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

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

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

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

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