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.