web-dev-qa-db-ja.com

グーテンベルクブロック内で分類/カテゴリリストを取得する方法

グーテンベルクブロックの中にカテゴリ（または他の分類法）のドロップダウンリストを表示したいです。これを行うには2つの方法しか考えられません。

  1. Phpで分類法の配列を作成し、wp_localize_scriptを使用してそのデータを私のブロックJavaScriptで使用できるようにします。
  2. fetch()を使いますか？ /wp-json/wp/v2/categories/ でapiにアクセスするブロック内で、すべてのカテゴリを取得します。

これらのうちの1つが好ましい方法ですか？これを行うための他の種類の組み込みまたはより良い方法はありますか？

編集する

私はこれを研究し続けているうちに、グーテンベルクプラグインで利用可能な、そしておそらくこのエディタがコアの一部になったときに利用可能な別の方法を学んだ： wp.apiFetch() 。どうやら、それは不要な部分の一部を隠すフェッチのラッパーです。今、私はこれが望ましい方法かどうか疑問に思います。

  1. ブロック内でwp.apiFetch()を使用して /wp/v2/categories にあるRESTapiにアクセスし、すべてのカテゴリを取得します。

キャッチ

一見したところ、apiFetch（）関数を使用する方が理にかなっているようです。ただし、これは非同期なので、データはJSX要素にロードされません。そのデータを要素にロードする方法がわかりません。

categoriesajaxblock-editor
4
JakeParis

このような関数を使用して要素を定数にロードします。

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

それからpostSelectionsをあなたの要素 "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

すべてのカテゴリのリストを取得するのにapiFetchやローカライズは必要ありません。 wp.dataモジュールでこれを行うことができます。

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

詳細については、Core Dataの Gutenberg Handbook エントリを参照してください。

1
Aaron