How to register a new Gutenberg visual editor block in JavaScript

registerblock-default-icon.js

// Import __ from i18n internationalization library
const { __ } = wp.i18n;
// Import registerBlockType() from block building libary
const { registerBlockType } = wp.blocks;
// Import the element creator function (React abstraction layer)
const el = wp.element.createElement;


/**
 * Register Block using default icon options.
 * 
 * @param   {String}    name        Block name, namespaced
 * @param   {Object}    settings    Block settings
 * @return  {?WPBlock}              Return the block or 'undefined'
*/
registerBlockType('js4wpgb/static-content', {
    title: __('Custom Block', 'JS4WPGB'),
    // Icon for the block
    // Choose from here by default https://developer.wordpress.org/resource/dashicons/
    icon: 'admin-settings',
    category: 'common',
    edit( props ) {
        return el('p', {}, 'Hello world!');
    },
    save( props ) {
        return el('p', {}, 'Hello world!');
    }
});