ブロックの登録

Topics

  • PHP によるブロックの登録 (サーバー側)
  • JavaScript によるブロックの登録(クライアント側)
  • その他の情報

ブロックは通常、サーバー側とクライアント側の両方でプラグインを介し、 block.jsonメタデータを使用して登録されます。

技術的にはブロックはクライアント内でのみの登録も可能ですが、サーバーとクライアントの両方でブロックを登録することを強く推奨します。サーバーサイドの機能の中にはダイナミックレンダリング、ブロックサポート、ブロックフック、ブロックスタイルのバリエーションなど、ブロックがサーバー上に「存在する」ことを必要とするものがあり、これらはブロックのサーバーでの登録がなければ正しく動作しません。

例えば、あるブロックを theme.json でスタイルを設定できるようにするには、そのブロックをサーバーに登録する必要があります。そうしなければ theme.json で割り当てられたスタイルは無視されます。

ブロック登録の図解を開く

PHP によるブロックの登録 (サーバー側)

サーバー上でのブロック登録は通常、プラグインのメイン PHP ファイルで行われ、register_block_type 関数が init フック で呼び出されます。

register_block_type 関数は、block.jsonファイルに格納されたメタデータを読み込むことで、サーバーへのブロックタイプの登録の簡素化を目的とします。

この関数は、このコンテキストに関連する2つのパラメータを取ります ($block_type は、より多くのタイプやバリアントを受け入れます)。

  • $block_type (string) – block.json ファイルのあるフォルダーへのパス、または、名前が異なる場合、メタデータファイルへのフルパス。
  • $args (array) – ブロックタイプ引数のオプション配列。デフォルト値は []。任意の引数を定義可。ただし、以下はデフォルトでサポートされる。
    • $render_callback (callable) – このブロックタイプのブロックをレンダーする際に使用されるコールバック。block.json 内の render フィールドの代替。

ビルド処理の一環として、通常 block.json ファイルは src フォルダから build フォルダにコピーされるため、登録したブロックの block.json へのパスは build フォルダを参照する必要があります。

register_block_type は、成功すると登録したブロックタイプ (WP_Block_Type) を返し、失敗すると false を返します。

例:

register_block_type(
	__DIR__ . '/notice',
	array(
		'render_callback' => 'render_block_core_notice',
	)
);

例:

function minimal_block_ca6eda___register_block() {
	register_block_type( __DIR__ . '/build' );
}

add_action( 'init', 'minimal_block_ca6eda___register_block' );

完全なブロックの例上のコードを参照してください。

Top ↑

JavaScript によるブロックの登録(クライアント側)

サーバ側でブロックを登録すると、クライアント側では同じブロック名でクライアント側設定を登録するだけで済みます。

例:

registerBlockType( 'my-plugin/notice', {
	edit: Edit,
	// ... 他のクライアント側の設定
} );

メタデータファイルの利点」で述べた理由により、PHP を使用してサーバー上にもブロックを登録することが依然、推奨されています。それでもクライアント側だけでブロックを登録したければ @wordpress/blocks パッケージの registerBlockType メソッドを使用して、block.json ファイルから読み込んだメタデータでブロックタイプを登録できます。

関数は2つの引数を取ります。

  • $blockNameOrMetadata (string|Object) – ブロックタイプ名、または block.json から読み込まれたメタデータオブジェクト
  • $settings (Object) – クライアント側ブロック設定。

block.json の内容 (またはその他の .json ファイルの内容) は、wp-scripts などのビルドプロセスを使用するとき、JavaScript ファイル内に直接インポートできます。

2番目のパラメータとして渡されるクライアント側のブロック設定オブジェクトには、特に関連性の高い2つのプロパティが含まれます。

  • edit: ブロックのエディタで使用される React コンポーネント。
  • save: データベースに保存される、静的な HTML マークアップを返す関数。

registerBlockType は、成功すると登録されたブロックタイプ (WPBlock)、失敗すると undefined を返します。

例:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import metadata from './block.json';

const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
const save = () => <p { ...useBlockProps.save() }>Hello World - Frontend</p>;

registerBlockType( metadata.name, {
	edit: Edit,
	save,
} );

の中の上のコードを参照してください。

Top ↑

その他の情報

原文

最終更新日: