Gutenberg の Create Block パッケージを使用してカスタムブロックを作る

公式でサポートされているブロックの作成方法である@wordpress/create-blockを使ってカスタムブロック用のプラグインを生成する。
詳細は以下ブロックエディターハンドブックに記載されているので参照。
作成されたカスタムブロックは定型文を挿入するだけの単純なものであるが、@wordpress/create-blockで生成されるプラグインにはブロック作成に必要なファイルやビルド環境が一式揃っており、独自のカスタムブロックを作成したい場合はこれをベースにカスタマイズを行っていく。

https://ja.wordpress.org/team/handbook/block-editor/packages/packages-create-block/

開発環境（バージョンは執筆段階のもの）

Node.js（14.15.2 LTS 推奨版）
npm（6.14.9）
WordPress（5.6）
参考）開発環境 – Japanese Team — WordPress.org
VS Code

使い方

$ npx @wordpress/create-block [options] [slug]

VS Code のターミナルで WordPress のプラグインディレクトリに移動して以下コマンドを実行する。（今回はプラグイン名を gutenitem とした）

$ npx @wordpress/create-block gutenitem

処理が走って gutenitem ディレクトリが生成される。

npx: 206個のパッケージを18.66秒でインストールしました。
Creating a new WordPress block in "gutenitem" folder.
Creating a "block.json" file.
Creating a "package.json" file.
Installing packages. It might take a couple of minutes.
Formatting JavaScript files.
Compiling block.
Done: block "Gutenitem" bootstrapped in the "gutenitem" folder.
Inside that directory, you can run several commands:
  $ npm start
    Starts the build for development.
  $ npm run build
    Builds the code for production.
  $ npm run format:js
    Formats JavaScript files.
  $ npm run lint:css
    Lints CSS files.
  $ npm run lint:js
    Lints JavaScript files.
  $ npm run packages-update
    Updates WordPress packages to the latest version.
You can start by typing:
  $ cd gutenitem
  $ npm start
Code is Poetry

cd gutenitemでプラグインディレクトリに移動。
生成されたファイルは以下の通り。（一部省略）

/build/ディレクトリ（略）
/node_modules/ディレクトリ（略）
/src/
/src/index.js
/src/edit.js
/src/save.js
/src/style.scss
/src/editor.scss
/.editorconfig
/.gitignore
/block.json
/gutenitem.php
/package.json
/package-lock.json
/readme.txt

WordPress プラグインページを確認すると Gutenitem プラグインが追加されているので有効化。
投稿ページのブロック一覧に追加されており選択すると定型文が挿入される。

*管理画面*のプラグインを更新すると Gutenitem プラグインが登録されている

以上でブロックのひな形は完成。
ここからプラグインのカスタマイズを行い独自のブロックを作成していくが本記事ではひな形作成まで。

生成されるプラグインについて

冒頭で@wordpress/create-blockで生成されるプラグインにはブロック作成に必要なファイルやビルド環境が一式揃っていると書いたがそちらについて簡単に説明。

ファイル

生成されたファイルのうち主にsrcディレクトリ内のファイルをカスタマイズしカスタムブロックを作成していく。
index.jsがブロックのメインスクリプトとなる。またそのなかでも edit 関数及び save 関数がスクリプトのメインとなるため生成されたプラグインではedit.js、save.jsと別ファイルで保存されておりindex.jsから import されている。
style.scssはフロント、管理画面共通で読み込まれるスタイル、editor.scssは管理画面用のスタイルとなる。

/src/index.js
/src/edit.js
/src/save.js
/src/style.scss
/src/editor.scss

コマンド

package.jsonにはブロック作成の際に役に立つ scripts がいくつか用意されている。

{
	…
	"scripts": {
		"build": "wp-scripts build",
		"format:js": "wp-scripts format-js",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"start": "wp-scripts start",
		"packages-update": "wp-scripts packages-update"
	},
	…
}

$ npm run build

本番用のコードをビルドする。

$ npm start

開発用のビルドを開始する。常にコードの変更を監視しており、コードに変更を加えるとスクリプトが自動的に再構築される。またコードの記述にエラーがあった場合はビルドエラーが表示される。
gulp watchやnpm run watchのようなイメージ。