(旧)JavaScript のロード

(2023/12/24) この文書の原文は削除されました。以後は「ブロック開発の基本原理」以下を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

プラグインを準備したら、JavaScript をロードするコードを追加できます。ここでの手順はスクリプトをエンキューする標準的な WordPress のプロセスに従います。プラグインハンドブックの「エンキュー」セクション を参照してください。

myguten-plugin.php ファイルに次のコードを追加します。

function myguten_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        plugins_url( 'myguten.js', __FILE__ )
    );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

enqueue_block_editor_assets フックを使用します。このフックはブロックエディターがロードされる際に呼び出され、JavaScript ファイル myguten.js をエンキューします。

ファイル myguten.js を作成し、次のコードを追加してください。

console.log( "I'm loaded!" );

テストとして、ブロックエディーターで新しい投稿を作成します。

ブラウザーの開発者ツールの JavaScript コンソールを利用してメッセージの表示を確認します。開発者ツールがわからない方は、Mozilla の「ブラウザー開発者ツールとは？」を参照してください。ドキュメントには JavaScript コンソールの詳細も含まれています。

コードが正しく登録されエンキューされると、コンソールにメッセージが表示されます。

テーマ開発者への注意: 上のエンキュー方法はプラグインのものです。テーマ用にブロックエディターを拡張する場合は若干異なり plugins_url() の代わりに get_template_directory_uri() 関数を使用します。テーマの場合のエンキュー例を以下に示します。

function myguten_enqueue() {
    wp_enqueue_script(
        'myguten-script',
        get_template_directory_uri() . '/myguten.js'
    );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

まとめ

この時点で、ディレクトリ wp-content/plugins/myguten-plugin 内にプラグインがあり、PHP サーバーサイドコードの myguten-plugin.php と ブラウザーで動作する JavaScript コード myguten.js の2つのファイルで実装されます。

これで必要な最初のパーツがすべてそろいました。ここからブロックエディターを拡張していきます。