Opened 4 years ago
Last modified 2 weeks 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 2nd-opinion has-testing-info has-screenshots |
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 (20)
#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 (#52287), though in both the editor and front-end.
#8
@
21 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.
twentynineteen
twentytwenty
twentytwentyone
twentytwentytwo
twentytwentythree
Thanks,
@
21 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
@
18 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
@
18 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.
This ticket was mentioned in Slack in #core-themes by karmatosed. View the logs.
4 months ago
This ticket was mentioned in PR #7892 on WordPress/wordpress-develop by @im3dabasia1.
2 weeks ago
#13
- Keywords needs-refresh removed
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 |
---|---|
Inline Images displaying as block on TwentyTwenty