Gutenberg Modular Components

gutenberg_es6_modular_components.js

import Input from './components/Input.es6';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;

registerBlockType( 'learn-gutenberg/ex2-react', {
    title: __( 'Learn Gutenberg Example 2: React', 'learn-gutenberg' ),
    category: 'widgets',
    supportHTML: false,
    attributes: {
        who: {
            selector: 'p',
            attribute: 'who'
        },
        salutation: {
            selector: 'p',
            attribute: 'salutation',
            default: 'Hi'
        },
        bold: {
            selector: 'p',
            attribute: 'bold'
        }
    },
    edit({attributes, setAttributes, className, focus, id}) {

        const inputChangeHandler = ( event ) => {
            let newAttr = {};
            newAttr[event.target.id] = event.target.value;
            setAttributes( newAttr );
        };

        const changeBold = ( event ) => {
            setAttributes({bold: event.target.value});
        };

        return el(
            'div',
            { className: className },
            [
                el(
                    'p',
                    {},
                    attributes.salutation + ' ' + attributes.who
                ),
                el(
                    'p',
                    {},
                    attributes.bold
                ),
                el(
                    'div',
                    {},
                    [
                        el(
                            'select',
                            {
                                onChange: changeBold,
                            },
                            [
                                el(
                                    'option',
                                    {
                                        value: 'true'
                                    },
                                    __( 'Bold On', 'text-domain' )
                                ),
                                el(
                                    'option',
                                    {
                                        value: 'false'
                                    },
                                    __( 'Bold Off', 'text-domain' )
                                )
                            ]
                        )
                    ]
                ),
                el(
                    'div',
                    {},
                    Input( className, 'salutation', attributes.salutation, 'Salutation', inputChangeHandler )
                ),
                el(
                    'div',
                    {},
                    Input( className, 'who', attributes.who, 'Who', inputChangeHandler )
                )
            ]
        );
	},

    save: function({attributes}) {
        if ( 'true' === attributes.bold ) {
            return el(
                'p',
                {
                    who: attributes.who,
                    bold: attributes.bold,
                    salutation: attributes.salutation
                },
                [
                    el(
                        'strong',
                        {},
                        __( 'Hi', 'text-domain' ) + ' ' + attributes.who
                    )
                ]
            );
        }
        return el(
            'p',
            {
                who: attributes.who,
                bold: attributes.bold,
                salutation: attributes.salutation
            },
            __( 'Hi', 'text-domain' ) + ' ' + attributes.who
        );
    }
} );

input.es6.js

const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;

export default function Input( className, id, value, label, changeHandler ) {
    return el(
        'div',
        {
            className: className
        },
        [
            el(
                'label',
                {
                    htmlFor: id
                },
                __( label + '?', 'text-domain' )
            ),
            el(
                'input',
                {
                    id: id,
                    type: "text",
                    onChange: changeHandler,
                    value: value,
                    label: label
                }
            )
        ]
    )
}