WordPress.org

Make WordPress Core

Opened 14 months ago

Last modified 7 months ago

#50418 new defect (bug)

Twenty Twenty: Inline Images displaying as block

Reported by: mrfoxtalbot Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.4.2
Component: Bundled Theme Keywords: has-patch needs-testing 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 (3)

inline_images_Twenty_Twenty_bug_Screen Shot 2020-06-18 at 01.32.40.png (40.6 KB) - added by mrfoxtalbot 14 months 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 14 months ago.
Inline Images displaying inline in the editor
50418.diff (373 bytes) - added by thimalw 14 months ago.
Set display: inline-block for images inside paragraphs

Download all attachments as: .zip

Change History (8)

@mrfoxtalbot
14 months ago

Inline Images displaying as block on TwentyTwenty

@mrfoxtalbot
14 months ago

Inline Images displaying inline in the editor

#1 @SergeyBiryukov
14 months 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
14 months ago

Set display: inline-block for images inside paragraphs

#2 @thimalw
14 months ago

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

#3 @thimalw
14 months ago

  • Keywords has-patch needs-testing added

#4 @sabernhardt
8 months 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
7 months ago

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

Last edited 7 months ago by SergeyBiryukov (previous) (diff)
Note: See TracTickets for help on using tickets.