Twenty Twenty: Images in list blocks are not positioned correctly

[poena]

Images inside lists blocks looks like they are above the list item.
They are not aligned with other types of list content.

Add a new list block in the editor.
Add an inline image using the button in the toolbar.
Add some text next to the image.
Save and view the list on the front.

In the editor, the content is aligned nicely next to each other.
But on the front the image is not inline, but looks like it is above the list.

-If the image is the only content in the list, it looks better, the image sits in place next to the bullet.

[mayankmajeji]

List block class add

[mayankmajeji]

Hi Poena, I looked into the issue and I think a class like "wp-list-block-image-inline" or "wp-image-inline" must be added to the <img> tag. And then overwriting the default IMG styling will be a better option.

Replying to poena:

Images inside lists blocks looks like they are above the list item.
They are not aligned with other types of list content.

Add a new list block in the editor.
Add an inline image using the button in the toolbar.
Add some text next to the image.
Save and view the list on the front.

In the editor, the content is aligned nicely next to each other.
But on the front the image is not inline, but looks like it is above the list.

-If the image is the only content in the list, it looks better, the image sits in place next to the bullet.

[poena]

It is the display:block here (instead of inline) that is causing the problem.
But removing that now may cause other problems elsewhere, so we need to add display inline or display inline block for images in lists specifically.

style.css line 624.

svg, img, embed, object {
    display: block;
    height: auto;
    max-width: 100%;
}

Adding new class names, if preferred, is something that would need to be done in Gutenberg.

[mayankmajeji]

Actually you are right. And I checked it again if other themes are getting the same problem, but it seems display: block; is only written in Twenty Twenty theme style and other themes are working properly.

So I believe there is no need to add a separate class in Gutenberg. I am going ahead and adding the following code in style.css of Twenty Twenty theme. This should resolve the issue.

.entry-content li img{
   display: inline-block;
}

Kindly let me know if there are any changes.

Replying to poena:

It is the display:block here (instead of inline) that is causing the problem.
But removing that now may cause other problems elsewhere, so we need to add display inline or display inline block for images in lists specifically.

style.css line 624.

svg, img, embed, object {
    display: block;
    height: auto;
    max-width: 100%;
}

Adding new class names, if preferred, is something that would need to be done in Gutenberg.

[mayankmajeji]

List Block Image Style Added

[JavierCasares]

The patch works for me... now shows the same in the front and editor. :) thanks @mayankmajeji

[ianbelanger]

Updated patch to include RTL styles

[ianbelanger]

In 47590:

Bundled Themes: Twenty Twenty inline images in list blocks are not positioned correctly.

Fixes the alignment of inline images in list blocks to match the way they look in the editor.

Props poena, mayankmajeji, JavierCasares.
Fixes #49793.

[ianbelanger]

Reopening for backport.

[whyisjake]

In 47805:

Bundled Themes: Twenty Twenty inline images in list blocks are not positioned correctly.

Fixes the alignment of inline images in list blocks to match the way they look in the editor.

Backporting the changes here to the 5.4 branch.

Props poena, mayankmajeji, JavierCasares.
Fixes #49793.