init

ここでブロックタイプの登録などを行う。

function imade_init() {
    // ブロックスクリプトの登録
    wp_register_script( 'imade-sample-block-script', ... );
    // エディタ用スタイルの登録
    wp_register_style( 'imade-sample-block-editor-style', ... );
    // サイト用スタイルの登録
    wp_register_style( 'imade-sample-block-style', ... );

    // ブロックの登録
    register_block_type( 'imade/sample-block', [
      'editor_script' => '...',
      'editor_style' => '...',
      'style' => '...',
    ] );
}
add_action( 'init', 'imade_init' );

wp_register_script( $handle, $src, $dependencies, $version, $in_footer )

ブロック用のスクリプトを登録。これがないとブロックが使えない。依存関係にあるコンポーネントなどは $dependencies に配列で指定。 [ ‘wp-blocks’, ‘wp-element’ ] など。

依存関係については、 Handbook にある @wordpress/block-library などのパッケージが対応している。これは対応表を作っておくと嬉しいかもしれん。

your-script.js wp_register_script 備考
wp.blocks wp-blocks registerBlockType
wp.element wp-element React
wp.editor wp-editor ツールバー他
wp.richText wp-rich-text リッチテキスト部分

register_block_type( $name, $args )

ブロックを登録する。引数にブロックの名前とパラメータを指定。パラメータ $args の中身は以下。

$args[‘editor_script’]

エディタのスクリプトのハンドル名。予めそのハンドル名でスクリプトを登録する必要がある。

$args[‘editor_style’]

エディタに読み込むスタイルのハンドル名。予めそのハンドル名でスタイルを登録する必要がある。

生成されたブロックがどのように表示されるかの基本スタイル。プレビュー用スタイル以外のインスペクタなどのスタイルの指定も可能。

$args[‘style’]

サイトの表側で読み込むスタイルのハンドル名。予めそのハンドル名でスタイルを登録する必要がある。生成されたブロックがどのように表示されるかの基本。

enqueue_block_editor_assets

エディタ用のブロック用のスクリプトやスタイルを登録(エンキュー)

function imade_enqueue_block_editor_assets() {
    wp_enqueue_script( 'imade-sample-block-script' );
    wp_enqueue_style( 'imade-sample-block-editor-style' );
}
add_action( 'enqueue_block_editor_assets', 'imade_enqueue_block_editor_assets' );

enqueue_block_assets

サイト用のブロックスタイルなどを登録(エンキュー)

function imade_enqueue_block_assets() {
    wp_enqueue_style( 'imade-sample-block-style' ) );
}
add_action( 'enqueue_block_assets', 'imade_enqueue_block_assets' );