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.

[pooja1210]

Hi,

Test report for - https://core.trac.wordpress.org/attachment/ticket/50418/50418.2.diff

Environment:
WordPress- v6.2.2
Theme- Twenty Twenty
Os- Mac
Browser- Chrome

Expected Result: The inline image should be displayed properly ☑️

Screenshots:
Before: ​https://prnt.sc/z_cxlQjIqbRU
After: ​https://prnt.sc/mvOLdSGiBgKL

Thanks!

[sabernhardt]

If images inside a paragraph are changed to inline-block, that would need to make an exception for at least the .aligncenter class.

When adding a captionless image in the Classic block (or Classic Editor), the image is wrapped in a paragraph tag. If the centered image's width is the full width of the paragraph, the change may only affect the bottom margin. However, if the image is smaller, it would not center as expected.

[sabernhardt]

#62501 was marked as a duplicate.

Trac ticket: https://core.trac.wordpress.org/ticket/50418

This PR resolves the issue where inline images inside paragraph blocks were displaying as block elements on the front end in the Twenty Twenty theme. The fix ensures that inline images display properly as inline or inline-block elements, and it addresses the issue for both LTR and RTL languages.

Before	After

Before	After

https://core.trac.wordpress.org/ticket/50418

[sabernhardt]

I added a suggestion on PR 8964 to keep low specificity, ignore centered images and address the Verse block:

html :where(.entry-content p img:not(.aligncenter)),
:where(.wp-block-verse) img,
.entry-content li img {

[sabernhardt]

#63615 was marked as a duplicate.