Gutenberg get list of all custom image sizes

I added custom image sizes in my WordPress theme:

add_action( 'after_setup_theme', 'wpdocs_theme_setup' );
function wpdocs_theme_setup() {
    add_image_size( 'custom-size-1', 120, 120, true );
    add_image_size( 'custom-size-2', 300, 200 );
}

I made my custom sizes available across Wordpress in the image size select:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
  return array_merge( $sizes, array(
    'custom-size-1' = __( 'Custom Size 1' ),
    'custom-size-2' = __( 'Custom Size 2' )
  ) );
}

When using the core image block, in the Image Size select control, I can see my custom sizes. So that works well. However...

I created a custom image block. In my Image Size select control I want to show all the default and custom sizes. Here is what I tried:

// WordPress dependencies
import { store as blockEditorStore } from '@wordpress/block-editor';

const getImageSizes = wp.data.select( blockEditorStore ).getSettings().imageSizes;

console.log(getImageSizes);

// later I will add getImageSizes to my select control

The issue:

getImageSizes returns only the default image sizes (thumbnail, medium, large, full). How do I also get my custom sizes?

Topic block-editor plugin-json-api Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.