Row Block with image: Inconsistencies between editor and published content

[filipanoscampos]

Quick summary

When using a row block with an image and text, for example, the image preview doesn't match the result in the live site, making it difficult to edit and make decisions.

Steps to reproduce

1. Add a row block to a page or post, with an image and some text;
2. Make some changes to the image like resizing it
3. Notice how, once published, the preview in the editor doesn't match the live site
4. If multiple images are added to a row, i the editor their sizes show as varying, despite them showing correctly in the front end.

What you expected to happen

The editor to match the published page or post.

What actually happened

There were significant differences.
Here is an example from a user's site
The image in the editor:

On the published page:

And the varying sizes:

Impact

All

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

5924135-zd-woothemes

[github-actions]

Support References

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

• 5924135-zen

[dpasque]

Opened the image custom sizing not being respected in Gutenberg here: WordPress/gutenberg#48295

This issue can be used used to track other tickets that come up on WPCOM!

Also, bumping priority down to normal given that it's a more narrow use case, and there are alternative ways to get images and text side-by-side.

[dpasque]

@filipanoscampos -- the one part I've been having a hard time reproducing is this part...

If multiple images are added to a row, i the editor their sizes show as varying, despite them showing correctly in the front end.

Could you share more about how you were getting that to happen? Are those images all natively different sizes? Were they resized in some way?

Apart from custom resizings not being correctly supported, I wasn't able to replicate that outcome.

[filipanoscampos]

@dpasque here is a recording of the issue on a simple site with the Blank Canvas theme:

RowImages.mp4