1

Hi i would like to create a Block with a new Kategorie. If i select the new Block-Type, it should show me a select field with Options wich are generated by my JSON-File. The JSON Code looks like this. Is this possible?

{
    "name": {
        "text": "Name",
        "value": "[value]",
        "content": "0"
    }
}

I've read something like server-side rendering.

  • Could you provide a link to 'Block-Typ3'? As far as I know, what you're describing is not a standard feature of Gutenberg / WP 5.0. – Bram Feb 12 at 7:29
  • Sorry, Block-Type not Typ3 :) I thought i could use PHP to render my JSON File an parse the attributes to a select-field in the block.js file – Tom Feb 12 at 7:45
2

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.