test attributes color gutenberg

var addFilter = wp.hooks.addFilter;
var Fragment = wp.element.Fragment;
var RichText = wp.editor.RichText;
var InnerBlocks = wp.editor.InnerBlocks;
var el = wp.element.createElement;


// Hook function to add a caption to the core code block
function addColorColumns(settings) {

    if (settings.name !== "core/columns") {
        return settings;
    }

    const newCodeBlockSettings = Object.assign({}, settings, {

        attributes: Object.assign({}, settings.attributes, {
          backgroundColor: {
            selector: ".wp-block-columns",
            type: 'string',
            default: '#fff',
          }
        }),

        edit: function(props) {

            function setBackgroundColor( newbg_color ) {
                console.log(newbg_color);
                props.setAttributes( { backgroundColor: newbg_color } );
            }

            var backgroundColor = props.attributes.backgroundColor;

            return el(
                Fragment,
                {},
                el(
                    settings.edit,
                    props
                ),
                el(
                    wp.editor.InspectorControls,
                    {},
                    el(
                        wp.components.PanelColor,
                        {},
                        'Background color',
                        el(
                            wp.editor.ColorPalette,
                            {
                                value: backgroundColor,
                                onChange: setBackgroundColor
                            }
                        )
                    )
                )
            );
        },

        save: function(props) {

            const { columns } = props.attributes;

            return el(
                "div",
                { 
                    style: { backgroundColor: props.attributes.backgroundColor },
                    className: `has-${ columns }-columns`,
                }, InnerBlocks.Content,
                el(settings.save, props)
            );
        }
    });

    return newCodeBlockSettings;
}

// Registering the filter to edit the block settings
addFilter(
  "blocks.registerBlockType",
  "myplugin/add-code-caption",
  addColorColumns
);