Twenty Twenty One: Inline Images displaying on new lines (as display: block)

[talldanwp]

In Twenty Twenty One, inline images are display: block instead of display: inline-block.

This is the case both in the editor and in the front-end.

There's a similar ticket here for Twenty Twenty that could be worth fixing at the same time: #50418

Steps to reproduce:

1. Add a paragraph block
2. Type some text
3. Add an inline image

Expected behavior:
The image displays on the same row as the text.

Actual behavior:
The image displays on a new line.

[mukesh27]

In my test on admin inline image working fine.

[talldanwp]

@mukesh27 Is that Twenty Twenty One? It doesn't look like the same theme, but granted you might have changed some options.

I'll upload an example of what I see.

[talldanwp]

Reporter screenshot

Prevents that an inline image inserted into editor goes into new line in the TwentyTwentyOne Theme

Trac ticket: https://core.trac.wordpress.org/ticket/52287

[poena]

Hi!
I have tested the pull request. I did not see any side effects except the following:

There is a style in the image block file that affects all images, not only the block: ​sass/05-blocks/image/_style.scss#L41

This is duplicating the height and the max width that is already added in the sass/04-elements/media.scss file,
and it is adding a vertical-align:middle to the images on the front.
Because of the vertical alignment, the inline images do not look the same in the editor and front when the PR is applied.

I do not know the reason why the vertical alignment was included, further testing is needed to see if removing it has any side effects.

The left image is in the editor, right is on the front.

[poena]

With the current PR applied: