Opened 4 years ago
Last modified 22 months ago
#46785 new defect (bug)
Twenty Seventeen: Floated Images appear with extra space on top on the front end.
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.1 |
Component: | Bundled Theme | Keywords: | has-screenshots has-patch needs-testing |
Focuses: | css | Cc: |
Description
Ported over from Gutenberg's repo, since this is a Twenty Seventeen issue:
https://github.com/WordPress/gutenberg/issues/14782
Steps to reproduce
- Create a new page, add an image block and insert image.
- Add a paragraph block below with text.
- Resize image and change to left alignment. Text wraps around image.
- Preview/publish
What I expected
Expected the image and text to be almost exactly aligned, as it appears in the editor.
What happened instead
When previewed/published, the first line of text has a gap above it.
Workaround: Adding an empty paragraph block above the image block removes the gap.
Browser / OS version
Chrome Version 73.0.3683.86
macOS Mojave 10.14.3
Screenshots
Before adding empty paragraph block:
Attachments (1)
Change History (2)
Note: See
TracTickets for help on using
tickets.
The gap seems to occur only when the aligned image is the first block, so I used
:first-child
in the patch. This patch also removes the 0.5em top margin from these blocks (overriding 'block-library' styles).