Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#49793 closed defect (bug) (fixed)

Twenty Twenty: Images in list blocks are not positioned correctly

Reported by: poena's profile poena Owned by: ianbelanger's profile 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 4 years ago.
list-block-image-class.png (25.8 KB) - added by mayankmajeji 4 years ago.
List block class add
49793.diff (319 bytes) - added by mayankmajeji 4 years ago.
List Block Image Style Added
49793.1.diff (848 bytes) - added by ianbelanger 4 years ago.
Updated patch to include RTL styles

Download all attachments as: .zip

Change History (15)

@poena
4 years ago

#1 @ianbelanger
4 years ago

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

@mayankmajeji
4 years ago

List block class add

#2 in reply to: ↑ description @mayankmajeji
4 years 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
4 years 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
4 years 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.

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.

Version 0, edited 4 years ago by mayankmajeji (next)

@mayankmajeji
4 years ago

List Block Image Style Added

#5 @mayankmajeji
4 years ago

  • Keywords has-patch added; needs-patch removed

#6 @JavierCasares
4 years 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.


4 years ago

@ianbelanger
4 years ago

Updated patch to include RTL styles

#8 @ianbelanger
4 years ago

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

#9 @ianbelanger
4 years 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
4 years 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
4 years 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.