Fix for images being misaligned in paragraphs

[joshdarby]

Changes

This pull request makes the following changes:

• Added a shim in less/inc/gutenberg-shim-16241.less to fix the top image block being misaligned with the top paragraph until Gutenberg fixes it in .wp-block-image margin-bottom is incorrectly applied when aligned left/right WordPress/gutenberg#16241.

Before:

After:

Why

For #1731.

Testing/Questions

Features that this PR affects:

• Image blocks

Questions that need to be answered before merging:

• Does it still look ok left aligned, right aligned, center aligned, and normal, wide, and full widths?

Steps to test this PR:

1. Detailed in Patch Largo to fix Gutenberg stylesheet misaligning paragraphs and left/right images #1731, but basically add an image as the top block in a post and left/right align it with a paragraph below it.

[benlk]

Passes for:

• left
• center
• right
• none
• wide
• full

For wide and full, there's no space between the image and its following paragraph, which I think is because the markup changes for alignleft/alignright/aligncenter compared to alignwide/alignfull.

One is <figure class="wp-block-image alignwide"> and the other is <div class="wp-block-image"><figure class="alignleft is-resized">.

We only need to remove the margin-bottom on the aligned-left and aligned-right div.wp-block-image, so we can remove the lines for figure.wp-block-image.

[joshdarby]

@benlk The figure.wp-block-image portion has been removed in 1198216.

[benlk]

Passes for:

• left
• center
• right
• none
• wide
• full

👍