Classic Editor: Image gap in individual grid images after Gutenberg update v9.9.2

[ahmadbaig1]

User reported this after the update, all their classic editor grid images have started showing a gap after the first image on the front-end, however, there are no visible gaps in the editor-

Front-end-

Editor-

I tried checking the code editor of the pages as soon as I open it, it starts adding some links to the page-

Steps to reproduce the behaviour

1. Open the page editor.
2. Add 4 individual images.
3. Resize them to fit 2 in one column.
4. Align the images left.
5. Save the page and check on front-end.

What I expected to happen

The gap should not appear on the front-end since the editor shows all images are aligned.

What actually happened

Sometimes, the gap shows up after the first image.

Context

User reported this after the Gutenberg update v9.9.2, all their classic editor grid images started showing a gap after the first image on the front-end, out of the blue, while all of them have been working fine for a long time.

Browser / OS version

Unrelated.

Is this specific to the applied theme? Which one?

Have not tried changing the theme. Looks editor specific.

Does this happen on simple or atomic sites or both?

The case we have is a simple sits (Premium plan).

Is there any console output or error text?

WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403

Failed to load resource: the server responded with a status of 451 ()

Failed to load resource: the server responded with a status of 404 (Not Found)

Level of impact (Does it block purchases? Does it affect more than just one site?)

Causes Image alignment issues, only with one site (for now)

Reproducibility (Consistent, Intermittent) Leave empty for consistent.

Can reproduce it intermittently by adding individual images on classic block, resizing them to fit 2 in one column and aligning them both left.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

When unable to reproduce-

When able to reproduce- Editor-

Front-end-

[ahmadbaig1]

Has been reported here zd-3736904 for site reference.

[mikeicode]

I think the issue is these empty P tags:

Probably added with this update:

https://github.com/WordPress/gutenberg/blob/426ad1754e17d30d73cf163f44944c420c51e26f/packages/block-library/src/paragraph/style.scss#L39

// Prevent an empty P tag from collapsing, so it matches the backend.
p:empty::before {
    content: "\200B";
}

This can be used to resolve:

/* Ignore blank paragraphs */
p:empty::before {
    content: none;
}