WEBOPIXEL

Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する

Posted: 2018.08.24 / Category: WordPress / Tag: 

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

Sponsored Link

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

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

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

Create Guten Block Toolkit

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。