Visually differentiate image blocks from image blocks in galleries.

[hanneslsm]

What problem does this address?

I was just asked by a client how to change the dimensions of an image. "This is easy", I thought. Just click on the image, use the handles or click on a percentage on the right under "Image dimensions". This wasn't possible though: no handles, no image dimension settings.
I was in shock when I saw that the controls weren't there and my first instinct was to google if I missed to add anything in the theme.json for the custom block theme I have shipped to the client.

After searching for more than 30 Minutes without any success I got back to the image block and tried to find the issue there.
It turned out the client has turned the image block into a gallery.

The problem is clear:
There is near to none visual indication between a selected image block within a gallery or a stand-alone image block.
The title is the same, the toolbar is the same, everything looks the same. But one is missing the image dimension settings.

What is your proposed solution?

There are many possibilities to improve. Some Suggestions:

1. Title: A Image Block in a Gallery could be called "Image in a Gallery"
2. Reference in the settings / Disabled state: Where usually the "image dimensions" settings are should be a info text aka "This image is in a gallery and therefore it is not possible to change the image dimensions" or so
3. When selecting a image block in the gallery, make it visually clear that it's part of the Gallery. Maybe by showing two borders? Or a placeholder for another image?

Screen.Recording.2023-02-23.at.19.07.17_red.mp4

[hanneslsm]

Another idea - maybe it makes sense to add a default placeholder/ second empty image to the gallery in the editor. Isn't the definition of a gallery that it has multiple images? Removing all images expect one will automatically turn the gallery block into an image block.

This actually reveals another possibility for improvements. Currently, when the gallery only has one image, it's not very obvious how to add another image from the media library. You click on the image, search for buttons, get confused (as described above). Instead, you have to select the gallery by clicking the small gallery icon, click add, open the media library, select the images, click "add to gallery", click "update gallery". Sorry, but this is nuts. There is no way I can describe this to a client and they will remember what to do. Separate issue #48417

Screen.Recording.2023-02-24.at.09.15.37.mp4

[tresorama]

I like the point 2, and can work togheter with point 1.