Image Block's Alignment setting impacts padding once nested inside Row block

[cuemarie]

Description

Originally reported here: Automattic/wp-calypso#76441

The Image Block's alignment setting (none, full-width) impacts how the image appears once it's wrapped inside a Row block. In short, an image set to none before being placed in a Row block will retain padding, whereas an image set to full-width before being placed in a Row block will have no padding inside the row. This is most visible when the Row block itself is set to Full-Width.

Because the Image block's Align tools are removed when it's nested inside Row and Stack blocks, there's not a clear way to resolve this. One must un-nest the block and change the alignment, then re-nest, or transform the Row to a Group block, update the alignment setting on the image, then transform back to a Row.

Step-by-step reproduction instructions

1. With Twenty Twenty-Three active, open a new post
2. Insert 2 identical images
3. Set the first image to full-width using the Align tool in the block toolbar
4. Wrap each image in it's own Row block.
5. Set both Row blocks to full-width

At this point, you should see the padding discrepancy in the editor, and you can preview/publish to see the issue on the live site as well.

Screenshots, screen recording, code snippet

Setup:

Screen.Capture.on.2023-05-02.at.11-11-03.mp4

Result:

Environment info

• WordPress 6.2
• Gutenberg Version 15.6.2
  • All other plugins inactive
• Twenty Twenty-Three theme
• Firefox 112.0.2

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

[carolinan]

@tellthemachines this seems to be another case where maybe the alignment option needs to be reset when a block is moved.

[tellthemachines]

I can reproduce the issue but only on the front end; in the editor I can't see any difference between alignfull and non-aligned images (tested with TT3). The difference I see in the front end isn't due to any styles attached to the alignfull class itself, but to the root padding styles being skipped for alignfull blocks. The extra space around the non-aligned image is the root padding.

Looks like this is yet another instance of root padding aware alignments not behaving as expected. The alignment styles themselves are designed to only be applied when inside a suitable container, so it shouldn't be necessary to remove the classnames when moving blocks around (or when transforming parent blocks from, say, Group to Row).

I can look at the root padding rules and try to find a workaround for this case but with any change to those rules there's always the chance something else will break elsewhere 😅

[wwdes]

I dont know if it is related but i just encountered in my block theme that all elements that can be aligned left/right (float) are not respecting their constricted content bounds (set from template) in the editor when set to align left/right. I have solved it by adding following css to styles-editor.css

.is-layout-flow > .alignleft {
	margin-left: calc(calc(100vw - var(--wp--style--global--content-size))/2);
}
.is-layout-flow > .alignright {
	margin-right: calc(calc(100vw - var(--wp--style--global--content-size))/2);
}

[tellthemachines]

@wwdes that's a known issue, but it's not related to this one! See #45834 for more details.

[tellthemachines]

I think this one might also be fixed by #53259.

[tellthemachines]

I can no longer reproduce this in trunk so closing as fixed by #53259.