Skip to content

Image does not return to full width after mobile preview in the post editor #68751

@triple0t

Description

@triple0t

Description

In the post editor, when you insert an image with the Image block, click on mobile preview, and toggle back to desktop preview, the image width does not return to its original size.

Note:

  • This bug is only noticeable when the Image block is selected before using the Mobile view mode

Step-by-step reproduction instructions

  1. Ensure you are using WordPress 6.7.1
  2. Open the post editor (e.g., from the WP admin dashboard, click on Add new post)
  3. Add a multi-line text paragraph.
  4. Add an Image block and use any image. (It's best to use an image with a large width)
  5. Click on the image block and ensure the image is highlighted
  6. Click on View > Mobile
  7. On mobile view, notice the image is resized. Click on the multi-line text paragraph (Added in step 3)
  8. Click on View > Desktop
  9. Back on the desktop view, notice the image size was not automatically resized.
  10. Click on the image. It should adjust itself.

Screenshots, screen recording, code snippet

Example block
You can copy and paste it into the post editor

<!-- wp:paragraph -->
<p>Ut et id unde quisquam et molestiae porro incidunt asperiores odio voluptatibus consequuntur dolores est quibusdam. Iusto qui dolorum sunt et voluptas iusto a consectetur reprehenderit sit rerum unde. Corrupti a commodi sequi modi quae amet soluta incidunt sunt qui quidem maiores dolores quod error.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2023/07/44364b18862589f06.53436652.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Some extra content here.</p>
<!-- /wp:paragraph -->

Video

Screen.Recording.at.2025-01-17.at.04-32-41.mp4

Playground: Link

Environment info

  • WordPress 6.7.1
  • I can replicate the behavior with Gutenberg 20.0.0 activated and deactivated.
  • Browser: Chrome, Firefox and Safari
  • Device: MacBook Pro (Apple M3 Max) with macOS 15.2

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] ImageAffects the Image Block[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions