Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.
5 deleted 1 character in body
source | link

I'd like these checkbox values to save to a single attribute as an array, but I am fine with saving the selections as a string (value1,value3,value4,etc.).

I'd like these checkbox values to save to a single attribute as an array, but I am fine with saving the selections as a string (value1,value3,value4,etc.).

I'd like these checkbox values to save to a single attribute as an array, but I am fine with saving the selections as a string (value1,value3,value4,etc).

4 Added attributes() method for better picture, updated checkbox code with slight potential progress
source | link
attributes: {
    myCheckbox: {
        type: 'array',
        default: []
    }
},
edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: 'Checkbox 1',
            value: 'checkbox1'
        },
        {
            label: 'Checkbox 2',
            value: 'checkbox2'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: 'myCheckbox[]',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : fieldsmyCheckbox[fields.valuevalue] });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: 'inspector'
            },
            el(
                PanelBody, {
                    title: __( 'Settings' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: 'block/name',
            attributes: props.attributes
        } )
    ]
},

edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: 'Checkbox 1',
            value: 'checkbox1'
        },
        {
            label: 'Checkbox 2',
            value: 'checkbox2'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: 'myCheckbox[]',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : fields.value });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: 'inspector'
            },
            el(
                PanelBody, {
                    title: __( 'Settings' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: 'block/name',
            attributes: props.attributes
        } )
    ]
},

attributes: {
    myCheckbox: {
        type: 'array',
        default: []
    }
},
edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: 'Checkbox 1',
            value: 'checkbox1'
        },
        {
            label: 'Checkbox 2',
            value: 'checkbox2'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: 'myCheckbox[]',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : myCheckbox[fields.value] });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: 'inspector'
            },
            el(
                PanelBody, {
                    title: __( 'Settings' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: 'block/name',
            attributes: props.attributes
        } )
    ]
},

3 Still making progress on setAttributes()
source | link
edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: 'Checkbox 1',
            value: 'checkbox1'
        },
        {
            label: 'Checkbox 2',
            value: 'checkbox2'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: 'myCheckbox[]',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : valfields.value });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: 'inspector'
            },
            el(
                PanelBody, {
                    title: __( 'Settings' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: 'block/name',
            attributes: props.attributes
        } )
    ]
},

edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: 'Checkbox 1',
            value: 'checkbox1'
        },
        {
            label: 'Checkbox 2',
            value: 'checkbox2'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: 'myCheckbox[]',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : val });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: 'inspector'
            },
            el(
                PanelBody, {
                    title: __( 'Settings' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: 'block/name',
            attributes: props.attributes
        } )
    ]
},

edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: 'Checkbox 1',
            value: 'checkbox1'
        },
        {
            label: 'Checkbox 2',
            value: 'checkbox2'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: 'myCheckbox[]',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : fields.value });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: 'inspector'
            },
            el(
                PanelBody, {
                    title: __( 'Settings' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: 'block/name',
            attributes: props.attributes
        } )
    ]
},

2 Updated code with my progress, just need to figure out the proper way to use setAttributes
source | link
1
source | link