block editor - Multiple checkboxes Gutenberg control

admin管理员组

文章数量:1389903

I am trying to create a similar Group Checkbox Control like the WordPress categories listing but have not been able to save my values. I am not convinced I am taking the best direction, but seem to be close to the answer.

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).

Below is an example of the edit() method I have created and I've taken notes from a similar question here, but am not able to get my selections to save:

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
        } )
    ]
},

I am trying to create a similar Group Checkbox Control like the WordPress categories listing but have not been able to save my values. I am not convinced I am taking the best direction, but seem to be close to the answer.

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).

Below is an example of the edit() method I have created and I've taken notes from a similar question here, but am not able to get my selections to save:

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
        } )
    ]
},

• block-editor

Share Improve this question edited Feb 15, 2020 at 7:47 Alex Mangini asked May 21, 2019 at 19:46 Alex ManginiAlex Mangini 2522 silver badges99 bronze badges 7

• 1 Instead of using a checkbox "value" you need to use the "checked" attribute. Also, you are creating two checkboxes that both update a single attribute called myCheckbox. You need to have a separate attribute for each checkbox. If the user can only choose one of the two, use radio buttons instead. – WebElaine Commented May 21, 2019 at 20:11
• Thank you @WebElaine. I do have checked in the Checkbox control declaration, or are you talking about actually checking myCheckbox.checked ? true : false and if so, in the setAttributes function? I ask because I am still a little unclear, though your comment has given me a better understanding. By the way, I am not trying to create a radio, I only limited the choices to keep the example code shorter. – Alex Mangini Commented May 21, 2019 at 22:10
• Yes, I meant checking true : false and using that in props.setAttributes. And, you need to have a separate attribute for each checkbox. – WebElaine Commented May 22, 2019 at 13:40
• @WebElaine when you say separate attributes are you referring to something like myCheckbox[fields.value]? I am not sure how to reference myCheckbox as an array without getting errors. – Alex Mangini Commented May 22, 2019 at 18:00
• Yes. You can either create a mycheckbox1 attribute and a mycheckbox2 attribute, or else if you are going to use a single mycheckbox attribute that is an array of values, you'll have to clone that array and update only the value that changed. Much simpler to use separate attributes IMHO. – WebElaine Commented May 22, 2019 at 18:40

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default -1

Use this code

$.each(data, function (c, fields) {
  checkboxes.push(
    el( CheckboxControl, {
      key: fields.value,
      label: fields.label,
      name: 'myCheckbox[]',
      checked: props.attributes.myCheckbox.indexOf(fields.value) > -1,
      onChange: function( val ) {
        let data = props.attributes.myCheckbox;
        if (val) {
          if (data.indexOf(fields.value) === -1) {
            data.push(fields.value);
          }
        } else {
          data = props.attributes.myCheckbox.filter((v) => v !== fields.value);
        }
        props.setAttributes({ myCheckbox: data });
      }
    })
  )
})

本文标签： block editorMultiple checkboxes Gutenberg control