Images with Captions showing very small in the Editor

[filipanoscampos]

Quick summary

On existing posts and pages in the editor, suddenly images with captions are showing in a very small size.
They look as expected on the live site.

All the sites affected so far are using Classic Themes.

Steps to reproduce

This is hard to reproduce because it would require already having set up a site with captioned images on a site with a Classic theme.
If that is the case:

1. Open a previously published post or page
2. Notice how captioned images are suddenly showing in very small size

What you expected to happen

The images to display with their set width.

What actually happened

They are showing very small in size.

Impact

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

This has been reported on two simple sites with Apostrophe 2 (changed from a retired theme called Puzzle) and Twenty-twenty active, and on an Atomic site with a third-party theme.
On the Atomic site deactivating the Gutenberg plugin solved the issue.

To solve this, the user can either load an autosave or set the image width, but this is quite demanding in cases where users have a large number of posts.

Tickets:
5903187-zd-woothemes
5900926-zd-woothemes
5882844-zd-woothemes

[github-actions]

Support References

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

• 5903187-zen
• 5900926-zen
• 5882844-zen
• 5881727-zen
• 5975414-zen
• 6006922-zen

[mgozdis]

I saw a similar issue on 5881727-zen with a simple site and TextBook theme. I could not reproduce it on a test site using the same media, blocks, and captions.

In their case, they were using Projects. On initial load when editing Projects, the components-resizable-box__container wrapping the image was setting the max-width and max-height very small inline (IE: max-width: 66px; max-height: 85.1184px;). This width could not be changed at all while editing. The site had some large images that could possibly be related along with any optimizations that are being applied.

A workaround was a regular refresh (may need to do it multiple times) or changing Preview mode. This sets the inline CSS to correct or larger sizes and allows editing.

Related issue/discussion:
WordPress/gutenberg#11529

Similar CSS mentioned here would fix it but not sure there is a way to override Gutenberg's CSS:
WordPress/gutenberg#38381 (comment)

[tanjoymor]

Ran into another case of this here #39015637-hc

[mgozdis]

Another case here: 5975414-zd-woothemes

[aisajib]

Some more reports in the forums: https://wordpress.com/forums/topic/some-images-are-tiny-in-editor/?view=all

[syhussaini]

The user came back on this ticket requesting an update. 6006922-zen

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple: Could Not Replicate
• Tested on AT: Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO

• Tests:
  • AT site using Baskerville 2 theme, images with captions in a post published on Jan 2, 2023
  • Simple site using Twenty Twenty theme, images with captions in a post published on Jan 1, 2020

In both cases, my site's images were showing up in the editor in their normal size.

AT Example

Simple Example

OTHER TESTS

• The OP notes that On the Atomic site deactivating the Gutenberg plugin solved the issue. This may have been resolved in a recent Gutenberg update rolled out to WPcom sites.
• I checked on the site from 5975414-zd-woothemes (reported 2 weeks ago), and found images with captions appearing normally in their editor.

📌 ACTIONS

• Closed as could not replicate (please reopen the issue reoccurs)

📌 Message to HEs

• @syhussaini , the user you mentioned in 6006922-zen seems to be affected by a different issue regarding Fonts - not the issue reported here. Check their original ticket for the (now solved) link to that issue.