gutenberg-box.js

wp.blocks.registerBlockType(
    'spiro/box',
    {
        title: 'Spiro Box',
        icon: 'tablet',
        category: 'layout',

        attributes: {
            headline: {
                type: 'string',
            },
            color: {
                type: 'string',
            },
            boxurl: {
                type: 'string',
            },
            content: {
                type: 'string',
            }
        },

        edit: function(props) {
            return wp.element.createElement(
                'div',
                {
                    className: 'box box-' + props.attributes.color
                },
                [
                    // Headline
                    wp.element.createElement(
                        'h3',
                        {
                            style:
                                {
                                    display: 'flex',
                                },
                        },
                        [
                            wp.element.createElement(
                                'span',
                                {},
                                'Headline: '
                            ),
                            wp.element.createElement(
                                wp.editor.RichText,
                                {
                                    key: 'editable',
                                    tagName: 'span',
                                    style: {
                                        display: 'inline-block',
                                        minWidth: '100px',
                                        border: '1px dashed gray'
                                    },
                                    onChange: function(data) {
                                        props.setAttributes({headline: data});
                                    },
                                    value: props.attributes.headline
                                }
                            ),
                        ]
                    ),

                    // Color
                    wp.element.createElement(
                        'div',
                        {
                            style:
                                {
                                    display: 'flex',
                                }
                        },
                        [
                            wp.element.createElement(
                                'span',
                                {},
                                'Color:'
                            ),
                            // White
                            wp.element.createElement(
                                'label',
                                {},
                                [
                                    wp.element.createElement(
                                        'input',
                                        {
                                            style: {marginLeft: '2em'},
                                            type: 'radio',
                                            name: props.id + '_color',
                                            onChange: function(data) {
                                                props.setAttributes({color: 'white'});
                                            },
                                        }
                                    ),
                                    wp.element.createElement('span', {}, 'White'),
                                ]
                            ),

                            // Gold
                            wp.element.createElement(
                                'label',
                                {},
                                [
                                    wp.element.createElement(
                                        'input',
                                        {
                                            style: {marginLeft: '2em'},
                                            type: 'radio',
                                            name: props.id + '_color',
                                            onChange: function(data) {
                                                props.setAttributes({color: 'gold'});
                                            },
                                        }
                                    ),
                                    wp.element.createElement('span', {}, 'Gold'),
                                ]
                            ),

                            // Blue
                            wp.element.createElement(
                                'label',
                                {},
                                [
                                    wp.element.createElement(
                                        'input',
                                        {
                                            style: {marginLeft: '2em'},
                                            type: 'radio',
                                            name: props.id + '_color',
                                            onChange: function(data) {
                                                props.setAttributes({color: 'blue'});
                                            },
                                        }
                                    ),
                                    wp.element.createElement('span', {}, 'Blue'),
                                ]
                            ),
                        ]
                    ),

                    // URL
                    wp.element.createElement(
                        'label',
                        {
                            style: {
                                display: 'flex',
                            }
                        },
                        wp.element.createElement(
                            'span',
                            {},
                            'URL:'
                        ),
                        wp.element.createElement(
                            wp.editor.RichText,
                            {
                                key: 'editable',
                                tagName: 'p',
                                style: {
                                    minWidth: '100px',
                                    border: '1px dashed gray'
                                },
                                onChange: function(data) {
                                    props.setAttributes({boxurl: data});
                                    window.console.log('new url: ', data);
                                    window.console.log('url: ', props.attributes.boxurl);
                                },
                                value: props.attributes.boxurl
                            }
                        ),
                    ),

                    // Text
                    wp.element.createElement(
                        'label',
                        {
                            style:
                                {
                                    display: 'flex',
                                }
                        },
                        [
                            'Text:',
                            wp.element.createElement(
                                wp.editor.RichText,
                                {
                                    key: 'editable',
                                    tagName: 'p',
                                    style: {
                                        minWidth: '100px',
                                        border: '1px dashed gray'
                                    },
                                    onChange: function(data) {
                                        props.setAttributes({content: data});
                                    },
                                    value: props.attributes.content
                                }
                            )
                        ]
                    ),
                ]
            )
                ;
        },

        save: function(props) {
            return wp.element.createElement(
                'div',
                {
                    className: 'box box-' + props.attributes.color
                },
                wp.element.createElement(
                    'a',
                    {
                        href: props.attributes.boxurl,
                    },
                    [
                        wp.element.createElement(
                            'h3',
                            {},
                            props.attributes.headline
                        ),
                        wp.element.createElement(
                            'p',
                            {},
                            props.attributes.content
                        )
                    ]
                )
            )
        }
    }
);