Gutenberg: Image size select defaults to 'Thumbnail' when an image is added but it's the full size image

Created on 17 Apr 2020  路  9Comments  路  Source: WordPress/gutenberg

Describe the bug
When using the image block if you add an image then the image is added to the block at full size, which is fine but the settings panel's Image Size select field shows the image size as Thumbnail. Maybe if no size is selected this should be "Not set/custom" or similar.

To reproduce
Steps to reproduce the behavior:

  1. Add an image block
  2. Select an image
  3. In the block settings view the Image Size select field
  4. The selected option is Thumbnail

Expected behavior
As the image was added at full size don't show the select field value as Thumbnail, as no specific size is set maybe Custom or Not Set.

Screenshots
If applicable, add screenshots to help explain your problem.

Editor version (please complete the following information):

  • WordPress version: 5.4 / Gutenberg included in core
[Block] Image [Type] Bug

Most helpful comment

The broken image size preset selector was fixed in https://github.com/WordPress/gutenberg/pull/23342 and will be included in the next release.

All 9 comments

Perhaps related to the bug I raised in #21650 but mine is specifically related to the gallery block?

This does sound similar to #21650 and similarly I'm not able to reproduce the problem. I left a comment there about providing some extra info that would be helpful: https://github.com/WordPress/gutenberg/issues/21650#issuecomment-616298301

If you're able to provide that info as well @ninetyninew, that would be great.

@talldan

Image in code editor: <!-- wp:image {"align":"center","id":116,"sizeSlug":"large","linkDestination":"custom","className":"image-fancy-right"} -->

Setting shown in editor:

image

Plugins enabled on site are Font Awesome, Rank Math and Contact Form 7, disabling these doesn't make any difference.

I just ran into this on two different sites in an hour. Both running WP 5.4 with no Gutenberg plugin.

Here's my setup:

  • WordPress 5.4
  • Gutenberg 7.9.1
  • PHP 7.3.16
  • MacOS 10.14.6
  • Chrome 81.0.4044.122

Large Image (790 x 1420 ) Test: Unable to replicate

Video of my test: https://cloudup.com/cS2XhFfPFAi

I wasn't able to replicate the described issue both with and without the Gutenberg plugin installed.

鉁匨edium Image (300 x 177) Test: Able to replicate

I was able to replicate the problem with images of this size!

Screen Shot 2020-04-22 at 5 05 04 PM

Small Image Test (137 x 103): Unable to replicate

As a final test, I tried using a very small image and found this defaulted to "Full Size" in the Image Size settings

Screen Shot 2020-04-22 at 5 00 41 PM

Based on the recent dialogue in #21650 it seems this might be related to file size in particular this "in between"/medium size.

Removing needs testing label and changing to bug.

Just noting I ran into this today. The size setting doesn't seem to do anything.

Also noting that this issue popped up for me today, both with a site owner that cannot change image sizes (thumb, medium, large, etc.) with no change.

Tried this on a test site and had the same issue. When I add an image, it is not possible to change the size of the image using those presets. I recorded a screencast of the issue here: https://d.pr/v/MdWbBs

As shown in my screencast, the Gutenberg markup is updated to reflect the correct size, but no change is seen in the editor view, nor on the live site when published.

The issue is present on WordPress.com sites too: https://github.com/Automattic/wp-calypso/issues/43197

After some more testing, I can see the issue on a fresh install of https://jurassic.ninja/ + latest Gutenberg Plugin. Here's the screencast: https://d.pr/v/cOXxJF

On https://jurassic.ninja/ site without Gutenberg Plugin the Image Block has no issues: https://d.pr/v/jEUheH

The broken image size preset selector was fixed in https://github.com/WordPress/gutenberg/pull/23342 and will be included in the next release.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

moorscode picture moorscode  路  3Comments

BE-Webdesign picture BE-Webdesign  路  3Comments

pfefferle picture pfefferle  路  3Comments

wpalchemist picture wpalchemist  路  3Comments

franz-josef-kaiser picture franz-josef-kaiser  路  3Comments