[Heading Block] Fix double alignment controls in toolbar (#26492)

* fix heading alignments

* add proper supports in deprecation

* update all previous deprecations

* regenerate fixtures for heading

* change migration call

* remove previous className + revert saves

* Revert "regenerate fixtures for heading"

This reverts commit 27af8c3.

* change fixtures

* create new fixtures + fix deprecation save

* address review feedback

packages/block-library/src/heading/block.json

@@ -3,7 +3,7 @@
 	"name": "core/heading",
 	"category": "text",
 	"attributes": {
-		"align": {
+		"textAlign": {
 			"type": "string"
 		},
 		"content": {

packages/block-library/src/heading/deprecated.js

@@ -7,7 +7,11 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { getColorClassName, RichText } from '@wordpress/block-editor';
+import {
+	getColorClassName,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
 
 const blockSupports = {
 	className: false,
@@ -48,7 +52,52 @@ const migrateCustomColors = ( attributes ) => {
 	};
 };
 
+const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];
+
+const migrateTextAlign = ( attributes ) => {
+	const { align, ...rest } = attributes;
+	return TEXT_ALIGN_OPTIONS.includes( align )
+		? { ...rest, textAlign: align }
+		: attributes;
+};
+
 const deprecated = [
+	{
+		supports: {
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			className: false,
+			color: { link: true },
+			fontSize: true,
+			lineHeight: true,
+			__experimentalSelector: {
+				'core/heading/h1': 'h1',
+				'core/heading/h2': 'h2',
+				'core/heading/h3': 'h3',
+				'core/heading/h4': 'h4',
+				'core/heading/h5': 'h5',
+				'core/heading/h6': 'h6',
+			},
+			__unstablePasteTextInline: true,
+		},
+		attributes: blockAttributes,
+		isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+		migrate: migrateTextAlign,
+		save( { attributes } ) {
+			const { align, content, level } = attributes;
+			const TagName = 'h' + level;
+
+			const className = classnames( {
+				[ `has-text-align-${ align }` ]: align,
+			} );
+
+			return (
+				<TagName { ...useBlockProps.save( { className } ) }>
+					<RichText.Content value={ content } />
+				</TagName>
+			);
+		},
+	},
 	{
 		supports: blockSupports,
 		attributes: {
@@ -60,7 +109,8 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: migrateCustomColors,
+		migrate: ( attributes ) =>
+			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
 			const {
 				align,
@@ -101,7 +151,8 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: migrateCustomColors,
+		migrate: ( attributes ) =>
+			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
 			const {
 				align,
@@ -143,7 +194,8 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: migrateCustomColors,
+		migrate: ( attributes ) =>
+			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
 			const {
 				align,

packages/block-library/src/heading/edit.js

@@ -28,11 +28,11 @@ function HeadingEdit( {
 	onReplace,
 	mergedStyle,
 } ) {
-	const { align, content, level, placeholder } = attributes;
+	const { textAlign, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
 		className: classnames( {
-			[ `has-text-align-${ align }` ]: align,
+			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style: mergedStyle,
 	} );
@@ -49,9 +49,9 @@ function HeadingEdit( {
 					/>
 				</ToolbarGroup>
 				<AlignmentToolbar
-					value={ align }
+					value={ textAlign }
 					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
+						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
 			</BlockControls>
@@ -74,7 +74,7 @@ function HeadingEdit( {
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
 				placeholder={ placeholder || __( 'Write heading…' ) }
-				textAlign={ align }
+				textAlign={ textAlign }
 				{ ...blockProps }
 			/>
 		</>

packages/block-library/src/heading/save.js

@@ -9,11 +9,11 @@ import classnames from 'classnames';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { align, content, level } = attributes;
+	const { textAlign, content, level } = attributes;
 	const TagName = 'h' + level;
 
 	const className = classnames( {
-		[ `has-text-align-${ align }` ]: align,
+		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
 	return (

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.json

@@ -4,9 +4,9 @@
         "name": "core/heading",
         "isValid": true,
         "attributes": {
-            "align": "right",
             "content": "A picture is worth a thousand words, or so the saying goes",
-            "level": 3
+            "level": 3,
+            "textAlign": "right"
         },
         "innerBlocks": [],
         "originalContent": "<h3 style=\"text-align:right\">A picture is worth a thousand words, or so the saying goes</h3>"

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-1.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:heading {"align":"right","level":3} -->
+<!-- wp:heading {"textAlign":"right","level":3} -->
 <h3 class="has-text-align-right">A picture is worth a thousand words, or so the saying goes</h3>
 <!-- /wp:heading -->

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.html

@@ -0,0 +1,4 @@
+<!-- wp:heading {"textColor":"accent","align":"center"} -->
+<h2 class="has-accent-color has-text-color has-text-align-center">Text</h2>
+<!-- /wp:heading -->
+

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.json

@@ -0,0 +1,15 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/heading",
+        "isValid": true,
+        "attributes": {
+            "content": "Text",
+            "level": 2,
+            "textColor": "accent",
+            "textAlign": "center"
+        },
+        "innerBlocks": [],
+        "originalContent": "<h2 class=\"has-accent-color has-text-color has-text-align-center\">Text</h2>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.parsed.json

@@ -0,0 +1,23 @@
+[
+    {
+        "blockName": "core/heading",
+        "attrs": {
+            "textColor": "accent",
+            "align": "center"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<h2 class=\"has-accent-color has-text-color has-text-align-center\">Text</h2>\n",
+        "innerContent": [
+            "\n<h2 class=\"has-accent-color has-text-color has-text-align-center\">Text</h2>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n\n",
+        "innerContent": [
+            "\n\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__heading__deprecated-4.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:heading {"textAlign":"center","textColor":"accent"} -->
+<h2 class="has-text-align-center has-accent-color has-text-color">Text</h2>
+<!-- /wp:heading -->

packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.html

@@ -0,0 +1,3 @@
+<!-- wp:heading {"textAlign":"center","align":"wide"} -->
+<h2 class="alignwide has-text-align-center">Text</h2>
+<!-- /wp:heading -->

packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.json

@@ -0,0 +1,15 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/heading",
+        "isValid": true,
+        "attributes": {
+            "textAlign": "center",
+            "content": "Text",
+            "level": 2,
+            "align": "wide"
+        },
+        "innerBlocks": [],
+        "originalContent": "<h2 class=\"alignwide has-text-align-center\">Text</h2>"
+    }
+]

packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.parsed.json

@@ -0,0 +1,23 @@
+[
+    {
+        "blockName": "core/heading",
+        "attrs": {
+            "textAlign": "center",
+            "align": "wide"
+        },
+        "innerBlocks": [],
+        "innerHTML": "\n<h2 class=\"alignwide has-text-align-center\">Text</h2>\n",
+        "innerContent": [
+            "\n<h2 class=\"alignwide has-text-align-center\">Text</h2>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__heading_align-textalign.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:heading {"textAlign":"center","align":"wide"} -->
+<h2 class="alignwide has-text-align-center">Text</h2>
+<!-- /wp:heading -->