Twenty Sixteen: Image Block Alignment Offset (Left/Right)

[mrfoxtalbot]

After the 6.6 updated, floated images in Twenty Sixteen are offset: margin-left: -40%;

Steps to reproduce

1. Add a new post through this path: My Site → Posts → Add New
2. Add texts with "Paragraph" block.
3. Add an image with "Image" block.
4. Resize the image, and change alignment to either right or left.
5. Save and preview to see the issue on the live page or preview.
6. What you expected to happen
7. I will see the image alignment correctly on the live/preview page.

What happened

The image is slightly shifted to the left, causing text to overlap with the image when right-aligned, and creating a larger gap between the text and the image when left-aligned.

This was originally reported in ​https://github.com/Automattic/wp-calypso/issues/92833

[mrfoxtalbot]

Offset Image Floats in Twenty Sixteen

[mrfoxtalbot]

Offset Image Floats in Twenty Sixteen (right)

[karmatosed]

Unfortunately, using these steps and the latest version of Twenty Sixteen, I am unable to replicate. I will share screenshots but my thoughts are there might be other steps or things that are at play here to consider. Once we have those we can progress knowing them.

[karmatosed]

Showing it working on front.

[karmatosed]

Adding multiples to see if issue.

[sabernhardt]

The negative margin itself is part of an ​intentional design feature for full-width images and aligned blockquote elements.

The bug with resized images requires a specific set of conditions to reproduce, and I was able to experience it with WordPress 6.5 and Twenty Sixteen 3.2 as well as WP 6.6.

• Place the Image block after enough content so that it would appear below the entry meta on large screens.
• Choose an image that is at least 840 pixels wide.
• Change the Width setting to resize the image, but keep the "Large" or "Full Size" Resolution setting.

The below entry meta script checks the width attribute for the size, but the editor adjusts the image width in the style attribute.

[sabernhardt]

The below-entry-meta class can be added incorrectly whether the block has some alignment setting (left, right or center):

<div class="wp-block-image">
	<figure class="alignleft size-large is-resized">
		<img width="1024" height="512" class="wp-image-30 below-entry-meta" style="object-fit:cover;width:294px;height:auto" ... >
		<figcaption class="wp-element-caption below-entry-meta">caption</figcaption>
	</figure>
</div>

or without alignment:

<figure class="wp-block-image size-large is-resized">
	<img width="1024" height="512" class="wp-image-30 below-entry-meta" style="object-fit:cover;width:294px;height:auto" ... >
	<figcaption class="wp-element-caption below-entry-meta">caption</figcaption>
</figure>

Trac ticket: https://core.trac.wordpress.org/ticket/61723

[sabernhardt]

I just added the word "incorrectly" in comment:3 because those are examples of how the below-entry-meta class is wrong with the current functions.js. The script needs to avoid adding the class when the style attribute sets a smaller size than the width attribute.

[umeshsinghin]

Hi @sabernhardt,

I have made the changes as suggested. Please review and confirm.

[karmatosed]

I am going to add testing keyword to this so we can ensure that happens. When testing please note the specific instructions as it needs those to recreate, thank you @sabernhardt.

[gikaragia]

Center alignment not respected

[gikaragia]

Another related issue caused by the "Overhanging Full-Size Image" feature is that the center alignment is ignored. When the user sets a center alignment to the image block, the image is aligned to the left regardless (see the attachment above)

Shouldn't the setting be respected and the image be centered in the middle?

This was raised initially here: ​https://github.com/Automattic/themes/issues/7336