ブロックエディター用のブロックを開発する場合、通常はモダンな JavaScript (ESNext と JSX)を使用します。このブロックエディターハンドブック内のほとんどのサンプルコードもこの構文で記述されています。
ただしこの形式の JavaScript は、ブラウザと互換性のある形に変換しなければならず、ビルドのステップが必要です。このビルドプロセスでは、JavaScriptのソースコードと関連するアセットを本番環境に適した形に変換、バンドル、最適化します。
JavaScript とビルドプロセス
ブロック開発にビルドプロセスを使用することで、モダンな JavaScript の可能性を最大限、引き出し、ESNext と JSX の使用を促進します。
ESNext は、JavaScript の最新の構文と機能を指します。JSX は、React プロジェクトによって開発された JavaScript の構文拡張で、HTML に似た JavaScript を書けます。
ブラウザは ESNext や JSX を直接実行できないため、これらの構文をブラウザ互換の JavaScript に変換する必要があります。
webpack はプラグインで拡張可能なツールで、ブラウザ互換のために JavaScript を処理し、バンドルします。Babel はwebpack のプラグインで、ESNext や JSX を標準的な JavaScript に変換します。
webpack と Babel の構成は難しいため、@wordpress/scripts パッケージの利用を推奨します。このツールは webpack と Babel を事前に構成し、開発を簡素化します。カスタム webpack や Babel 構成を書く必要は滅多にありません。
はじめての方は、wp-scripts 入門 を参照してください。
wp-scripts 概要
下図は wp-scripts パッケージを使用したビルドプロセスの概要です。このパッケージは開発環境と本番環境の標準的な構成を用いて、構成せずにすぐに動作するよう設計されています。
- 本番モード (
npm run build): このモードでは、wp-scriptsは JavaScript をコンパイルし、出力をミニファイしてファイルサイズを縮小し、ブラウザでの読み込み時間を改善します。このモードは、本番サイトにコードをデプロイする際に理想的です。 - 開発モード (
npm run start): このモードはアクティブな開発用に作成されています。デバッグを容易にするために最小化をスキップし、エラー追跡のためにソースマップを生成し、ソースファイルの変更を監視します。変更を検出すると、自動的に影響を受けるファイルをリビルドするため、リアルタイムで更新を確認できます。
また、wp-scriptsパッケージは JavaScript モジュールの使用を促進します。複数のファイルにわたってコードを配布できるため、ビルドプロセス後には整理されたバンドルを作成できます。block-development-exampleの GitHub リポジトリに良い例があります。
wp-scriptsに自身のカスタムwebpack.config.jsを指定することで、ニーズに合わせてビルドプロセスをカスタマイズできます。
ビルドプロセスなしの JavaScript
特定のシナリオにおいては、JavaScript と WordPress プロジェクトの統合にビルドプロセスを使用しない方法が最もシンプルな方法になります。これは特に、コンパイルが必要な JSX や高度な JavaScript 機能を利用しないプロジェクトに当てはまります。
ビルドプロセスを使用しない場合は、グローバルな wp オブジェクトを通して WordPress の Javascript API と直接やりとりします。WordPress が提供するすべてのメソッドとパッケージをすぐに利用できます。ただし、1つ注意点があり、スクリプトの依存関係を手動で管理しなければなりません。これには、対応する各パッケージのハンドルを、エンキューする JavaScript ファイルの依存配列に追加します。
例えば、blocks パッケージの registerBlockVariation 関数を使用して、新しいブロックバリエーション を登録するスクリプトを作成するとします。このときスクリプトの依存関係の配列に wp-blocks を含める必要があります。これにより、スクリプトが実行される時点で wp.blocks.registerBlockVariation メソッドが利用可能で、定義されていることが保証されます。
次の例では、variations.js ファイルをエンキューする際に wp-blocks の依存関係を定義しています。
function example_enqueue_block_variations() {
wp_enqueue_script(
'example-enqueue-block-variations',
get_template_directory_uri() . '/assets/js/variations.js',
array( 'wp-blocks' ),
wp_get_theme()->get( 'Version' ),
false
);
}
add_action( 'enqueue_block_editor_assets', 'example_enqueue_block_variations' );
すると、variations.jsファイルで、次のようにメディアとテキストブロックに新しいバリエーションを登録できます。
wp.blocks.registerBlockVariation(
'core/media-text',
{
name: 'media-text-custom',
title: 'Media & Text Custom',
attributes: {
align: 'wide',
backgroundColor: 'tertiary'
},
}
);
ブロックエディター内で実行するスクリプトについては、enqueue_block_editor_assets フックと標準のwp_enqueue_script 関数を併用してください。
詳細はエディター内でのアセットのエンキューを参照してください。また実践的なサンプルについては、block-development-example GitHub リポジトリにアクセスしてください。
投稿やサイトの編集中に、ブラウザの開発ツールで
wp.data.select('core/editor').getBlocks()を実行してみてください。コンソールからエディタ全体を利用できます。
その他の情報
- パッケージリファレンス
- wp-scripts 入門
- エディター内でのアセットのエンキュー
- WordPress パッケージのハンドル
- JavaScript リファレンス | MDN Web Docs
- block-development-examples | GitHub リポジトリ
- block-theme-examples | GitHub リポジトリ
- How webpack and WordPress packages interact (webpack と WordPress パッケージの関係) | Developer Blog
- ビルドプロセスの図解