Twenty Twenty: Inline Images displaying as block

[mrfoxtalbot]

Inline images (those added inside a paragraph block) will display on top of each other (as blocks) instead of next to each other (inline or inline-block).

​https://d.pr/i/13DtBl

This will not happen in the editor, only on the public page/post:

​https://d.pr/i/vkV9vC

I tried to reproduce this with several themes such as Rockwell, Brandsbury and Coutoire, but they all seem to work fine.

[mrfoxtalbot]

Inline Images displaying as block on TwentyTwenty

[mrfoxtalbot]

Inline Images displaying inline in the editor

[thimalw]

Set display: inline-block for images inside paragraphs

[thimalw]

My first time submitting a patch. Please let me know if I've done anything wrong.

[sabernhardt]

@thimalw Thanks for contributing a patch! Because Twenty Twenty has mirrored versions of stylesheets for right-to-left languages, the extra selector would need to be added in the style-rtl.css file as well. Then you can make a patch with both files together.

Regarding the selector, I'm unsure whether it should include the .entry-content part. If someone has defined one of the following types of styles (either in a child theme or in the customizer's Additional CSS), the more specific .entry-content p img would override that.

/* case: <p class="hidden-images"><img /></p> */
/* or case: <div class="hidden-images"><p><img /></p></div> */
.hidden-images img {
	display: none;
}
/* case: <p><img class="hidden-image" /></p> */
.hidden-image {
	display: none;
}

Of course, these are likely rare situations, but it can happen.

I think this could be safer, even though it also applies to any images in paragraph tags outside the post content area.

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

[talldanwp]

I noticed a similar issue is happening in Twenty Twenty One (#52287), though in both the editor and front-end.

[sabernhardt]

@aezazshekh also reported the same in the Verse block on #57912.

[sabernhardt]

#57912 was marked as a duplicate.

[aezazshekh]

Added Patch

[viralsampat]

Hello Team,

I have checked the below-mentioned themes from my end and found that the issue is happening in the "Twenty Twenty" theme.

I have checked this issue on these configuration:

WordPress version: 6.1.1, Gutenberg Version 15.4.0, Theme active: Twenty Twenty,
Browser: Google chrome, Version 111.0.5563.110 (Official Build) (arm64)
Device: MacBook Air M1
OS: macOS 13.1

twentynineteen
twentytwenty
twentytwentyone
twentytwentytwo
twentytwentythree

Thanks,

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.