Question

我正在尝试创建一个自定义WordPress Gutenberg块，其中包含通过Rest API提取的多个分类术语复选框。我可以使用SelectControl做到这一点。使用SelectControl可以将倍数设置为true。我不认为CheckboxControl具有此选项。我想在InspectorControls中做到这一点。

Answer 1

要具有多个复选框，您将需要多个CheckboxControls。请参阅documentation for CheckboxControl了解其选项。

Answer 2

我能够从Rest API中提取分类学术语，并在const中构建复选框，但是我无法设置setAttributes。我得到这个错误，因为常量在const中不可用。

未捕获的TypeError：无法读取未定义的属性'setAttributes'

这是我的代码。

const trackCheckboxes = [];
const trackCheckboxTerms = wp.apiFetch({path: "/wp/v2/session_track"}).then(posts => {
    $.each( posts, function( key, val ) {
            trackCheckboxes.push(
                el(CheckboxControl, {
                    key: val.slug,
                    label: val.name,
                    name: 'tracks[]',
                    onChange: function(e){
                        console.log(e);
                        this.props.setAttributes({tracks: val.slug});
                    }
                }),
            );
    });
    return trackCheckboxes;
});

Answer 3

要在循环中渲染元素时，必须设置其状态，因为它是面向对象的。它们的状态值必须与属性值合并。

您应该使用js的映射而不是jquery的映射，并处理属性值的副本。

我不知道如何使用apiFetch，所以我给你一个post_array的例子。也许您可以使用{withSelect}。

const posts_array = [{name: 'post_name', slug: 'post_slug'},{name: 'post_name', slug: 'post_slug'}]
const tracks = ('tracks' in attributes) ? attributes.tracks: new Object
const YourCheckBoxes = withState({
    checked_obj: Object.assign(new Object, tracks)
})( ( { checked_obj , setState } ) => (
    <ul>
    {   
        posts_array.map((v) => (
             <li><CheckboxControl
                className="check_items"
                label={v.name}
                checked={checked_obj[v.slug]}
                onChange={ ( check ) => {
                    check ? checked_obj[v.slug] = true : delete checked_obj[v.slug]
                    setAttributes({tracks : checked_obj}) 
                    setState({checked_obj})
                } }
            /></li>
        ) )
    }
    </ul>
) )

然后，您可以在InspectorControls中调用YourCheckBoxes

<InspectorControls>
    <YourCheckBoxes />
</InspectorControls>

Answer 4

这是在InspectorControls中显示多个CheckboxControls的示例。在此示例中，我假设您在taxs变量中保存了带有分类学术语的API响应，该变量是一个对象，其键=税ID和值=布尔值（启用/禁用）。

var el = wp.element.createElement;

blocks.registerBlockType('my/block', {

  // Other properties likt title, icon...

  attributes: {
    // No source, so saved in comment
    taxs: {
      type: "object"
    }
  },

  edit: function(props) {

    var taxs = props.attributes.taxs;

    // Don't mutate the original object but make a copy of it and mutate that one
    function onTaxCheckChange(newValue) {
      var copy = Object.assign({}, taxs);
      copy[this] = newValue;
      props.setAttributes({taxs: copy});
    }

    var checkboxes = Object.keys(taxs).map(function(taxId) {
      return el(components.CheckboxControl, {
        onChange: onTaxCheckChange.bind(taxId),
        label: taxId,
        checked: taxs[taxId]
      });
    });

    return el(wp.element.Fragment, null,
      // InspectorControls elements
      el(wp.editor.InspectorControls, null,
        el('div', null, checkboxes)
      ),
      // Block editor elements, can be anything...
      el('p', null, 'My block'));
  }
});

在WordPress Gutenberg块中，如何使用InspectorControls中的CheckboxControl创建多个复选框

4 个答案: