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

[kjellr]

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:

Before adding empty paragraph block:

Empty paragraph block applied in editor:

After adding empty paragraph block:

[sabernhardt]

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

[karmatosed]

I think this is a candidate for the next release if we get testing in.

[hmbashar]

Test Report

Description

I applied the patch, but nothing changed.

Patch tested:46785.patch

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Seventeen 3.6
• MU Plugins: None activated
• Plugins:
  • FakerPress 0.6.6
  • Test Reports 1.1.0

Actual Results

1. I applied the patch, but nothing changed.

Screenshots

[karmatosed]

This looks like it needs to go back into future release for more testing, thank you everyone.

[karmatosed]

@sabernhardt it looks like this patch is failing right now. I am happy to have other instructions if this is something I am doing wrong. I can absolutely see the issue though and suspect a refreshed patch will solve this from you.

As I think if it has a patch refresh this would be a good candidate for the next release, going to put that on.

[shailu25]

Patch Refreshed.

[shailu25]

I have refreshed the patch.

[karmatosed]

Testing as the patch now applies.

[karmatosed]

Moving this to commit as it has resolved.

[karmatosed]

In 58823:

Twenty Seventeen: Fixes floated images having an extra space when the first image.

The first image when floated in content had extra spacing. This was only for the first image in testing so the solution focuses on that.

Props kjellr, sabernhardt, hmbashar, shailu25.
Fixes #46785.