Query Title: Migrate to Text-Align Block Support

docs/reference-guides/core-blocks.md

@@ -866,8 +866,8 @@ Display the query title. ([Source](https://github.com/WordPress/gutenberg/tree/t
 
 -	**Name:** core/query-title
 -	**Category:** theme
--	**Supports:** align (full, wide), anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, levelOptions, showPrefix, showSearchTerm, textAlign, type
+-	**Supports:** align (full, wide), anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight, textAlign), ~~html~~
+-	**Attributes:** level, levelOptions, showPrefix, showSearchTerm, type
 
 ## Query Total
 

packages/block-library/src/query-title/block.json

@@ -10,9 +10,6 @@
 		"type": {
 			"type": "string"
 		},
-		"textAlign": {
-			"type": "string"
-		},
 		"level": {
 			"type": "number",
 			"default": 1
@@ -53,6 +50,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,

packages/block-library/src/query-title/deprecated.js

@@ -2,6 +2,79 @@
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v2 = {
+	attributes: {
+		type: {
+			type: 'string',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+			default: 1,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			padding: true,
+			margin: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: 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,
+};
 
 const v1 = {
 	attributes: {
@@ -48,4 +121,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1 ];
+export default [ v2, v1 ];

packages/block-library/src/query-title/edit.js

@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import {
-	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
@@ -27,31 +21,27 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { useArchiveLabel } from './use-archive-label';
 import { usePostTypeLabel } from './use-post-type-label';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 const SUPPORTED_TYPES = [ 'archive', 'search', 'post-type' ];
 
-export default function QueryTitleEdit( {
-	attributes: {
-		type,
-		level,
-		levelOptions,
-		textAlign,
-		showPrefix,
-		showSearchTerm,
-	},
-	setAttributes,
-	context: { query },
-} ) {
+export default function QueryTitleEdit( props ) {
+	useDeprecatedTextAlign( props );
+
+	const {
+		attributes: { type, level, levelOptions, showPrefix, showSearchTerm },
+		setAttributes,
+		context: { query },
+	} = props;
+
 	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
 	const { postTypeLabel } = usePostTypeLabel( query?.postType );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 
 	const blockProps = useBlockProps( {
-		className: clsx( 'wp-block-query-title__placeholder', {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
+		className: 'wp-block-query-title__placeholder',
 	} );
 
 	if ( ! SUPPORTED_TYPES.includes( type ) ) {
@@ -239,12 +229,6 @@ export default function QueryTitleEdit( {
 						setAttributes( { level: newLevel } )
 					}
 				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
 			</BlockControls>
 			{ titleElement }
 		</>

test/integration/fixtures/blocks/core__query-title__deprecated-v2.html

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

test/integration/fixtures/blocks/core__query-title__deprecated-v2.json

@@ -0,0 +1,41 @@
+[
+	{
+		"name": "core/query-title",
+		"isValid": true,
+		"attributes": {
+			"level": 1,
+			"style": {
+				"typography": {
+					"textAlign": "left"
+				}
+			}
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/query-title",
+		"isValid": true,
+		"attributes": {
+			"level": 1,
+			"style": {
+				"typography": {
+					"textAlign": "center"
+				}
+			}
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/query-title",
+		"isValid": true,
+		"attributes": {
+			"level": 1,
+			"style": {
+				"typography": {
+					"textAlign": "right"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__query-title__deprecated-v2.parsed.json

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

test/integration/fixtures/blocks/core__query-title__deprecated-v2.serialized.html

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