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

[rosepajaroja]

Quick summary

We're seeing issues with the image alignment, as shown in the screenshots below. It seems that both the image and caption have a margin-left: -40%; in the CSS code, which is causing the problem. This seems to be only happening on Twenty Sixteen. I tested Twenty Fifteen, Twenty Fourteen, and Twenty Seventeen, but the issue is not present to these other themes.

CSS code that seems to be causing the issue:

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.

What you expected to happen

I will see the image alignment correctly on the live/preview page.

What actually 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.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Available workaround:

Add this CSS code:

figcaption, img {
      margin-left: 0px!important;
}

[mrfoxtalbot]

Nice catch and great report, @rosepajaroja. Thank you!

I re-tested this and I can replicate it in core. Because it is a bundled theme, I opened an issue in track https://core.trac.wordpress.org/ticket/61723

[mxhassani]

Another one: 8651326-zen

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8651326-zen