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: |
|
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 )
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:
- Add a paragraph block
- Type some text
- 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)
Change History (8)
#2
@
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.
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
@
3 days ago
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.
In my test on admin inline image working fine.