Image left/right alignment escapes it's container in the editor

[creativecoder]

Description

When an image is left or right aligned, how it looks on the editor does not match the actual site.

Step-by-step reproduction instructions

1. Create a new post or page
2. Insert an image block, make it relatively small, and set it to left aligned
3. Insert a spacer block after it
4. Insert some text after that

I expect that the image is left aligned with the text, but it's not

Screenshots, screen recording, code snippet

Editor

Front end

---

Note that the float for alignment is applied to the block container in the editor

But the figure element inside the container on the front-end

Environment info

• WP 5.9, Gutenberg 12.1.0-rc.1
• Firefox, macOS

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

[maxwrlr]

I have the same problem. I temporarily solve it with an editor-style:

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align="left"] {
	margin-left: calc((100% -  <value-of-settings.layout.contentSize-of-theme.json>   ) / 2) !important;
}

[creativecoder]

It appears this is now at least consistent, if not expected. Left or right aligned images now escape the container on the front end, as well.

[itsdavidmorgan]

A modified version of @maxwrlr solution worked for me:

.is-layout-constrained > .wp-block.alignleft {
	margin-left: calc((100% - var(--wp--style--global--content-size)) / 2) !important;
}
.is-layout-constrained > .wp-block.alignright {
	margin-right: calc((100% - var(--wp--style--global--content-size)) / 2) !important;
}