フックは、WordPressの基本機能の1つです。フックを使用すると、WordPressのコアに「フック」し、WordPressのライフサイクル内の特定の時点で独自のコードを実行できます。
ブロックエディターには独自のフックセットがあり、エディターとやり取りしたり、その動作を変更したりできます。
このレッスンでは、ブロックエディターで利用できるさまざまなフックと、それらを使用してエディターの機能を拡張する方法を紹介します。
@wordpress/hooksパッケージ
アクションフックとフィルターフックは、歴史的にはPHPでのみ利用可能でした。しかし、ブロックエディターはJavaScriptで構築されているため、現在では新しいJavaScriptフックセットも利用できます。
これらのJavaScriptアクションフックとフィルターフックを使用すると、エディターのさまざまな側面にフックし、エディターの動作やブロック自体に変更を加えることができます。
JavaScriptフックは、addAction関数とaddFilter関数を@wordpress/hooks パッケージから使用して登録します。
PHP版と同様に、これらの関数にはフック名とコールバック関数を渡します。
注目すべき違いの1つは、フックの名前空間も渡す必要があることです。名前空間はコールバック関数の一意の識別子であり、名前の衝突による競合を防ぐのに役立ちます。
JavaScriptフックの使用方法を示す例を見てみましょう。
blocks.registerBlockTypeフィルター
これまでに見てきたすべてのブロックの例では、@wordpress/blocksパッケージのregisterBlockType関数を使用して、JavaScriptでブロックを登録してきました。
すべてのブロックは、この関数を使用して新しいブロックタイプ定義を登録することから始まります。
/**
* Every block starts by registering a new block type definition.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
registerBlockType( metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit,
/**
* @see ./save.js
*/
save,
} );登録されたすべてのブロックを処理するコードが実行されると、blocks.registerBlockTypeフィルターフックにフックされたコールバック関数が実行され、変更されたブロック設定オブジェクトを返す必要があります。
const settings = applyFilters(
'blocks.registerBlockType',
blockType,
name,
null
);このフィルターフックを使用すると、ブロックが登録される前にブロック設定オブジェクトを変更できます。
blocks.registerBlockTypeフィルターにコールバック関数を登録するには、@wordpress/hooksパッケージのaddFilter関数を使用します。
フィルターを登録するJavaScriptファイルをキューに追加するプラグインを作成しましょう。
まず、ブロックフックのコードを保存するために、wp-content/pluginsディレクトリ内にディレクトリを作成します。
mkdir -p wp-content/plugins/wp-learn-block-hooks新しく作成したディレクトリに、メインのプラグインPHPファイルwp-learn-block-hooks.phpを作成します。
次に、以下のコードを追加してプラグインヘッダーを設定し、プラグインコードがWordPress環境でのみ実行されるようにします。
<?php
/**
* Plugin Name: WP Learn Block Hooks
* Description: WP Learn Block Hooks
* Requires at least: 6.6
* Requires PHP: 7.0
* Version: 1.0.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: wp-learn-block-hooks
*
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}次に、enqueue_block_editor_assetsアクションにコールバック関数をフックして、JavaScriptファイルをキューに追加できます。
add_action( 'enqueue_block_editor_assets', 'wp_learn_block_hooks_editor_assets' );
function wp_learn_block_hooks_editor_assets() {
wp_enqueue_script(
'wp-learn-block-hooks-editor-script',
plugin_dir_url( __FILE__ ) . 'block-hooks.js',
array(
'wp-hooks',
),
);
}ブロックフックのコードが、@wordpress/hooksパッケージが利用可能になってから読み込まれるように、wp-hooks依存関係を指定する必要があることに注意してください。これは、JavaScriptファイルで@wordpress/hooksパッケージのaddFilter関数を使用するためです。
次に、プラグインディレクトリにblock-hooks.jsファイルを作成し、このコードの変数がグローバルスコープに漏れ出すのを防ぐため、IIFE（即時実行関数式）から始めます。
( function(){
} )()次に、addFilter関数を使用して、blocks.registerBlockTypeフィルターフックにコールバックを登録します。
( function(){
wp.hooks.addFilter(
'blocks.registerBlockType',
'wp-learn-block-hooks/list-block-description',
addListBlockDescription
);
} )()コールバック関数addListBlockDescriptionの前に、一意の名前空間を指定していることに注目してください。名前空間は開発者が定義するもので、プラグインごとに一意である必要があります。
では、何らかの処理を行うaddListBlockDescriptionコールバック関数を作成しましょう。
function addListBlockDescription( settings, name ) {
if ( name === 'core/list' ) {
settings.description = 'This is a list block';
}
return settings;
}ここで、addListBlockDescriptionコールバック関数は、ブロックの設定オブジェクトとブロック名をパラメーターとして受け取ります。
その後、登録されるブロックがリストブロックかどうかを確認し、リストブロックであれば、ブロック設定オブジェクトのdescriptionプロパティを変更します。
最後に、これはフィルターなので何かを返す必要があります。この場合は、変更された設定オブジェクトを返す必要があります。
これをテストするには、まだプラグインを有効化せず、投稿または固定ページを編集して、ブロック挿入ツールからリストブロックを検索します。
リストブロックにカーソルを合わせると、「箇条書きまたは番号付きリストを作成」という説明が表示されます。
ここで、プラグインを有効化します。
プラグインを有効化すると、リストブロックの説明が「これはリストブロックです」に変わります。
ブロックエディターフックのドキュメント
ブロックエディターハンドブックにはブロックエディターフック専用のセクションがあり、利用可能なさまざまな種類のフックについて個別のページが用意されています。
ブロックフィルターのページには、既存のブロックの動作を変更できるすべてのフィルターの一覧があり、ブロック登録時のブロック変更、フロントエンドでのブロック変更、ブロックエディターでのブロック動作の変更、ブロックの削除、ブロックの非表示、ブロックカテゴリーの管理に関するセクションが含まれています。
エディターフックでは、エディター設定の変更、ブロックディレクトリとパターンディレクトリ機能の無効化、エディター機能の拡張、エディター用REST APIデータの制御、エディターエラーのログ記録など、エディターの操作環境を変更できるすべてのフックについて説明しています。
i18nフィルターのページには、エディターで使用される国際化関数を変更できるフィルターの一覧があります。
パーサーフィルターでは、メモリに保存されたブロックデータを、データベースの投稿コンテンツに保存されるブロックマークアップへ変換するために使用されるブロックパーサーを変更できるすべてのフィルターについて説明しています。
オートコンプリートは、エディターにオートコンプリート機能を追加する方法を提供する、@wordpress/block-editorパッケージのコンポーネントです。
ブロックエディターで@username機能を使用したことがあるなら、これはオートコンプリートコンポーネントによって実現されています。
オートコンプリートフィルターのページでは、独自のオートコンプリート機能をエディターに追加する方法について説明しています。
最後に、グローバルスタイルフィルターのページでは、theme.jsonファイルで定義されたブロックテーマのグローバル設定とスタイルを開発者が変更できる、WordPress 6.1で追加されたフィルターについて説明しています。
これらのページにはすべて、これらのフックの使用方法と、ブロックエディターの機能拡張に活用する方法について、詳しい例が掲載されています。