search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Editor: Images don't resize (not screen responsive) in Mobile view #62064

Open davipontesblog opened 2 years ago

davipontesblog commented 2 years ago

Quick summary

It seems like a Gutenberg update may have broken the editor styles for mobile responsiveness for Images (Image block tested) while in the Editor. This is not happening in live post view, only in the Editor.

See below some screenshots:

In Editor:

Screen Shot on 2022-03-18 at 10-26-43

and

Screen Shot 2022-03-18 at 10 37 36

Post looks fine:

Screen Shot 2022-03-18 at 10 38 03

I tested with two themes, and it happens on both: Twenty Twenty Two (Swiss) and Hemingway Rewritten.

Gutenberg: v12.8.0 Editing Toolkit: 3.29347 WP AMP: 2.0.5

Steps to reproduce

  1. Start at the WordPress Editor on your test site
  2. Add an Image block and add an image
  3. Change the Editor "Preview" to Mobile

What you expected to happen

Image to be responsive to the Mobile view, and resize as the other content does.

What actually happened

Image does not resize, appears cut.

Context

User report: 34619152-hc

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

No response

Workaround details

No response

edwinho89 commented 2 years ago

Experienced the same issue, and looks to be something to do with the width being made on the editor.

image
cuemarie commented 2 years ago

Encountered this issue here: 34865846-hc Simple Site, issue presented using both Balasana and Russell themes

This user's site is in Coming Soon mode, so the only workaround for previewing how their page looks on mobile is via the Customizer - making building their site quite a bit more tedious.

Ran a quick test:

formosattic commented 2 years ago

Looks like this will need to be fixed at Gutenberg, see https://github.com/WordPress/gutenberg/issues/39836.

kathrynwp commented 2 years ago

Another user reported this in 34395629-hc with the Eris theme.

kathrynwp commented 2 years ago

Also reported in 34964248-hc

cintacks commented 2 years ago

I encountered this on Blank Canvas - images are overlapping as there's no viable breakpoint (the editor width is narrower than the frontend width. The frontend breakpoints degrade perfectly - this is an editor-only issue.

Example: https://d.pr/v/vflbfK

4925694-zd-woothemes