【WordPress】Gutenbergにオリジナルブロックを追加する

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

今回は練習のために <p> タグで囲われた文字列を表示する単純なブロックを作成することにします。

読みはじめる前に

Gutenbergにオリジナルのブロックを追加する場合、かなりの知識量が必要でした。

具体的には以下のプログラミング言語の知識が必要です。

• WordPress
• PHP
• JavaScript（React）

特に JavaScript（React）のスキルがないとオリジナルブロック作成はかなり厳しいものなのではないかと感じました。

本編でその理由を解説します。

Gutenberg ブロックの作成手順

STEP01. プラグインの作成

Gutenbergブロックはプラグインで作成するのが一般的のようです。

wp-content/plugins の下にディレクトリを作成します。

cd wp-content/plugins
mkdir my-gutenberg-block

my-gutenberg-block に移動しプラグインの定義を index.php に実装します。

<?php
/**
 * Plugin Name: My Gutenberg Block
 * Plugin URI: https://tarovlog.com/
 * Description: オリジナルブロック
 * Version: 1.0.0
 * Author: tarovlog
 * Author URI: https://tarovlog.com/
 */

プラグインページに移動すると「My Gutenberg Block」が追加されているので有効化しましょう。

STEP02. ブロック用のスクリプトとスタイルを登録

次に、ブロック用のスクリプトとスタイルを登録します。

さらに、オリジナルブロックにスクリプトとスタイルを紐付けます。

index.php に次のコードを貼り付けます。

/**
 * オリジナル（自作・独自）ブロック基本フォーマット
 */
add_action( 'init', 'gutenberg_examples_block' );
function gutenberg_examples_block() {

	if ( ! function_exists( 'register_block_type' ) ) {
		// Gutenberg is not active.
		return;
	}

	// ブロック用のスクリプトを登録
	wp_register_script(
		'gutenberg-examples-block-script',
		plugins_url( 'block.js', __FILE__ ),
		array( 'wp-blocks', 'wp-element'), // 依存スクリプトの登録
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ), // キャッシュ更新用
                true
	);

	// ブロック用（管理画面）のスタイルを登録
	wp_register_style(
		'gutenberg-examples-block-style-editor',
		plugins_url( 'editor.css', __FILE__ ),
		array( 'wp-edit-blocks' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ), // キャッシュ更新用
		'all'
	);
	
	// ブロック用（フロント）のスタイルを登録
	wp_register_style(
		'gutenberg-examples-block-style-front',
		plugins_url( 'style.css', __FILE__ ),
		array(),
		filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ), // キャッシュ更新用
		'all'
	);

        // オリジナルブロックの登録
        // オリジナルブロックで使うスクリプトとスタイルを登録
	register_block_type( 'gutenberg-examples-block/example-basic', array(
		'editor_script' => 'gutenberg-examples-block-script',
		'editor_style'  => 'gutenberg-examples-block-style-editor',
		'style'         => 'gutenberg-examples-block-style-front',
	) );

}

wp_register_script や wp_register_style でスクリプトやスタイルを登録します。

Gutenbergでは管理画面とフロント画面用のCSSを準備するといった少し変わった実装をします。

そのため wp_register_style を２個書いています。

登録したこれらのスクリプトやスタイルは register_block_type でブロックに紐付けます。

• JavaScript：editor_script：gutenberg-examples-block-script
• CSS：editor_style：gutenberg-examples-block-style-editor
• CSS：style：gutenberg-examples-block-style-front

gutenberg-examples-block/example-basic はブロックごとに固有に定義します。

• 名前空間：gutenberg-examples-block
• ブロックのスラッグ：example-basic

となります。

他と被らないユニークな名前にします。

ここまでのファイル構成の確認

.
├── block.js
├── editor.css
├── index.php
└── style.css

STEP03. オリジナルブロックの実装

今回の実装は p タグで囲われた「Hello World.」という文字列を出力するシンプルなブロックです。

次のコードを block.js に貼り付けます。

( function( blocks, element) {

	const el = element.createElement;
	const { registerBlockType } = blocks;

	registerBlockType(
		'gutenberg-examples-block/example-basic', 
		{
			title: 'オリジナルブロック', //ブロックのタイトル
			icon: 'smiley', //ブロックのアイコン
			category: 'layout', //ブロックのカテゴリー

                        //管理画面用のブロック
			edit: function() {
				return (el("p", null, "Hello World."));
			},
                        //フロント用のブロック
			save: function() {
				return (el("p", null, "Hello World."));
			},
		}
	)

} )(
	window.wp.blocks,
	window.wp.element,
);

registerBlockType の第一引数には STEP02. の register_block_type で登録したブロックのタイプを登録します。

ブロック作成の基本となる実装の形となります。

テキストを動的に挿入したり繰り返したりする実装する場合はさらなるJavaScriptによる実装が必要になります。

これはかなり難易度が高いという印象を受けました。

以上で実装はおしまいです。

iconの種類：Dashicons | WordPress Developer Resources

登録されたブロックを確認する

投稿ページに移動しブロックを確認してみましょう。

まとめ

オリジナルのブロックカテゴリーの登録は下の記事が参考になります。

参考：WordPress/gutenberg-examples