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

Posted: 2018.08.24 / Category: WordPress / Tag: Gutenberg
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
色々ファイルが入っていますが、実際編集するのはsrc
のblock
ディレクトリの中のファイルを編集します。
このファイルを更新するとビルドされdist
ディレクトリに書き出されます。
なので基本的にはsrc
内のファイルだけ編集すればブロックを作成することができます。
src/block2
と作成すれば一つのプラグインで複数のブロックも作成できます。
Create Guten Block Toolkit
COMMENTS
Masaaki Todoroki 2019-10-26 18:10
先程はご質問にご回答頂きまして、有難うございます!
やってみますね!
それともう2つほどご質問させて下さい。
1
この書き方ですと、例えば選択し間違えてしまった時、例えば大を選択してから、中を選択した時に、大のクラスも付与されてしまいました。
これを回避するようなコードを是非ご教授頂ければ大変嬉しいです!
2
グーテンベルクのコアブロックを継承して、カスタムブロックを作るような方法ってありますでしょうか?
例えばコアの動画ブロックを継承して、オリジナルの動画ブロックを作るような感じです。
お忙しいところ、大変恐縮ですが、ご回答頂けたら嬉しいです
どうぞ宜しくお願いします!
webOpixel 2019-10-27 11:19
1.この書き方とは下記サンプルの方法でしょうか?
https://www.webopixel.net/wordpress/1499.html
そのまま使う分には切り替えるようになっていると思いますが、何かカスタマイズされているということでしょうか。
2. Reactはhigher-order componentという機能でコンポーネントの再利用ができるので、このあたりを使うのかもしれません。
あまり詳しくないですが、、、