Heading: Migrate to text-align block support #74383
Open
+324
−83
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,
juanmaguitar and
tellthemachines
as code owners
|
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. |
github-actions
bot
added
[Package] Block library
shimotmk
commented
Jan 6, 2026
shimotmk
added
[Block] Heading
|
Size Change: +39 B (0%) Total Size: 3.08 MB
ℹ️ View Unchanged
|
t-hamano
reviewed
Jan 8, 2026
test/integration/fixtures/blocks/core__heading_align-textalign__deprecated-1.html
Outdated
Show resolved
Hide resolved
| content, | ||
| anchor, | ||
| textAlign, | ||
| ...( textAlign && { |
Contributor
There was a problem hiding this comment.
Will it still work if we delete ...( textAlign?
content,
anchor,
style: {
typography: {
textAlign,
},
},
Contributor
Author
There was a problem hiding this comment.
Without this code, transforms didn't work the same as before.
The test "should preserve the text align block support" failed.
gutenberg/test/e2e/specs/editor/blocks/heading.spec.js
Lines 419 to 435 in 47d7e07
Contributor
There was a problem hiding this comment.
I can't reproduce the problem in my environment.
diff --git a/packages/block-library/src/heading/transforms.js b/packages/block-library/src/heading/transforms.js
index 3554f52ff2..d616051bd7 100644
--- a/packages/block-library/src/heading/transforms.js
+++ b/packages/block-library/src/heading/transforms.js
@@ -29,13 +29,11 @@ const transforms = {
),
content,
anchor,
- ...( textAlign && {
- style: {
- typography: {
- textAlign,
- },
+ style: {
+ typography: {
+ textAlign,
},
- } ),
+ },
} );
} ),
},
@@ -116,13 +114,11 @@ const transforms = {
} )
),
content,
- ...( textAlign && {
- style: {
- typography: {
- textAlign,
- },
+ style: {
+ typography: {
+ textAlign,
},
- } ),
+ },
} );
} ),
},After applying the above changes,
npm run test:e2e -- test/e2e/specs/editor/blocks/heading.spec.js --grep "should preserve the text align block support"
I ran the e2e tests and they seem to pass.
Contributor
There was a problem hiding this comment.
This change seems to have caused other tests to fail, so it might be better to revert to the previous implementation. Sorry for the confusion 🙏
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Contributor
Author
|
@t-hamano |
t-hamano
reviewed
Jan 10, 2026
Comment on lines
1
to
11
| <!-- wp:heading {"style":{"typography":{"textAlign":"right"}},"textColor":"primary"} --> | ||
| <h2 class="wp-block-heading has-text-align-right has-primary-color has-text-color">Text 1</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:heading {"style":{"typography":{"textAlign":"center"}},"textColor":"primary"} --> | ||
| <h2 class="wp-block-heading has-text-align-center has-primary-color has-text-color">Text 2</h2> | ||
| <!-- /wp:heading --> | ||
|
|
||
| <!-- wp:heading {"style":{"typography":{"textAlign":"left"}},"textColor":"primary"} --> | ||
| <h2 class="wp-block-heading has-text-align-left has-primary-color has-text-color">Text</h2> | ||
| <!-- /wp:heading --> |
Contributor
There was a problem hiding this comment.
Suggested change
| <!-- wp:heading {"style":{"typography":{"textAlign":"right"}},"textColor":"primary"} --> | |
| <h2 class="wp-block-heading has-text-align-right has-primary-color has-text-color">Text 1</h2> | |
| <!-- /wp:heading --> | |
| <!-- wp:heading {"style":{"typography":{"textAlign":"center"}},"textColor":"primary"} --> | |
| <h2 class="wp-block-heading has-text-align-center has-primary-color has-text-color">Text 2</h2> | |
| <!-- /wp:heading --> | |
| <!-- wp:heading {"style":{"typography":{"textAlign":"left"}},"textColor":"primary"} --> | |
| <h2 class="wp-block-heading has-text-align-left has-primary-color has-text-color">Text</h2> | |
| <!-- /wp:heading --> | |
| <!-- wp:heading {"textAlign":"left"} --> | |
| <h2 class="wp-block-heading has-text-align-left">Heading</h2> | |
| <!-- /wp:heading --> | |
| <!-- wp:heading {"textAlign":"center"} --> | |
| <h2 class="wp-block-heading has-text-align-left">Heading</h2> | |
| <!-- /wp:heading --> | |
| <!-- wp:heading {"textAlign":"right"} --> | |
| <h2 class="wp-block-heading has-text-align-left">Heading</h2> | |
| <!-- /wp:heading --> |
- This fixture tests the migration of the textAlign attribute to textAlign block support, so markup must be tested with the old
textAlignattribute. - The
textColoris not relevant to what we want to test in this PR.
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
Migrates the
Headingblock to use the textAlign block support instead of a customtextAlignattribute. As a consequence it also enables global styles support fortextAlignfor theHeading.Why?
The
Headingblock currently implements its own text alignment logic with a custom align attribute, duplicating code that should be handled by the centralizedHeadingblock 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.
Testing Instructions
Headingblock and test text alignment (left, center, right)Headingblocks that have alignment set