Gallery block: Empty space on front-end when an empty image block is added

[SiobhyB]

Description

When an empty image block is added to a gallery and saved, it creates an empty space, both in the editor and on the site's front-end.

My expectation would be for empty image blocks to have no impact on the gallery's appearance on the front-end.

This was first brought up in wordpress-mobile/gutenberg-mobile#4317. It can be replicated in both the mobile app and on the web.

Step-by-step reproduction instructions

1. Add a gallery block to the Gutenberg editor.
2. Upload some images to the gallery.
3. Select an image within the gallery and then select the block inserter (+) to add an empty image block.
4. Save the post and preview the gallery.
5. Verify that an empty space appears in the position where the empty image block was added.

Screenshots, screen recording, code snippet

The following is a recording of the steps to reproduce on the web:

Screen.Recording.2022-03-21.at.13.47.23.mov

The following video shows the steps to replicate the issue in the mobile app, including a preview of the site's front-end where the empty image placeholder can be viewed:

Gallery.mov

Environment info

Tested in both the latest version of the WordPress Android app and the latest version of Gutenberg running on a WordPress.com site.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[glendaviesnz]

This is replicating the behaviour of the Image block, which also adds an empty figure and img tag to the frontend markup if no image is selected for the block - it is just more noticeable in the Gallery due to the grid layout:

empty-image.mp4

I wonder if we also want to remove the empty tags for the standalone Image block, or if there is a reason why these are left in the frontend markup?

[NicoHood]

Is it possible to remove this extra box around the image? My usecase is a bit different, I want to have this visual space, but only for the large, not the mobile gallery. I want each row to have the same column size, but that seems currently not possible, isnt it?

[ramonjd]

What about adding the following in render_core_block_image?

Sorry, ignore my comment - only relevant to images in a gallery.

I just saw #39952

[t-hamano]

This issue cannot be reproduced with trunk and appears to be resolved by #45220 and #55269.

Image Block

Editor

There is an image block with no media set between two paragraphs.

Frontend

Nothing is rendered between the paragraph blocks.

Gallery Block

Editor

Contains two image blocks with no media set.

Frontend

Empty image blocks are not rendered and there are no empty columns.

I would like to close this issue, but please let us know if you are still experiencing issues.