Backward compatibility support for textAlign attribute

shimotmk · shimotmk · commit 1567badb5a30 · 2025-12-09T06:27:31.000+09:00
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -11,6 +11,7 @@ import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { unlock } from '../lock-unlock';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 /**
  * WordPress dependencies
@@ -194,6 +195,7 @@ function ButtonEdit( props ) {
 		width,
 		metadata,
 	} = attributes;
+	useDeprecatedTextAlign( props );
 
 	const TagName = tagName || 'a';
 
diff --git a/packages/block-library/src/utils/deprecated-text-align-attributes.js b/packages/block-library/src/utils/deprecated-text-align-attributes.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useEffect, useRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * If a plugin is still using the old textAlign attribute, we need to migrate its value
+ * to the new style.typography.textAlign attribute.
+ *
+ * @param {Object} props Block props.
+ */
+export default function useDeprecatedTextAlign( props ) {
+	const { name, attributes, setAttributes } = props;
+	const { textAlign, style } = attributes;
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const updateStyleWithAlign = useEvent( () => {
+		deprecated( `textAlign attribute in ${ name }`, {
+			alternative: 'style.typography.textAlign',
+			since: '7.0',
+		} );
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( {
+			style: {
+				...style,
+				typography: {
+					...style?.typography,
+					textAlign,
+				},
+			},
+		} );
+	} );
+	const lastUpdatedAlignRef = useRef();
+	useEffect( () => {
+		if ( textAlign === lastUpdatedAlignRef.current ) {
+			return;
+		}
+		lastUpdatedAlignRef.current = textAlign;
+		updateStyleWithAlign();
+	}, [ textAlign, updateStyleWithAlign ] );
+}
