Term Description: Migrate to Text-Align Block Support (#75542)

Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

Author: 3 people

docs/reference-guides/core-blocks.md

@@ -1091,8 +1091,7 @@ Display the description of categories, tags and custom taxonomies when viewing a
 
 -	**Name:** core/term-description
 -	**Category:** theme
--	**Supports:** align (full, wide), anchor, color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Supports:** align (full, wide), anchor, color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight, textAlign), ~~html~~
 
 ## Term Name
 

packages/block-library/src/term-description/block.json

@@ -7,11 +7,6 @@
 	"description": "Display the description of categories, tags and custom taxonomies when viewing an archive.",
 	"textdomain": "default",
 	"usesContext": [ "termId", "taxonomy" ],
-	"attributes": {
-		"textAlign": {
-			"type": "string"
-		}
-	},
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
@@ -30,6 +25,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

packages/block-library/src/term-description/deprecated.js

@@ -0,0 +1,68 @@
+/**
+ * Internal dependencies
+ */
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: 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/term-description/edit.js

@@ -1,49 +1,22 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	useBlockProps,
-	BlockControls,
-	AlignmentControl,
-} from '@wordpress/block-editor';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { useTermDescription } from './use-term-description';
 
 export default function TermDescriptionEdit( {
-	attributes,
-	setAttributes,
-	mergedStyle,
 	context: { termId, taxonomy },
 } ) {
-	const { textAlign } = attributes;
 	const { termDescription } = useTermDescription( termId, taxonomy );
-
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-		style: mergedStyle,
-	} );
+	const blockProps = useBlockProps();
 
 	return (
 		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
 			<div { ...blockProps }>
 				{ termDescription ? (
 					<div

packages/block-library/src/term-description/index.js

@@ -9,6 +9,7 @@ import { termDescription 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 };
@@ -17,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	example: {},
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

test/integration/fixtures/blocks/core__term-description__deprecated-v1.html

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

test/integration/fixtures/blocks/core__term-description__deprecated-v1.json

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

test/integration/fixtures/blocks/core__term-description__deprecated-v1.parsed.json

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

test/integration/fixtures/blocks/core__term-description__deprecated-v1.serialized.html

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