Button Block: Alignment options not reflected on the front end

[AtrumGeost]

Describe the bug
The mobile app allows to align buttons, the alignment works inside the editor but when previewing the post the alignment is not applied.

To Reproduce
Steps to reproduce the behavior:

1. On a blog post add the Buttons block
2. Select the Buttons parent block and set the alignment to center or right.
3. Notice the alignment is applied inside the editor
4. Preview the post and notice the alignment is not applied

Expected behavior
For the preview to show the same alignment as in the editor

Screenshots

Video from user (iPad):

RPReplay_Final1641729227.mp4

Video from testing (iPhone):

RPReplay_Final1641731546-opt.mp4

Smartphone (please complete the following information):
Data from my testing

• Device: iPhone Xs
• OS: iOS 15.1
• Version 18.8

Additional context
User report: 4655574-zd-woothemes

[hypest]

👋 @fluiddot , can you take a look at this one? I can replicate the issue on WPAndroid too (v18.9-rc-2), and it looks like the alignment option is not persisting (I can replicate even by just exiting or updating the post, without going to the preview). Thanks!

I marked the ticket as "[Pri] High" since it's about content/setting not persisting.

[fluiddot]

I've reproduced this issue also in iOS (18.9) and Android (18.9), and I confirm that the alignment options are not being saved when edited in the native version. I also observed that alignment options are neither reflected in the native version when changed in the web editor.

I'll take a deeper look at the code in case this is a breakage coming from recent changes 👀 .

[fluiddot]

Looks like this issue was introduced in this PR, as the contentJustification (which controls the horizontal alignment) and orientation attributes, used in the native version of the Buttons block (reference), were removed from the block schema (reference). I need to check further how this works now in the web version, in order to figure out a potential workaround this change in the native version of the editor.

[hypest]

Reminder to self/us: we should add an integration test for this one, to test that the resulting html (say, HTML mode) is persisting the change.

[fluiddot]

Reminder to self/us: we should add an integration test for this one, to test that the resulting html (say, HTML mode) is persisting the change.

Oh yeah, I'm actually writing it as I'm fixing the issue 😄 .

[fluiddot]

Heads up that I've just created a PR for addressing this issue: WordPress/gutenberg#37887

@hypest I assigned you as a reviewer, let me know if you would be able to take a look, thanks 🙇 !