admin管理员组

文章数量:1291128

I would like to display a dropdown list of categories (or other taxonomy) inside of a Gutenberg block. I can only think of two ways to do this:

1. Create an array of the taxonomy in php and use wp_localize_script to make that data available to my block javascript.
2. Use fetch()? in the block to reach out to the api at /wp-json/wp/v2/categories/ and get all the categories.

Are one of these the preferred method? Is there some other kind of built-in or better way to do this?

Edit

As I continue to research this, I learned of another method available in the Gutenberg plugin and presumably available once this editor becomes part of core: wp.apiFetch(). Apparently, it's a wrapper around fetch which hides away some of the unnecessary parts. Now I'm wondering if this is the preferred method.

3. Use wp.apiFetch() in the block to reach out to the REST api at /wp/v2/categories and get all the categories.

The Catch

On first glance, it seems to make more sense to use the apiFetch() function. However, because that's asynchronous, the data doesn't get loaded into the JSX element. I'm not sure how to make that data load into the element.

I would like to display a dropdown list of categories (or other taxonomy) inside of a Gutenberg block. I can only think of two ways to do this:

1. Create an array of the taxonomy in php and use wp_localize_script to make that data available to my block javascript.
2. Use fetch()? in the block to reach out to the api at /wp-json/wp/v2/categories/ and get all the categories.

Are one of these the preferred method? Is there some other kind of built-in or better way to do this?

Edit

As I continue to research this, I learned of another method available in the Gutenberg plugin and presumably available once this editor becomes part of core: wp.apiFetch(). Apparently, it's a wrapper around fetch which hides away some of the unnecessary parts. Now I'm wondering if this is the preferred method.

3. Use wp.apiFetch() in the block to reach out to the REST api at /wp/v2/categories and get all the categories.

The Catch

On first glance, it seems to make more sense to use the apiFetch() function. However, because that's asynchronous, the data doesn't get loaded into the JSX element. I'm not sure how to make that data load into the element.

• categories
• ajax
• block-editor

Share Improve this question edited Nov 12, 2018 at 22:04 JakeParis asked Nov 12, 2018 at 21:01 JakeParisJakeParis 66333 gold badges77 silver badges2222 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 25

You don't need apiFetch or localization to get a list of all categories. You can do this with the wp.data module:

wp.data.select('core').getEntityRecords('taxonomy', 'category');

See the Gutenberg Handbook entry on Core Data for more details.

Load the elements into a constant using a function like this:

const postSelections = [];

const allPosts = wp.apiFetch({path: "/wp/v2/posts"}).then(posts => {
    postSelections.push({label: "Select a Post", value: 0});
    $.each( posts, function( key, val ) {
        postSelections.push({label: val.title.rendered, value: val.id});
    });
    return postSelections;
});

Then use postSelections as your element "options".

                    el(
                        wpponents.SelectControl,
                        {
                            label: __('Select a Post'),
                            help: 'Select a post to display as a banner.',
                            options: postSelections,
                            value: selectedPost,
                            onChange: onChangePost
                        }
                    ),

本文标签： categoriesHow would I get a taxonomycategory list inside a Gutenberg block