スポンサーリンク

【WordPress】オリジナルのブロックカテゴリを追加する:Gutenberg

カスタマイズ
たろ
たろ

Gutenbergエディターのブロックカテゴリの追加ってどうやるんだろう?

こんな疑問にお答えします。

本記事の内容
  • ブロックカテゴリーとは?
  • Gutenberg エディターにオリジナルのブロックカテゴリを追加する方法
  • オリジナルのブロックカテゴリーが表示されずにハマったポイント

そもそもなんでブロックカテゴリーがほしいと思ったのかというとオリジナルのブロックを作成した際にデフォルトのカテゴリに分類したくないなーと思ったことがきっかけでした。

オリジナルのブロックカテゴリーがほしいけど追加する方法がわからないという方に向けた記事になります。

スポンサーリンク

Gutenbergのブロックカテゴリーとは

Gutenberg のブロックカテゴリーはオレンジ色の枠で囲った「一般ブロック」のようなカテゴリがブロックカテゴリーです。

Gutenbergエディター

WordPress でブログを書く際に「段落・リスト・見出し」などをグループに分けているカテゴリのことを指します。

参考:WordPress のまったく新しい使い方です。ここでお試しください。

Gutenbergのブロックカテゴリを追加する

実装するには functions.php に次のコードを貼り付けます。

/**
 * オリジナルのブロックカテゴリーの追加
 */
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );
function my_plugin_block_categories( $categories, $post ) {
    return array_merge(
        $categories,
        array(
            array(
                'slug' => 'my-block',   //ブロックカテゴリーのスラッグ
                'title' => 'My Block',  //ブロックカテゴリーのタイトル
                'icon'  => 'wordpress',    //ブロックカテゴリーのアイコン
            ),
        )
    );
}

ちなみに、特定のカスタム投稿タイプでブロックカテゴリーの表示・非表示の制御をしたい場合は下記のコードを array_merge の前で編集すればOKです。

if ( $post->post_type === 'news' ) {
  return $categories;
}

ハマったポイント

上のコードを functions.php に実装しただけではブロックカテゴリーが表示されずにハマってしまいました。

実はブロックカテゴリーに「段落・リスト・見出し」のようなオリジナル(独自)のカスタムブロックを追加する必要があるみたいでした。

そこで次に簡単なオリジナルのカスタムブロックをオリジナルのブロックカテゴリに追加してみます。

Gutenberg:オリジナルブロックの追加

オリジナルのブロックを追加するにはJavaScript(React)で実装します。

実装例

( function( blocks, element ) {
	var el = element.createElement;

        //JavaScript のオブジェクト形式でスタイルを記述
	var blockStyle = {
		backgroundColor: '#900',
		color: '#fff',
		padding: '20px',
	};

        //registerBlockType でブロックを登録
	blocks.registerBlockType( 'gutenberg-examples/my-block', {
		title: 'ブロック例1',
		icon: 'universal-access-alt',
		category: 'my-block', // ブロックカテゴリーを指定する
		edit: function() {
			return el(
				'p',
				{ style: blockStyle },
				'Hello World,(管理画面用のメッセージ)'
			);
		},
		save: function() {
			return el(
				'p',
				{ style: blockStyle },
				'Hello World, (フロント画面用のメッセージ)'
			);
		},
	} );
} )( window.wp.blocks, window.wp.element );

実際の実装ではPHP側で register_block_type などの設定が必要です。

上記コードを実装後、ブロックエディターを確認してみるとオリジナルのブロックカテゴリーが追加されていることを確認できました。

Gutenbergエディター:ブロックを追加した例

まとめ

  • ブロックカテゴリーは block_categories のフィルターフックで追加する
  • ブロックが一つもない場合はブロックカテゴリーは表示されない
  • ブロックの追加はPHPとJavaScript(React)の知識が必要

オリジナルブロックの追加方法の詳細は下記の記事を参考になります。

コメント

  1. […] […]

タイトルとURLをコピーしました