Heading: Migrate to text-align block support

docs/reference-guides/core-blocks.md

@@ -408,8 +408,8 @@ Introduce new sections and organize content to help visitors (and search engines
 
 -	**Name:** core/heading
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight)
--	**Attributes:** content, level, levelOptions, placeholder, textAlign
+-	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fitText, fontSize, lineHeight, textAlign)
+-	**Attributes:** content, level, levelOptions, placeholder
 
 ## Home Link
 

packages/block-library/src/block-keyboard-shortcuts/index.js

@@ -54,15 +54,12 @@ function BlockKeyboardShortcuts() {
 		const sourceTextAlign =
 			attributes.textAlign || attributes.style?.typography?.textAlign;
 
-		// When destination is heading, preserve heading format (textAlign attribute + level)
-		// When destination is paragraph, use block support format (style.typography.textAlign)
+		// When destination is heading, set the level
 		if ( destinationBlockName === 'core/heading' ) {
 			newAttributes.level = level;
-			if ( sourceTextAlign ) {
-				newAttributes.textAlign = sourceTextAlign;
-			}
-		} else if ( sourceTextAlign ) {
-			// Destination is paragraph
+		}
+
+		if ( sourceTextAlign ) {
 			newAttributes.style = {
 				typography: {
 					textAlign: sourceTextAlign,

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

@@ -8,9 +8,6 @@
 	"keywords": [ "title", "subtitle" ],
 	"textdomain": "default",
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"content": {
 			"type": "rich-text",
 			"source": "rich-text",
@@ -58,6 +55,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,

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

@@ -12,6 +12,11 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import migrateTextAlignV2 from '../utils/migrate-text-align';
+
 const blockSupports = {
 	className: false,
 	anchor: true,
@@ -75,7 +80,9 @@ const v1 = {
 		},
 	},
 	migrate: ( attributes ) =>
-		migrateCustomColors( migrateTextAlign( attributes ) ),
+		migrateTextAlignV2(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, level, content, textColor, customTextColor } =
 			attributes;
@@ -111,7 +118,9 @@ const v2 = {
 		},
 	},
 	migrate: ( attributes ) =>
-		migrateCustomColors( migrateTextAlign( attributes ) ),
+		migrateTextAlignV2(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, content, customTextColor, level, textColor } =
 			attributes;
@@ -149,7 +158,9 @@ const v3 = {
 		},
 	},
 	migrate: ( attributes ) =>
-		migrateCustomColors( migrateTextAlign( attributes ) ),
+		migrateTextAlignV2(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, content, customTextColor, level, textColor } =
 			attributes;
@@ -195,7 +206,10 @@ const v4 = {
 	},
 	attributes: blockAttributes,
 	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
-	migrate: migrateTextAlign,
+	migrate: ( attributes ) =>
+		migrateTextAlignV2(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
 	save( { attributes } ) {
 		const { align, content, level } = attributes;
 		const TagName = 'h' + level;
@@ -283,8 +297,107 @@ const v5 = {
 			</TagName>
 		);
 	},
+	migrate: ( attributes ) =>
+		migrateTextAlignV2(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
+};
+
+const v6 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: true,
+		splitting: true,
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalWritingMode: true,
+			fitText: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSlashInserter: true,
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'h1,h2,h3,h4,h5,h6',
+			default: '',
+			role: 'content',
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	save( { attributes } ) {
+		const { textAlign, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+	migrate: ( attributes ) =>
+		migrateTextAlignV2(
+			migrateCustomColors( migrateTextAlign( attributes ) )
+		),
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
 };
 
-const deprecated = [ v5, v4, v3, v2, v1 ];
+const deprecated = [ v6, v5, v4, v3, v2, v1 ];
 
 export default deprecated;

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

@@ -1,45 +1,30 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, Platform } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	AlignmentControl,
-	BlockControls,
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
-	useBlockEditingMode,
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { generateAnchor, setAnchor } from './autogenerate-anchors';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-function HeadingEdit( {
-	attributes,
-	setAttributes,
-	mergeBlocks,
-	onReplace,
-	style,
-	clientId,
-} ) {
-	const { textAlign, content, level, placeholder, anchor } = attributes;
+function HeadingEdit( props ) {
+	const { attributes, setAttributes, mergeBlocks, onReplace, clientId } =
+		props;
+	useDeprecatedTextAlign( props );
+	const { style, content, level, placeholder, anchor } = attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
 		style,
 	} );
-	const blockEditingMode = useBlockEditingMode();
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
 		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
@@ -90,16 +75,6 @@ function HeadingEdit( {
 
 	return (
 		<>
-			{ blockEditingMode === 'default' && (
-				<BlockControls group="block">
-					<AlignmentControl
-						value={ textAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { textAlign: nextAlign } );
-						} }
-					/>
-				</BlockControls>
-			) }
 			<RichText
 				identifier="content"
 				tagName={ tagName }
@@ -109,7 +84,6 @@ function HeadingEdit( {
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
 				placeholder={ placeholder || __( 'Heading' ) }
-				textAlign={ textAlign }
 				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
 				{ ...blockProps }
 			/>

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

@@ -32,7 +32,14 @@ function HeadingEdit( {
 	style,
 	clientId,
 } ) {
-	const { textAlign, content, level, placeholder, anchor } = attributes;
+	const {
+		content,
+		level,
+		placeholder,
+		anchor,
+		style: attributesStyle,
+	} = attributes;
+	const textAlign = attributesStyle?.typography?.textAlign;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
 		className: clsx( {
@@ -100,7 +107,15 @@ function HeadingEdit( {
 				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
+						setAttributes( {
+							style: {
+								...attributesStyle,
+								typography: {
+									...attributesStyle?.typography,
+									textAlign: nextAlign,
+								},
+							},
+						} );
 					} }
 				/>
 			</BlockControls>

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

@@ -1,23 +1,14 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { textAlign, content, level } = attributes;
+	const { content, level } = attributes;
 	const TagName = 'h' + level;
 
-	const className = clsx( {
-		[ `has-text-align-${ textAlign }` ]: textAlign,
-	} );
-
 	return (
-		<TagName { ...useBlockProps.save( { className } ) }>
+		<TagName { ...useBlockProps.save() }>
 			<RichText.Content value={ content } />
 		</TagName>
 	);

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

@@ -29,7 +29,13 @@ const transforms = {
 						),
 						content,
 						anchor,
-						textAlign,
+						...( textAlign && {
+							style: {
+								typography: {
+									textAlign,
+								},
+							},
+						} ),
 					} );
 				} ),
 		},
@@ -64,7 +70,13 @@ const transforms = {
 					textAlign === 'center' ||
 					textAlign === 'right'
 				) {
-					attributes.align = textAlign;
+					attributes.style = {
+						...attributes.style,
+						typography: {
+							...attributes.style?.typography,
+							textAlign,
+						},
+					};
 				}
 
 				return createBlock( 'core/heading', attributes );
@@ -93,7 +105,8 @@ const transforms = {
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
 				attributes.map( ( _attributes ) => {
-					const { content, textAlign } = _attributes;
+					const { content, style } = _attributes;
+					const textAlign = style?.typography?.textAlign;
 					return createBlock( 'core/paragraph', {
 						...getTransformedAttributes(
 							_attributes,