Opened 4 years ago
Last modified 3 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-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 (6)
Change History (17)
#1
@
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
#4
@
4 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
@
4 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.
#8
@
20 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,
@
20 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
@
17 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
@
17 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.
Inline Images displaying as block on TwentyTwenty