JSON File in Gutenberg - Read For Learn

You can accomplish this with the good ol’ wp_localize_script.

Step 1: When you register your blocks script, you already will do something like this:

wp_register_script(
      'my-awesome-block',
      plugins_url('/blocks/dist/blocks.build.js', __FILE__),
      array('wp-blocks', 'wp-element','wp-editor','wp-components','lodash'),
      filemtime(plugin_dir_path(__FILE__).'blocks/dist/blocks.build.js')
    );

After this (within the same function) insert:

//Do whatever to parse the json-file or get the categories, get them into a nice array like $my_awesome_json_kats. I would recommend to build an array like this for use with the select control:
//array(
//    array(
//      'label' => 'My First Option',
//      'value' => 'my_first_option'
//    ),
//    array(
//      'label' => 'My Second Option',
//      'value' => 'my_second_option'
//    ), 
//)
wp_localize_script('my-awesome-block','blockcats',array('jsoncats' => $my_awesome_json_kats);

Step 2:
In your Block script, you can now access a global variable named blockcats, which is an object of all the stuff you localized

var my_kats = blockcats.jsoncats;
//now you can build your Select Control
const MySelectControl = withState( {
    size: '50%',
} )( ( { size, setState } ) => ( 
    <SelectControl
        label="My Awesome JSON Cats"
        value={ size }
        options=my_kats
        onChange={ ( size ) => { setState( { size } ) } }
    />
) );
//Took this code from the Docs for SelectControl, maybe you have to use it somehow else, but the options should be set to my_kats

Step 3:???

Step 4: Profit! 😉

Happy Coding!

Related Posts: