Image block: Image looks cut off or not centered on certain devices

[reginabally]

Describe the bug Initially reported in 5465772-zd-woothemes. The image looks cut off in the app's editor on an iPad. On an iPhone 11, the image wasn't cut off but wasn't centered. We can't reproduce this on iPhone SE.

To Reproduce Steps to reproduce the behavior:

1. Copy the image from this post: pqyTp-4p8-p2
2. Add the image to an Image block on a test site via the web editor
3. View the image on the app's editor

Note:

• Not sure if this is related, but the theme on the site is Intergalactic 2
• The user reported the issue on a Reusable block, but according to the testing done on iPhone 11, the image on both the Reusable block and Image block looked the same (i.e., not centered in the app's editor).

Expected behavior The image is centered and not cut off in the app's editor.

Screenshots

Screenshot taken on an iPad

Screenshot taken on an iPhone 11

Top image: Reusable block Bottom image: Image block

Screenshot taken on an iPhone SE

Smartphone (please complete the following information):

• Device: iPad Pro (11-inch), iPhone 11, iPhone SE
• OS: 15.6
• WPiOS 20.4

[fluiddot]

Thanks for reporting this @reginabally 🙇 !

I might be overlooking a reproduction step but so far, I couldn't manage to reproduce this issue in WPiOS/JPiOS 20.5 and 20.4.

Steps:

1. Download the image displayed in the referenced post (pqyTp-4p8-p2).
2. Change the site's theme to "Intergalactic 2".
3. Create a new post.
4. Add an Image block.
5. Insert the image from the device.

Tested on:

• iPad (6th Generation) - iOS 14.8.1 - Jetpack iOS 20.4.0.3
• iPhone 11 - iOs 15.4.1 - WordPress iOS 20.5.0.0

iPhone 11	iPad

---

@reginabally Not sure if you did something different to trigger the issue 🤔 .

[reginabally]

Hi @fluiddot, I'm so sorry for leaving out the part that the image has to be added via the web editor! I edited my post for clarity.

I've also invited you to my test site. You can view the image in a draft post titled "Reusable block test". Let me know if that works for you!

[fluiddot]

Hi @fluiddot, I'm so sorry for leaving out the part that the image has to be added via the web editor! I edited my post for clarity.

@reginabally Ah ok, thanks for expanding that part 🙇 , I'll use the web editor for reproducing it 👍 .

I've also invited you to my test site. You can view the image in a draft post titled "Reusable block test". Let me know if that works for you!

Great! I'll try to reproduce it with my test sites but if I don't manage to reproduce it I'll use yours, thanks!

[fluiddot]

I finally manage to reproduce it by using your test site @reginabally. Looks like the issue is related to the Image size and changing the Image dimensions via the Image block settings.

Here are the reproduction steps I used:

1. Download this image.
2. Go to the web version of the editor.
3. Create a post.
4. Add an Image block and insert the image previously downloaded in step 1.
5. Open the Image block settings.
6. Change the Image size to Full Size.
7. Change Image dimensions to 25%.
8. Save the post.
9. Go to the app.
10. Open the saved post.
11. Observe that the image is cut.

Result:

However, this can't be reproduced consistently with different images. Looks like the size of the image inserted into the block is also involved in the issue 🤔. I'll set the High-priority to the issue as it's related to a top-used block.