Theme.json > Styles > Typography > textAlign breaks text alignment options in the block toolbar

[carolinan]

Description

I searched but was not able to find an open issue for this. I was trying to understand how the new textAlignment typography style and settings worked.

With Gutenberg trunk on 6.6 beta 3, if I set a default alignment to a text based block like the site title using theme.json, then I can not change the alignment using the block toolbar.

The CSS that sets the default seems to have a higher specificity and overrides the has-text-align CSS:

:root :where(.wp-block-site-title) {
    text-align: center;
}
.has-text-align-right {
    text-align: right; 
}

Step-by-step reproduction instructions

Activate Gutenberg. Activate Twenty Twenty-Four. Open theme.json replace the styles section with

    "styles": {
        "blocks": {
            "core/site-title": {
                "typography": {
                    "textAlign": "center"
                }
            }
        }
    },

Open the Site Editor and insert a new Site Title block. Confirm that the text in the block is centered. Try adjusting the alignment to left or right using the option in the block toolbar. Confirm that the alignment does not change.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

@carolinan I saw there's a PR (https://github.com/WordPress/gutenberg/pull/62260) from @t-hamano that might address the issue, though I haven't looked too closely!

[t-hamano]

Thanks for the ping. #62260 should solve exactly this issue.