WordPress でカスタムブロックを作成する

WordPress 案件で毎回カスタム HTML ブロックに定型の HTML を流し込むのが面倒なので、カスタムブロックを作成できないかと相談を受けたので、仕様を調べてみた。

アクションフック

Gutenberg ブロックエディターに独自機能を組み込みには、enqueue_block_editor_assets アクションフックを使用するらしい。基本形は以下の構成になる。

add_action( 'enqueue_block_editor_assets', function() {
	 // 追加する機能をここに記述する。
});

ブロック定義を登録する

wp_enqueue_script を使用してブロックを登録する。

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'myplugin-block', // ブロックの識別子
        plugins_url( 'block.js', __FILE__ ), // ブロックの実体の JavaScript ファイル
        [
            'wp-blocks', // カスタムファイルが依存するファイル(ブロック)
            'wp-element',// カスタムファイルが依存するファイル(React)
        ]
    );
});

ブロックの実体を記述する

基本形

ブロックの実体の記述には 識別のためのブロック名とブロックの内容を記述したオブジェクトを引数としたregisterBlockType 関数を使用する。

registerBlockType( 'BLOCKNAME', {} );

category

[ common | formatting | layout | widgets | embed ]の中から選択する

icon

https://developer.wordpress.org/resource/dashicons/#sort のアイコンか SVC 形式のアイコンが使用できる

edit

ブロックの編集画面記述する

save

保存するブロックの内容を記述する

edit

投稿画面で投稿内容を編集中に表示される内容を記述するメソッド。

• 基本形

  edit: () => {
      return <div>Your block.</div>;
  }

• ブロックの設定値を使用する場合

edit: ( { attributes } ) => {
    return <div>{ attributes.content }</div>;
}

• 引数で渡されたクラス名を使用する場合

edit: ( { attributes, className } ) => {
    return <div class={ className }>{ attributes.content }</div>;
}

save

投稿内容を保存した際にデータベースに書き込まれる内容を記述する。

• 基本形

save: () => {
    return <div> Your block. </div>;
}

• ブロックの設定値を使用する場合

save: ( { attributes } ) => {
    return <div>{ attributes.content }</div>;
}

例)

( function( blocks, element ) {
    blocks.registerBlockType( 'myplugin/custom-block', {
      title: '独自ブロック',  // 表示されるブロック名
      icon: 'format-image',  // 表示されるアイコン
      category: 'common',    // 「一般なブロック」カテゴリーに表示される
      edit: function() {
        var newDiv = element.createElement("div", null, '編集中');
        return newDiv;
      },
      save: function() {
        return element.createElement("div", null, '独自ブロック');
      }
    } );
  } )(
    window.wp.blocks,
    window.wp.element
);