Make WordPress Core

Opened 4 years ago

Last modified 11 months ago

#50418 new defect (bug)

Twenty Twenty: Inline Images displaying as block

Reported by: mrfoxtalbot's profile mrfoxtalbot Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.4.2
Component: Bundled Theme Keywords: has-patch needs-refresh 2nd-opinion
Focuses: css Cc:

Description

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.

Attachments (6)

inline_images_Twenty_Twenty_bug_Screen Shot 2020-06-18 at 01.32.40.png (40.6 KB) - added by mrfoxtalbot 4 years ago.
Inline Images displaying as block on TwentyTwenty
inline_images_Twenty_Twenty_bug_Screen Shot 2020-06-18 at 01.31.46.png (34.9 KB) - added by mrfoxtalbot 4 years ago.
Inline Images displaying inline in the editor
50418.diff (373 bytes) - added by thimalw 4 years ago.
Set display: inline-block for images inside paragraphs
50418.2.diff (448 bytes) - added by aezazshekh 13 months ago.
Added Patch
50418.3.diff (442 bytes) - added by viralsampat 13 months ago.
I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.
CleanShot 2023-03-24 at 14.54.33@2x.png (452.6 KB) - added by viralsampat 13 months ago.

Download all attachments as: .zip

Change History (16)

@mrfoxtalbot
4 years ago

Inline Images displaying as block on TwentyTwenty

@mrfoxtalbot
4 years ago

Inline Images displaying inline in the editor

#1 @SergeyBiryukov
4 years ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Inline Images displaying as block on TwentyTwenty to Twenty Twenty: Inline Images displaying as block

@thimalw
4 years ago

Set display: inline-block for images inside paragraphs

#2 @thimalw
4 years ago

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

#3 @thimalw
4 years ago

  • Keywords has-patch needs-testing added

#4 @sabernhardt
3 years ago

  • Focuses css added
  • Keywords needs-refresh 2nd-opinion added
  • Milestone changed from Awaiting Review to Future Release

@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;
}

#5 @talldanwp
3 years ago

I noticed a similar issue is happening in Twenty Twenty One (https://core.trac.wordpress.org/ticket/52287), though in both the editor and front-end.

Version 0, edited 3 years ago by talldanwp (next)

#6 @sabernhardt
13 months ago

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

#7 @sabernhardt
13 months ago

#57912 was marked as a duplicate.

@aezazshekh
13 months ago

Added Patch

#8 @viralsampat
13 months ago

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,

Last edited 13 months ago by viralsampat (previous) (diff)

@viralsampat
13 months ago

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

#9 @pooja1210
11 months ago

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!

#10 @sabernhardt
11 months ago

  • Keywords needs-testing removed

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.

Note: See TracTickets for help on using tickets.