Gutenberg Custom Block

by

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)

Leave a Comment