Opened 7 months ago
Last modified 10 days ago
#50418 new defect (bug)
Twenty Twenty: Inline Images displaying as block
Reported by: |
|
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).
This will not happen in the editor, only on the public page/post:
I tried to reproduce this with several themes such as Rockwell, Brandsbury and Coutoire, but they all seem to work fine.
Attachments (3)
Change History (8)
#1
@
7 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
#4
@
8 weeks 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; }
Inline Images displaying as block on TwentyTwenty