Gutenberg: Return all image sizes in onSelect object from MediaPlaceholder

[florianbrinkmann]

Is your feature request related to a problem? Please describe.

I created a block to display logos, using large parts of the gallery block’s logic – media upload via MediaPlaceholder. I created a custom image size for those logos that I want to use.

The problem: In the function that is called by the onSelect event of the MediaPlaceholder, I do not get all image sizes in the object if I select an image from the media library. However I get an object with all image sizes if I upload images via the MediaPlaceholder component.

This is the object I get in the function called by onSelect after selecting an image from the media library (only the core image sizes):

{
  "sizes": {
    "thumbnail": {
      "height": 150,
      "width": 150,
      "url": "http://example.com/wp-content/uploads/2018/07/12065745_10153615945739417_1325080758910343869_n-150x150.jpg",
      "orientation": "landscape"
    },
    "medium": {
      "height": 108,
      "width": 300,
      "url": "http://example.com/wp-content/uploads/2018/07/12065745_10153615945739417_1325080758910343869_n-300x108.jpg",
      "orientation": "landscape"
    },
    "full": {
      "url": "http://example.com/wp-content/uploads/2018/07/12065745_10153615945739417_1325080758910343869_n.jpg",
      "height": 260,
      "width": 720,
      "orientation": "landscape"
    }
  },
  "mime": "image/jpeg",
  "type": "image",
  "subtype": "jpeg",
  "id": 90,
  "url": "http://example.com/wp-content/uploads/2018/07/12065745_10153615945739417_1325080758910343869_n.jpg",
  "alt": "",
  "link": "http://example.com/startseite/12065745_10153615945739417_1325080758910343869_n/",
  "caption": ""
}

And this is the object I get after uploading an image (includes my reference_image size):

{
  "alt": "",
  "caption": "",
  "id": 349,
  "link": "http://example.com/startseite/12065745_10153615945739417_1325080758910343869_n-2/",
  "title": "12065745_10153615945739417_1325080758910343869_n",
  "url": "http://example.com/wp-content/uploads/2018/08/12065745_10153615945739417_1325080758910343869_n.jpg",
  "mediaDetails": {
    "sizes": {
      "thumbnail": {
        "file": "12065745_10153615945739417_1325080758910343869_n-150x150.jpg",
        "width": 150,
        "height": 150,
        "mime_type": "image/jpeg",
        "source_url": "http://example.com/wp-content/uploads/2018/08/12065745_10153615945739417_1325080758910343869_n-150x150.jpg"
      },
      "medium": {
        "file": "12065745_10153615945739417_1325080758910343869_n-300x108.jpg",
        "width": 300,
        "height": 108,
        "mime_type": "image/jpeg",
        "source_url": "http://example.com/wp-content/uploads/2018/08/12065745_10153615945739417_1325080758910343869_n-300x108.jpg"
      },
      "reference_image": {
        "file": "12065745_10153615945739417_1325080758910343869_n-138x50.jpg",
        "width": 138,
        "height": 50,
        "mime_type": "image/jpeg",
        "source_url": "http://example.com/wp-content/uploads/2018/08/12065745_10153615945739417_1325080758910343869_n-138x50.jpg"
      },
      "full": {
        "file": "12065745_10153615945739417_1325080758910343869_n.jpg",
        "width": 720,
        "height": 260,
        "mime_type": "image/jpeg",
        "source_url": "http://example.com/wp-content/uploads/2018/08/12065745_10153615945739417_1325080758910343869_n.jpg"
      }
    }
  }
}

Describe the solution you'd like

The same object structure in the onSelect function that includes all image sizes :)

Thanks in advance!

[mrleemon]

The Gallery block also suffers from this issue:

https://github.com/WordPress/gutenberg/issues/6499

[designsimply]

Looping back around to this one to ask if #7605 solves this problem for you?

[florianbrinkmann]

Is this already part of a release or do I need to test the master?

[designsimply]

Apologies for the delayed reply! #7605 went into version 3.2 of Gutenberg (indicated by the milestone on the right on the PR in GitHub).

[ajitbohra]

with #7605 and #11356 this has been fixed

In order to get all the images sizes you need to:

Add custom image size
https://developer.wordpress.org/reference/functions/add_image_size/

add_image_size( 'custom-size', 220, 180 );

_[Important]_
Make your custom size selectable from your WordPress admin
https://developer.wordpress.org/reference/functions/add_image_size/#for-media-library-images-admin

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'custom-size' => __( 'Your Custom Size Name' ),
    ) );
}

Was able to get the custom size in object returned by MediaPlaceholder onSelect.