wake-up-neo.com

Wie erhalte ich eine Taxonomie-/Kategorieliste in einem Gutenberg-Block?

Ich möchte eine Dropdown-Liste mit Kategorien (oder anderen Taxonomien) in einem Gutenberg-Block anzeigen. Ich kann mir dazu nur zwei Möglichkeiten vorstellen:

  1. Erstellen Sie ein Array der Taxonomie in PHP und verwenden Sie wp_localize_script, um diese Daten meinem Block-Javascript zur Verfügung zu stellen.
  2. Verwenden Sie fetch()? Im Block erreichen Sie die API unter/wp-json/wp/v2/categories/und erhalten alle Kategorien.

Ist eine davon die bevorzugte Methode? Gibt es eine andere Art von eingebautem oder besserem Weg, dies zu tun?

Bearbeiten

Während ich dies weiter erforsche, habe ich von einer anderen Methode erfahren, die im Gutenberg-Plugin verfügbar ist und vermutlich verfügbar ist, sobald dieser Editor Teil des Kerns wird: wp.apiFetch() . Anscheinend ist es ein Wrapper Around Fetch, der einige der unnötigen Teile versteckt. Jetzt frage ich mich, ob dies die bevorzugte Methode ist.

  1. Verwenden Sie wp.apiFetch() im Block, um die REST-API unter/wp/v2/categories zu erreichen und alle Kategorien abzurufen.

Der Fang

Auf den ersten Blick erscheint es sinnvoller, die Funktion apiFetch () zu verwenden. Da dies jedoch asynchron ist, werden die Daten nicht in das JSX-Element geladen. Ich bin nicht sicher, wie ich diese Daten in das Element laden soll.

categoriesajaxblock-editor
4
JakeParis

Laden Sie die Elemente mit einer Funktion wie der folgenden in eine Konstante:

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

Verwenden Sie dann postSelections als Element "Optionen".

                    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

Sie benötigen keine apiFetch oder Lokalisierung, um eine Liste aller Kategorien zu erhalten. Sie können dies mit dem Modul wp.data tun:

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

Weitere Informationen finden Sie im Gutenberg-Handbuch zu Kerndaten.

1
Aaron