Make WordPress Core

Opened 5 years ago

Last modified 3 years ago

#46785 new defect (bug)

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

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


Ported over from Gutenberg's repo, since this is a Twenty Seventeen issue:

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


Page creation:

Before adding empty paragraph block:

Empty paragraph block applied in editor:

After adding empty paragraph block:

Attachments (1)

46785.patch (681 bytes) - added by sabernhardt 3 years ago.

Download all attachments as: .zip

Change History (2)

3 years ago

#1 @sabernhardt
3 years 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.