Gutenberg block get categories in SelectControl

admin管理员组

文章数量:1327843

I'm creating a block. I want my block to be able to output posts that can be "filtered". It should be possible to choose from which category the posts should be displayed. I have gotten so far that I have a function that gives me the categories and you can also select them. Then the values ​​are written in a shortcode. But my problem is, I don't see the select field at first. If I then click somewhere within the editor and then click on my block again, I get to see the SelectControl. If I reload the page and click on my block too quickly, I also get an error that the foreach is empty. How can I make sure that my foreach is already filled before loading my block?

My edit.js

function getCategories() {
    const options = [];
    const postCategory = wp.data.select('core').getEntityRecords('taxonomy', 'category');
    postCategory.forEach((cat) => {
        options.push({ value: cat.id, label: cat.name });
    });
    return options;
}

...

<SelectControl
    multiple
    label={__('Cat')}
    options={getCategories()}
    onChange={onChangeCategoriesField}
    value={categories}
/>

I'm creating a block. I want my block to be able to output posts that can be "filtered". It should be possible to choose from which category the posts should be displayed. I have gotten so far that I have a function that gives me the categories and you can also select them. Then the values ​​are written in a shortcode. But my problem is, I don't see the select field at first. If I then click somewhere within the editor and then click on my block again, I get to see the SelectControl. If I reload the page and click on my block too quickly, I also get an error that the foreach is empty. How can I make sure that my foreach is already filled before loading my block?

My edit.js

function getCategories() {
    const options = [];
    const postCategory = wp.data.select('core').getEntityRecords('taxonomy', 'category');
    postCategory.forEach((cat) => {
        options.push({ value: cat.id, label: cat.name });
    });
    return options;
}

...

<SelectControl
    multiple
    label={__('Cat')}
    options={getCategories()}
    onChange={onChangeCategoriesField}
    value={categories}
/>

• block-editor

Share Improve this question asked Jul 31, 2020 at 7:55 180690180690 18122 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The problem is that calling wp.data.select triggers a fetch and the data takes some time to be available. Until that happens the value returned is an empty array.

My suggestion here is to use wp.data.useSelect, which is a React hook made specifically for this, so the component re-renders when there is a change in the data:

const MyComponent = () => {

    const categories = useSelect(select =>
        select('core').getEntityRecords('taxonomy', 'category')
    );

    const [categories_selected, setCategoriesSelected] = useState([]);

    return (
        <SelectControl
            multiple
            label={__('Cat')}
            options={categories.map(({id, name}) => ({label: name, value: id}))}
            onChange={(selected) => {
                // I haven't tested this code so I'm not sure what onChange returns.
                // But assuming it returns an array of selected values:
                setCategoriesSelected(selected)
            }}
            value={categories_selected}
        />
    );
};

This will also have the "issue" that the value on the first call of select('core').getEntityRecords('taxonomy', 'category') is empty. So you might want to consider it and return something different in the component if categories.length === 0.

If you really need to prevent this from happening, I guess you could call wp.data.select('core').getEntityRecords('taxonomy', 'category') in your script, close to the top, so when it is called by the component for the first time the data is already in the store.

本文标签： Gutenberg block get categories in SelectControl