Image block resizer controls hidden in Safari after setting block alignment

[Kpudlo]

With the recent image editing added in 5.5, there's an issue with Safari where the resizing option disappears after setting the alignment of an image until the page is refreshed.

I've tested on both Firefox and Chrome on Mac, and everything worked as expected.

[ellatrix]

I just tested in Safari 13.1.2. Inserted an image, then aligned it left, and the resize handles are still there. Could you make a video or share more specific steps to reproduce?

[Kpudlo]

Hi @ellatrix,

We've done some additional tests and can confirm that a fresh install does not reproduce this issue. We're working to see if we can understand what exactly is causing the problem and if it is core related or something else.

[augustuswm]

I am not sure if it is the same issue but we have seen intermittent issues with Safari and image resizing in the 5.5 release. We have seen the issue (from multiple users) in Safari 12.1.1 and 13.1.2 (running 5.5 release with the Twenty Twenty theme) so far, but haven't been able to come up with a consistent reproducible test case.

Roughly what we see is that the a user adds an image block, and selects an image from the media library. The image displays in the editor, but the block does not show the sliding controls, the width and height boxes under the inspector image dimensions are empty, and the percentage resize / reset buttons do not function. We do not see any errors logged to the console, but it does look like the block is saving the width and height props of the image block as NaN. I'll add more details if we find out anything else, or can consistently reproduce.

[kylelarkin]

I can also confirm the exact same behavior for resizing images in Safari 14.0.1 with WordPress 5.5.3

Steps to consistently reproduce:

1. Insert Image Block
2. Select an Image from the Media Library (you'll see the resize handles)
3. Change alignment of image to any other alignment
4. Image resize handles disappear

As mentioned above, there are no errors thrown in the console and the actual DOM elements for the resize handles just disappear when the image is selected. The rest of the DOM elements for the selected image still exist including the ability to replace the image or change its alignment again. Other images that have not been resized or have not had their alignment changed will still show resize handles properly.

[greatestview]

I can confirm the behavior described by @augustuswm and @kylelarkin and like to add another effect:

1. Insert image block
2. Select an image from the Media Library
3. Changing the image size (via Buttons 25%, 50%, 75%, 100%) is not possible

Strange thing I noticed: It works, when the Safari Developer Toolbar is open (alt + cmd + C)!

[paaljoachim]

Hi @Kpudlo Kevin and others.

I am doing a test using Twenty Twenty One, WordPress 5.6 and Gutenberg plugin version 9.8
Local web site made earlier (I use as a testing site) with Desktop Server.
Opened in Safari.

1. Made a new page.
2. Inserted the Image block.
3. Added an image from the Media Library.
4. Clicked the various % options in the sidebar. 25%, 50%, 75% and 100%. Then the reset button.

Can others also test using Twenty Twenty One, WP 5.6 and the newest Gutenberg plugin?
Let's see if the error is still present.

[annezazu]

Confirmed this as a problem using Gutenberg 10.0.2, WordPress 5.6.2, and Safari. I noticed that resizing options never show up until after saving the page and refreshing:

resize.safari.mov

[andrewserong]

Just adding that I ran into this issue, too, the other day while testing #35787 — for me in Safari the resize controls showed initially, but if I switched the Image block from no alignment to any alignment (or vice-versa) then the resize controls disappeared. Here's a GIF:

I've renamed this issue to add a bit more specific context (apologies if I missed anything anyone else raised!)

[andrewserong]

I think I've come up with a fix for the underlying issue, but it could do with some more testing to confirm it doesn't introduce any other issues: #37210

Update: turns out it does introduce another issue — I'll investigate and see if I can tidy it up.