web-dev-qa-db-fra.com

Comment puis-je obtenir une liste de taxonomie/catégorie à l'intérieur d'un bloc de Gutenberg?

Je voudrais afficher une liste déroulante de catégories (ou autre taxonomie) à l'intérieur d'un bloc de Gutenberg. Je ne peux que penser à deux façons de le faire:

  1. Créez un tableau de la taxonomie en php et utilisez wp_localize_script pour rendre ces données disponibles à mon bloc javascript.
  2. Utilisez fetch()? dans le bloc pour atteindre l'API à/wp-json/wp/v2/categories/et obtenir toutes les catégories.

Est-ce que l'une de ces méthodes est préférée? Existe-t-il une autre méthode intégrée ou une meilleure façon de procéder?

Modifier

Au fur et à mesure de mes recherches, j'ai découvert une autre méthode disponible dans le plugin Gutenberg et probablement disponible une fois que cet éditeur est devenu partie intégrante du noyau: wp.apiFetch() . Apparemment, il s’agit d’une enveloppe de récupération qui cache certaines des parties inutiles. Maintenant, je me demande si c'est la méthode préférée.

  1. Utilisez wp.apiFetch() dans le bloc pour accéder à la REST api à/wp/v2/categories et obtenir toutes les catégories.

La prise

À première vue, il semble plus judicieux d’utiliser la fonction apiFetch (). Cependant, comme c'est asynchrone, les données ne sont pas chargées dans l'élément JSX. Je ne suis pas sûr de savoir comment charger ces données dans l'élément.

categoriesajaxblock-editor
4
JakeParis

Chargez les éléments dans une constante en utilisant une fonction comme celle-ci:

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;
});

Ensuite, utilisez postSelections comme élément "options".

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