Make WordPress Core

Opened 9 days ago

Last modified 3 days ago

#52287 new defect (bug)

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

Reported by: talldanwp Owned by:
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: good-first-bug has-patch
Focuses: css Cc:

Description (last modified by SergeyBiryukov)

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.

Attachments (3)

Inline image test.png (76.2 KB) - added by mukesh27 9 days ago.
Screenshot 2021-01-13 at 4.34.11 pm.png (24.2 KB) - added by talldanwp 9 days ago.
Reporter screenshot
with-pr-874.png (115.1 KB) - added by poena 3 days ago.
With the current PR applied:

Download all attachments as: .zip

Change History (8)

#1 @mukesh27
9 days ago

In my test on admin inline image working fine.

#2 @talldanwp
9 days ago

@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.

9 days ago

Reporter screenshot

This ticket was mentioned in PR #874 on WordPress/wordpress-develop by gonzalezlopezjm.

5 days ago

  • Keywords has-patch added; needs-patch removed

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

#4 @poena
3 days ago

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.

Last edited 3 days ago by poena (previous) (diff)

3 days ago

With the current PR applied:

#5 @SergeyBiryukov
3 days ago

  • Description modified (diff)
Note: See TracTickets for help on using tickets.