.wp-block-image margin-bottom is incorrectly applied when aligned left/right

[benlk]

Describe the bug

The problem is that a .wp-block-image block with an alignright image retains the margin-bottom on the parent element, and as a result the following paragraph tag does not align with the top of the image/

To reproduce
Steps to reproduce the behavior:

1. With WordPress 5.2.2.1 and no Gutenberg plugin
2. Add an image block aligned right that is less than the full column width.
3. Following the image block, add a paragraph text block.
4. See error

Expected behavior
I expect the top of the image to be level with the top of the adjacent paragraph tag.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 75

Suggested fix

• remove the margin-bottom on .wp-block-image in /wp-includes/css/dist/block-library/style.min.css?ver=5.2.2
• add a margin-bottom to the <figure> element in the optional styles that themes can opt out of. Themes generally provide their own margin styles for .alignright.

[GlennMartin1]

Related? woocommerce/storefront#1165

[benlk]

@tiagonoronha didn't specify the source of the misaligning when the ticket was reported, so there's no way to be absolutely certain.

I'd agree with you, @GlennMartin1, because based on the diff that ticket does look like it's reporting this same issue. The fix that theme implemented is that I would implement in my themes, if there was not going to be a fix for this in Gutenberg.

[noisysocks]

Definitely looks like something is awry.

Here's what I see when I follow the steps to reproduce using latest Gutenberg + Twenty Twenty:

And here's it using latest Gutenberg + Twenty Nineteen:

I'm unsure if this is an issue in the block editor that's being patched by Twenty Twenty, or if this is an issue in Twenty Nineteen.

Adding Needs Design Feedback in the hopes that someone familiar with the CSS here can chime in.

[richtabor]

We chatted about this issue in today's design meeting (Slack).

It's really difficult to match paragraph and image placements for right/left images. We could probably get it right for baseline/default Gutenberg styles - but not for every theme out there. It's dependent on font size, line height, paragraph margin/padding as well.

[benlk]

In the theme I screenshot, the paragraph had no margin-top; the theme uses margin-bottom to space between paragraphs. The .wp-block-image{ margin-bottom: 1em } margin-bottom comes from wp-includes/css/dist/block-library/style.min.css?ver=5.4.2.

Maybe Twenty Twenty uses margin-top on paragraphs, and that's why it matches, where Twenty Nineteen uses margin-bottom, and that's why it doesn't match.

My questions are:

• Why does Gutenberg take responsibility for matching paragraph and image placements? Shouldn't this be the theme's job instead of the editor's job?
• Can this style be removed from Core?

[paaljoachim]

Is this issue still valid?

[GlennMartin1]

Is this issue still valid?

I don't know. My earlier comment was using Storefront, but it's been addressed there (see woocommerce/storefront#1165).

[paaljoachim]

I tested with WordPress 5.7 beta 1.
Only the WordPress Beta tester plugin is activated.
Theme: Twenty Twenty One.

Aligning the image right.
Adding a paragraph.

It looks pretty good. I will close this issue.