WordPressのエディタ―外でReactを使う方法

WordPressのブロックエディタ―(gutenberg)ではReactが使用されています。そのためカスタムフィールド等では特段何もしなくてもReactを使用できます。

今回紹介するのはブロックエディター外の旧エディタ―、管理画面で使用する方法を紹介します。

一般的な読み込みで表示させる

手っ取り早いのは該当ページでスクリプトタグで読み込む方法です。

自身の作成したページの時のみcdnからスクリプトを読み込みます。

add_action( 'admin_enqueue_scripts', function( $hook ) {
    if ( 'my_setting_page' === $hook ) {
        wp_enqueue_script( 'my-react-18', 'https://unpkg.com/react@18/umd/react.production.min.js' );
        wp_enqueue_script( 'my-react-dom-18', 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js' );
        wp_enqueue_script( 'my-script', 'path/my-script.js', [ 'my-react-18', 'my-react-dom-18' ] );
    }
} );

非常に簡単ですね。

ただし、ブロックエディタ―を使用するときのようにWordPressのコンポーネントを使用したい場合はどうでしょうか。

上記の方法では少し難しそうです。

WordPressのブロックコンポーネントを利用する前提の場合を見てみましょう。

WordPressコンポーネントを利用する前提でReactを読み込む

ブロックエディタ―を使用するときWordPressのコンポーネントはどのように読み込まれているでしょうか。

あまり考えたことはない(考える必要がない)かもしれませんが、ブロックエディタ―で必要なスクリプトの依存関係で呼び出されています。

この方法を使用してブロックエディタ―外でReactを使用できるようにしてみましょう。

add_action( 'admin_enqueue_scripts', function( $hook ) {
    if ( 'my_setting_page' === $hook ) {
        wp_enqueue_script( 'my-script', 'path/my-script.js', [ 'react', 'react-dom', 'wp-components' ] );
    }
} );

あらかじめ「react」「react-dom」という名前で登録してありますので呼び出すだけです。

スクリプト側は「@wordpress/scripts」を使用してビルドしてあげればOKです。

まとめ

ブロックを作成する要領でブロックエディタ―外でReactを利用しようをしたときに困ったので備忘録です。

wordpressで「react」「react-dom」が読み込まれるため、「@wordpress/scripts」でビルドを行ってもreact本体が含まれません。そのことに気づかず時間を無駄にしました。。。