WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 7 weeks ago

#49793 closed defect (bug) (fixed)

Twenty Twenty: Images in list blocks are not positioned correctly

Reported by: poena Owned by: ianbelanger
Milestone: 5.4.2 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-testing has-patch commit fixed-major
Focuses: css Cc:

Description

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.

Attachments (4)

list.png (227.5 KB) - added by poena 3 months ago.
list-block-image-class.png (25.8 KB) - added by mayankmajeji 3 months ago.
List block class add
49793.diff (319 bytes) - added by mayankmajeji 3 months ago.
List Block Image Style Added
49793.1.diff (848 bytes) - added by ianbelanger 3 months ago.
Updated patch to include RTL styles

Download all attachments as: .zip

Change History (15)

@poena
3 months ago

#1 @ianbelanger
3 months ago

  • Focuses css added
  • Keywords needs-testing needs-patch added
  • Milestone changed from Awaiting Review to 5.5
  • Version set to 5.3

@mayankmajeji
3 months ago

List block class add

#2 in reply to: ↑ description @mayankmajeji
3 months ago

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.

#3 follow-up: @poena
3 months ago

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.

#4 in reply to: ↑ 3 @mayankmajeji
3 months ago

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.

Last edited 3 months ago by mayankmajeji (previous) (diff)

@mayankmajeji
3 months ago

List Block Image Style Added

#5 @mayankmajeji
3 months ago

  • Keywords has-patch added; needs-patch removed

#6 @JavierCasares
3 months ago

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

This ticket was mentioned in Slack in #core-test by javier. View the logs.


3 months ago

@ianbelanger
3 months ago

Updated patch to include RTL styles

#8 @ianbelanger
3 months ago

  • Keywords commit added
  • Owner set to ianbelanger
  • Status changed from new to reviewing

#9 @ianbelanger
3 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#10 @ianbelanger
3 months ago

  • Keywords fixed-major added
  • Milestone changed from 5.5 to 5.4.2
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#11 @whyisjake
7 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.