Cubic: resized Image Blocks displaying incorrect alignment when set to align Left/Right

[Robertght]

Quick summary

No response

Steps to reproduce

1. Create a new page
2. Add a paragraph and an image
3. Resize the image
4. Align the image to the right and see if the text goes around it.

What you expected to happen

To have the text go around it.

What actually happened

The image shows correctly for like a second but then it switches its position to center.

https://github.com/Automattic/themes/assets/14153300/e09d3fb8-7acf-4d47-a6d0-f8e4f8d87ea8

Browser

Google Chrome/Chromium, Apple Safari

Context

8193259-zen

Platform (Simple, Atomic, or both?)

Simple

Other notes

I was able to replicate this using the Site editor and the user using the Classic editor.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Workaround:

/* Temp fix for the left/right images  | xxxxxx-zen rg */
@media screen and (min-width: 768px) {
    .wp-caption.caption-big.alignright, .alignright .image-big,     .wp-caption.caption-big.alignleft, .alignleft .image-big {
        max-width: 300px;
        padding: 5px 10px;
        margin-left: 24px;
    }
}

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8193259-zen
• [ ] -zen

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Could Not Replicate
• Tested on Atomic – Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO

📌 ACTIONS

• Requested author feedback

📌 Message to Author @Robertght I wasn't able to replicate, the image is honoring the alignment on my tests. Can you check and confirm if you can still reproduce it?

[Robertght]

@liviopv I think the key here is to also resize the image a bit.

Tested on a simple site.

Here's my result: https://github.com/Automattic/themes/assets/6737345/8f66a832-2090-43d6-8ea0-dab6f6f9f762

PS: I notice that now the image gets left aligned, but it's not wrapped by the text, regardless of its alignment.

[liviopv]

@Robertght Thanks! I was able to reproduce after resizing the image:

https://github.com/Automattic/themes/assets/14153300/e09d3fb8-7acf-4d47-a6d0-f8e4f8d87ea8

I updated the repro instructions and title