WordPress グーテンベルグのブロックを自作する : ポータルサイトブログ - 東京・港区ポータルサイト制作会社アクセルメディア

2021/3/08

WordPress5.0から、ページの編集ではブロックエディタ（Gutenberg）が標準になりました。

ブロックエディタはその名の通り「ブロック」単位で編集する方式で、その「ブロック」は自作することができます。

ポータルサイトでもコーポレートサイトでも、自作のブロックが作れれば表現の幅が広がるので、ここで基礎の作り方を簡単に紹介します。

必要な環境

まずはローカルでWordPressが動かせる環境が必要ですので、Docker や WSL 、 XAMPP 、wp-env などで整備してください。

ブロックは基本的にはJavaScriptで開発するため、Node.js がインストールされている必要があります。

Node.js 5.2 以降がインストールされていれば npx というコマンドが使えるはずですが、もしインストールされていない場合は以下のコマンドでインストールしてください。

$ npm install --global npx

プラグインを作成

ブロックは基本的にプラグインとして作成します。
慣れないうちは1ブロックで1プラグインとした方がいいでしょう。

npx コマンドが使えれば始め方は簡単です。

まずはターミナルでWordPressのプラグインディレクトリに移動します。

$ cd /path/to/wp-content/plugins

公式リポジトリからプラグインを作成するコマンドを実行します。
このとき、コマンド末尾がインストールディレクトリ名になるため、あらかじめ決めておきます。

ここでは wp-sample-block という名称で進めます。

$ npx @wordpress/create-block wp-sample-block

実行すると wp-sample-block というディレクトリが作られ、中には必要なファイルが揃っているはずです。

作成されたディレクトリに入ります。

$ cd ./wp-sample-block

このディレクトリにいる状態で、以下のコマンドを実行することで、自動的にファイルがコンパイルされます。

npm run build ・・・コンパイル
npm run start ・・・コンパイル＋ファイル変更監視

ファイル構成

プラグインが作成されると、以下のようなファイル構成になっています。

build/ = コンパイル後のファイルが生成されるディレクトリ（変更不要）
node_modules/ = nodeライブラリ（変更不要）
src/ = ブロックのソースファイル
 - edit.js = ブロック編集時のコード
 - edit.scss = ブロックエディタに読み込まれるCSSファイル
 - index.js = ブロックメインファイル（editor.js と save.jsを統合）
 - save.js = ブロック保存時（HTML生成）コード
 - style.scss = ブロックエディタ、表示側両方に読み込まれるCSSファイル
.editorconfig = EditorConfig用設定ファイル
.gitignore = Git用除外設定ファイル
block.json = ブロックのメタデータファイル
package.json = nodeライブラリ管理ファイル
readme.txt = プラグイン紹介ファイル
wp-sample-block.php = プラグイン基礎ファイル

基本的には src/edit.js で編集時の挙動・表示を作り、src/save.js で表示側に吐き出したいHTMLコードを生成します。

この時点でWordPressの管理画面から、プラグイン「Wp Sample Block」を有効化すると、すでにブロックが使えるようになっていると思います。
（ただテキストを表示するだけのブロックです）

編集側を作る

src/edit.js が編集側（管理画面側）の処理ファイルです。

最低限の中身は以下のようになっています。

import { useBlockProps } from '@wordpress/block-editor'; // ライブラリ読み込み
import './editor.scss'; // CSS読み込み

export default function Edit() {
    return (
        <p { ...useBlockProps() }>
            Wp Sample Block – hello from the editor!
        </p>
    );
}

JavaScriptですが、この構文に見慣れない人もいるかもしれません。
ブロック開発は基本的にES6構文とJSXの構文で紹介されることが多く、従来のJavaScript構文でも書けますが、できれば新たな書き方に慣れるようにしましょう。

edit.jsについて、4行目からの関数でHTMLを返すことにより、ブロックエディタ編集画面に表示されます。

6行目に useBlockProps 関数がありますが、これはおまじないのようなもので、WordPress側がHTMLの属性情報をもとにブロック内容を判断したりするため必ず書いておきます。

表示側を作る

src/save.js が表示側に関する処理ファイルです。

編集側で変更されると、このファイルの処理を通してHTMLが生成されます。
この集まりが post_content としてまとめて保存されます。

最低限の中身は以下のようになっています。

import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
	return (
		<p { ...useBlockProps.save() }>
			Wp Sample Block – hello from the saved content!
		</p>
	);
}

編集側と同じく、3行目からの関数でHTMLを返すことにより、その内容が出力されます。

ここでも useBlockProps 関数を使ってHTML属性を追加しますが、保存側では useBlockProps.save 関数を使います。

コンパイル

ここまでの src/edit.js と src/save.js は、 src/index.js にインポートされ、以下のコマンドでコンパイルされます。

$ npm run build

コマンドを実行すると、必要なファイルが build ディレクトリ内に生成されます。

生成されたファイルは wp-sample-block.php でWordPress本体へ読み込まれ、ブロックエディタで使えるようになります。

以上、かなりざっくりとした紹介ですが、基礎の基礎は作れると思います。

ブロックは自作する以外にも「再利用ブロック」などを活用すれば、強力なツールになりますので、ぜひ活用していきたいですね。