Button: Migrate to text-align block support #73732
Open
+405
−18
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
shimotmk
requested review from
ajitbohra,
fabiankaegy and
juanmaguitar
as code owners
shimotmk
added
[Type] Enhancement
|
Size Change: +366 B (+0.01%) Total Size: 2.57 MB
ℹ️ View Unchanged
|
Mamaduka
reviewed
Dec 4, 2025
Member
Mamaduka
left a comment
Mamaduka
left a comment
There was a problem hiding this comment.
Given the amount of code required to migrate to the block support flag, what's the real benefit here?
Why is the deprecation needed? Because of the missing has-text-align-* class?
| borderProps.className, | ||
| typographyProps.className, | ||
| { | ||
| [ `has-text-align-${ textAlign }` ]: textAlign, |
Member
There was a problem hiding this comment.
This could be considered a breaking change if themes or extenders rely on this class.
Contributor
Author
There was a problem hiding this comment.
The has-text-align-${ textAlign } class is provided by getTypographyClassesAndStyles, so your markup should remain unchanged.
gutenberg/packages/block-editor/src/hooks/use-typography-props.js
Lines 48 to 50 in 2dbaeb1
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
Author
|
Migrate to block support will allow you to set global styles. Once we move to block support, you can set this in global styles. |
youknowriad
reviewed
Dec 8, 2025
| }, | ||
| migrate: migrateTextAlign, | ||
| }; | ||
|
|
Contributor
There was a problem hiding this comment.
A lot of these deprecated versions will become unnecessary after #73116 so I think this is ok for now. and I do think there's a lot of benefits to this unification. (Global Styles support being the important one)
youknowriad
reviewed
Dec 8, 2025
Contributor
There was a problem hiding this comment.
I think we need to add a "migration hook" to the edit function (like we did in the paragraph block) for folks that toggle the old attributes dynamically use updateBlockAttributes action.
Contributor
Author
youknowriad
approved these changes
Dec 9, 2025
Contributor
youknowriad
left a comment
youknowriad
left a comment
There was a problem hiding this comment.
This looks good to me
Mamaduka
reviewed
Dec 9, 2025
| return; | ||
| } | ||
| lastUpdatedAlignRef.current = textAlign; | ||
| updateStyleWithAlign(); |
Member
There was a problem hiding this comment.
You could use a new setter method for setAttributes that removes the need for the useEvent hook and for passing style as an effect dependency.
Contributor
Author
There was a problem hiding this comment.
Thank you! I tried to adjust it, how does this look? 8a32ace
Member
There was a problem hiding this comment.
This is what I had in mind, though it's not a blocker; I just wanted to share.
Example patch
diff --git a/packages/block-library/src/utils/deprecated-text-align-attributes.js b/packages/block-library/src/utils/deprecated-text-align-attributes.js
index 0daa1405bd..4dd591f987 100644
--- a/packages/block-library/src/utils/deprecated-text-align-attributes.js
+++ b/packages/block-library/src/utils/deprecated-text-align-attributes.js
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
-import { useEvent } from '@wordpress/compose';
import { useEffect, useRef } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
import { useDispatch } from '@wordpress/data';
@@ -18,7 +17,12 @@ export default function useDeprecatedTextAlign( props ) {
const { textAlign } = attributes;
const { __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );
- const updateStyleWithAlign = useEvent( () => {
+ const lastUpdatedAlignRef = useRef();
+ useEffect( () => {
+ if ( textAlign === lastUpdatedAlignRef.current ) {
+ return;
+ }
+ lastUpdatedAlignRef.current = textAlign;
deprecated( `textAlign attribute in ${ name }`, {
alternative: 'style.typography.textAlign',
since: '7.0',
@@ -33,13 +37,10 @@ export default function useDeprecatedTextAlign( props ) {
},
},
} ) );
- } );
- const lastUpdatedAlignRef = useRef();
- useEffect( () => {
- if ( textAlign === lastUpdatedAlignRef.current ) {
- return;
- }
- lastUpdatedAlignRef.current = textAlign;
- updateStyleWithAlign();
- }, [ textAlign, updateStyleWithAlign ] );
+ }, [
+ __unstableMarkNextChangeAsNotPersistent,
+ name,
+ setAttributes,
+ textAlign,
+ ] );
}
26 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Part of #60763
Related to #73111
Migrates the Button block to use the textAlign block support instead of a custom
textAlignattribute. As a consequence it also enables global styles support fortextAlignfor the Button block.Why?
The Button block currently implements its own text alignment logic with a custom align attribute, duplicating code that should be handled by the centralized Button block support. This migration reduces code duplication and consolidates alignment handling across blocks.
How?
Replaces the custom logic with the block supports, adds deprecation and fixes transforms.
Just like
migrateFontFamily, I created themigrateTextAlignfunction so that it can be used in other blocks.Testing Instructions