block editor - JSON File in Gutenberg|Programmer puzzle solving

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.

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

I've read something like server-side rendering.

Share Improve this question edited Feb 12, 2019 at 7:43 asked Feb 12, 2019 at 7:27 180690 1812 silver badges9 bronze badges

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 Commented Feb 12, 2019 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 – 180690 Commented Feb 12, 2019 at 7:45

Add a comment |

1 Answer 1

Sorted by: Reset to default 3

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!

Programmer puzzle solving

block editor - JSON File in Gutenberg

1 Answer 1

Articles related to this article

comment list (0)