Image Block: Image size does not change if block is left or right aligned

[ktyfuller604]

This issue occurs in the Twenty Twenty and Twenty Twenty-One themes. It does not occur in the Maywood theme.

Steps to reproduce the behavior

1. Go to the Block Editor
2. Add an image block and a paragraph block
3. Left (or Right) align the image block
4. Resize the image to any size using any resize option; dragging the handles, setting a percentage, setting by pixels or using the drop-down.
5. Preview (or publish) the page

What I expected to happen

The image size set in the editor would be reflected on the preview or the published page.

What actually happened

The image always displays in thumbnail size.

Context

Browser / OS version

• Chrome 89.0.4389.114
• Safari 14.0.3
• Mac OSX 10

Is this specific to the applied theme? Which one?

• Twenty Twenty
• Twenty Twenty-one

Does this happen on simple or atomic sites or both?

Both simple and atomic when testing with the Twenty Twenty theme.

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

In the editor:

On the preview:

Initial report: 3901024-zen

[Robertght]

It looks like this is a theme thing on ORG as well so I reported it here: https://core.trac.wordpress.org/ticket/55581#ticket

Workaround:

@media (min-width: 1000px)
.entry-content > .alignleft, .entry-content > p .alignleft, .entry-content > .wp-block-image .alignleft {
    position: absolute;
}

[mrfoxtalbot]

I can confirm this is still reproducible in Twenty Twenty.

Screen.Capture.on.2022-06-22.at.12-52-41.mp4

I have tagged it as [Status] Core fix needed. I have also opened a second Trac issue #56038 to report that the problem is affecting Twenty Twenty-One as well:

Screen.Capture.on.2022-06-22.at.13-08-25.mp4