私のブックマーク
ブックマークを追加
ブックマークを削除PHPによるブロックの登録（サーバーサイド）
サーバー上でのブロック登録は通常、メインプラグインPHPファイル内でregister_block_type()関数がinitフックで呼び出されることで行われます。この関数は、block.jsonファイルに保存されたメタデータを読み取ることで、ブロックタイプの登録を簡素化します。
この関数はブロックタイプを登録するために設計されており、この文脈では主に2つのパラメータを使用しますが、より多くのバリエーションにも対応できます：
$block_type(string): これは、block.jsonファイルを含むディレクトリへのパス、または異なる名前のメタデータファイルへの完全なパスのいずれかです。このパラメータは、WordPressにブロックの設定を見つける場所を指示します。$args(array): これはオプションのパラメータで、ブロックタイプの追加引数を指定できます。デフォルトでは空の配列ですが、$render_callbackなどのさまざまなオプションを含むことができます。このコールバックは、フロントエンドでブロックをレンダリングするために使用され、renderプロパティの代替としてblock.jsonで使用されます。
開発プロセス中、block.jsonファイルは通常、src（ソース）ディレクトリからbuildディレクトリに移動され、コードのコンパイルの一部として扱われます。したがって、ブロックを登録する際は、$block_typeパスがblock.jsonファイルをbuildディレクトリ内で指していることを確認してください。
``````bashregister_block_type(__DIR__ . '/build',array('render_callback' => 'render_block_core_notice',));`
こちらは、initフックを含むより完全な例です。
function minimal_block_ca6eda___register_block() {register_block_type( __DIR__ . '/build' );}add_action( 'init', 'minimal_block_ca6eda___register_block' );
上記の完全なブロックの例を参照してください
JavaScriptによるブロックの登録（クライアントサイド）
ブロックがすでにサーバーで登録されている場合、registerBlockTypeメソッドを使用してJavaScriptでクライアントサイドの設定を登録するだけで済みます。ブロックのblock.jsonファイルで定義されたのと同じブロック名を使用することを確認してください。以下は例です：
import { registerBlockType } from '@wordpress/blocks';registerBlockType( 'my-plugin/notice', {edit: Edit,// ...other client-side settings} );
一般的には、「メタデータファイルを使用する利点」セクションで説明されている利点のために、PHPを使用してサーバー上でブロックを登録することが推奨されますが、クライアントサイドのみでブロックを登録することも選択できます。registerBlockTypeメソッドを使用すると、メタデータを使用してブロックタイプを登録できます。
この関数は2つのパラメータを受け取ります：
blockNameOrMetadata(string|Object): これは、ブロックタイプの名前を文字列として指定するか、通常block.jsonファイルから読み込まれるブロックのメタデータを含むオブジェクトです。settings(Object): これは、ブロックのクライアントサイドの設定を含むオブジェクトです。
ビルドプロセスを使用している場合、block.jsonファイル（または他の.jsonファイル）の内容をJavaScriptファイルに直接インポートできます。これは、wp-scriptsが提供するものです。
- **`````edit`````:** エディターでブロックに使用されるReactコンポーネント。- **`````save`````:** データベースに保存される静的HTMLマークアップを返す関数です。`````registerBlockType()`````関数は、成功時に登録されたブロックタイプ（`````WPBlock`````）を返し、失敗時には`````undefined`````を返します。以下は例です：``````bashimport { 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,} );`
上記の完全なブロックの例を参照してください
