WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 2 months ago

#46785 new defect (bug)

Twenty Seventeen: Floated Images appear with extra space on top on the front end.

Reported by: kjellr 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

  1. Create a new page, add an image block and insert image.
  2. Add a paragraph block below with text.
  3. Resize image and change to left alignment. Text wraps around image.
  4. 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

Page creation:
https://cldup.com/whURZYOf-k.gif

Before adding empty paragraph block:
https://cldup.com/QiGnsXicGs-1200x1200.png

Empty paragraph block applied in editor:
https://cldup.com/QOrcLW8iWM-3000x3000.png

After adding empty paragraph block:
https://cldup.com/AgAjLakQ6b-3000x3000.png

Attachments (1)

46785.patch (681 bytes) - added by sabernhardt 2 months ago.

Download all attachments as: .zip

Change History (2)

@sabernhardt
2 months ago

#1 @sabernhardt
2 months ago

  • Focuses css added
  • Keywords has-patch needs-testing added

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).

Note: See TracTickets for help on using tickets.