Gutenberg Custom Block

Question

I am trying to create a custom block for Gutenberg. So I tried something simple as this:

JS File:

var el = wp.element.createElement;

wp.blocks.registerBlockType('test/blocks', {
    title: 'Test Blocks',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {type: 'string'}
    }
},

edit: function(props) {

    return

    el( 'div', {},
        el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
    );

},

save: function(props) {           

    return

    el( 'div', {},
        el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
    );

})

The js file is part of a plugin I made and it gets loaded by the .php file. The problem is it doesn't even appear as a block option inside the Gutenberg editor. So my questions are:

1. What's wrong with my current code?
2. How can I add some fields? TextEdit, Button, etc?
3. Is it possible to have multiple fields like a repeater?
4. Why everyone makes a plugin for this? Why not just load the js file from functions.php?

Answer 1

to 1. You closed registerBlockType too early and to avoid further react errors, you should print your return in the same line as return in your edit/save functions.

var el = wp.element.createElement;

wp.blocks.registerBlockType('test/blocks', {
    title: 'Test Blocks',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {type: 'string'}

    },

edit: function(props) {

    return el( 'div', {},
                el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
            )
},

save: function(props) {     

    return  el( 'div', {},
                el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
            );
}
});

to 2. You can find elements in the Gutenberg Handbook here. Notice the search field in the top.
to 3. Where do you want to have multiple fields for what?
to 4. If the block is a plugin it is easy to load and to extend the files. You can also register editor and frontend css files for your block, and it's all in the box. ;o)