Posted: 2018.08.24 / Category: WordPress / Tag: Gutenberg

WordPressの新エディター「Gutenberg」のカスタムブロック開発環境を高速で構築できる、「Create Guten Block」という開発ツールキットのご紹介を致します。

Gutenbergブロックの開発環境の構築

GutenbergはReactとというJavaScriptのフレームワークで開発されています。
素のJavaScriptでも開発はできますが、ReactはJSXという独自構文があったり、ES6での開発が一般的になっています。
Create Guten Block を使用するとこの辺りの環境も簡単に構築し、プラグインとしてすぐに使用できるようになります。

Node.jsは入ってなかったらインストールしてください。
Create Guten Block はプラグインとして作成されますので、ターミナルを起動しカレントディレクトリを設置したいWordPressのpluginディレクトリに変更します。

$ cd wp-content/plugins

npxで下記コマンドを実行します。
一番最後のmy-blockはプラグイン名なので任意の名称を付けてください。

$ npx create-guten-block my-block

my-blockディレクトリが生成されるので、カレントにしたらnpm startを実行します。

$ cd my-block
$ npm start

以上で開発環境の構築は完了です
これでsrcディレクトリが監視され、JSファイルを更新する度にビルドされます。

管理画面のプラグイン一覧にmy-blockが追加されていますので、有効にしてください。
もちろん Gutenberg もインストールしてください！

ディレクトリ構造

ディレクトリ構造を見てみましょう。
my-blockの中は下記のようになっています。

├── package.json
├── README.md
├── dist
|  ├── blocks.build.js
|  ├── blocks.editor.build.css
|  └── blocks.style.build.css
└── src
　　├── block
　　|  ├── block.js
　　|  ├── editor.scss
　　|  └── style.scss
　　├── blocks.js
　　├── common.scss
　　└── init.php

色々ファイルが入っていますが、実際編集するのはsrcのblockディレクトリの中のファイルを編集します。
このファイルを更新するとビルドされdistディレクトリに書き出されます。
なので基本的にはsrc内のファイルだけ編集すればブロックを作成することができます。

src/block2と作成すれば一つのプラグインで複数のブロックも作成できます。

Create Guten Block Toolkit