Gutenberg ES5 wp.blocks.registerBlockType with wp.element.createElement

gutenberg_es5_registerBlockType.js

wp.blocks.registerBlockType( 'learn-gutenberg/ex2-plainjs', {
    title: __( 'Learn Gutenberg Example 2: Plain JS', 'learn-gutenberg' ),
    category: 'widgets',
    icon: 'admin-users',
    keywords: [
        __( 'lesson', 'ex2-plainjs' ),
        __( 'tutorial', 'ex2-plainjs' ),
        __( 'javascript', 'ex2-plainjs' )
    ],
    attributes: {
        who: {
            type: 'string',
            selector: 'p',
            attribute: 'who',
        },
    },
    edit: function( props ) {
        var attributes = props.attributes,
            setAttributes = props.setAttributes,
            className = props.className,
            id = props.id;

        // Set default “who” attribute value.
        if ( ! attributes.hasOwnProperty( 'who' ) ) {
            setAttributes( { who: __( 'Roy', 'ex2-plainjs' ) } );
        }

        // Change event for form input
        var whoChange = function( event ) {
            setAttributes( { who: event.target.value } );
        };

        // Create block UI using WordPress createElement
        return element(
            'div',
            { className: className },
            [

                element(
                    'p',
                    {
                        who: attributes.who
                    },
                    __( 'Who', 'ex2-plainjs' ) + ': ' + attributes.who
                ),
                element(
                    'div',
                    {

                    },
                    [
                        element(
                            'label',
                            {
                                for: id + '-control'
                            },
                            __( 'Who', 'ex2-plainjs' )
                        ),
                        element(
                            'input',
                            {
                                id: id + '-control',
                                value: attributes.who,
                                onChange: whoChange
                            }
                        ),
                    ]

                ),

            ]
        );
    },
    save: function( props, className ) {
        var attributes = props.attributes;
        var who = attributes.who || 'no one at all';
        return element(
            'p',
            {
                className:className,
                who: attributes.who
            },
            __( 'Who', 'ex2-plainjs' ) + ': ' + who,
        );
    }
} );