GutenbergでカスタムブロックがつくれるBlock Lab

2019-04-07

追記 (2020/11)

Block LabはWP Engineに買収されたようなので今後は新機能の追加なし、メンテナンスモードに。

新たに後継として、Genesis Custom Blocksがリリースされました。

Lazy BlockはJSONでインポート・エクスポートできるようになったのでパワーアップ!日本語化も進んでいるようです。

Lazy Blocksについて使い方の記事を書きました。

人物のアイコン素材 その5
 
Lazy Blocksに続いて同じくカスタムブロック作成のプラグイン、Block Labを試してみましょう

猫

 
Block Labも公式プラグインなのにゃー
普通のプラグイン同様にインストールすればよいのにゃー

Block Lab

人物のアイコン素材 その5
 
プラグインを追加するとメニューにBlock Labが追加されました

猫

 
この辺はLazy Blocks と同じなのにゃー

人物のアイコン素材 その5
 
Add Newをクリックすると新規ブロック作成画面に移行するのも同じですね

猫

 
作成画面はこんな感じにゃー
相変わらずLuxeritas の項目が出てくるけど無視にゃー
使うのは一番下のFieldの部分にゃー

人物のアイコン素材 その5
 
Add Fieldをクリックすると新規フィールドの設定画面がでました

猫

 
これもLazy Blocksとほとんど同じにゃー
表示が少し違うだけで同じなので説明は割愛するにゃー
バージョン1.2.2でデザインを変えたらしいけど昔のバージョンは使ってないから違いはわからないにゃー

人物のアイコン素材 その5
 
Field TypeがLazy Blocksより少ないですかね
昔のバージョンの画面は公式サイトの動画とか見ると残っていると思います

猫

 
最終的にこんな感じで設定してみたにゃー
Lazy Blocksとほぼ同じにゃー
Rich Textが選択できないのでcontentはText Areaにしたにゃー

人物のアイコン素材 その5
 
Slugとかアイコンの設定も同じですね
HTMLとか入力してないですけどこれで公開ボタンをクリックすると使えるのですかね?

猫

 
ここからがメンドイのにゃー
公開ボタンをクリックするとこんなメッセージがでるのにゃー

人物のアイコン素材 その5
 
block templateというファイルを作成しないといけないのですね
これはなんでしょうか?

猫

 
このファイルがブロックを表示するためのファイルにゃー
Lazy BlocksでいうCodeの部分にゃー
HTMLとかPHPのコードを書いてサーバにアップロードする必要があるにゃー
エディターと出力画面で表示を分けたい場合は2つファイルを作る必要があるにゃー

人物のアイコン素材 その5
 
なるほど
ブラウザから一括でカスタムブロックを追加できないのですね

猫

 
そうなのにゃー
だからFTPとかでHTMLとかPHPのコードを書いたファイルを準備するにゃー
公式サイトのドキュメントを見るととりあえずblock_fieldという関数を使えば入力した値を拾えるらしいにゃー

人物のアイコン素材 その5
 
前回のHTMLを使いまわしてサンプルから作成してみましょう

猫

 
こんな感じで作成したのにゃー

<div class="chat-box">
  <div class="chat-icon-r">
    <img class="alignnone size-thumbnail wp-image-48" src="<?php block_field( 'icon' ); ?>" width="72" height="72" />
    <div class="chat-icon-description"><?php block_field( 'chat-desc' ); ?></div>
  </div>
  <div class="chat-area-r">
    <div class="chat-bubble-r BB-r"><?php block_field( 'content' ); ?></div>
  </div>
</div>
人物のアイコン素材 その5
 
Lazy Blocksの時とほぼ同じですかね
こちらはimgタグのaltがないですが?

猫

 
そこはWordPressの関数とか呼ばないと取得できなさそうなので削除にゃー

人物のアイコン素材 その5
 
まあお試しなのでいらないですかね

猫

 
これをさっきの場所にアップロードすれば終わりにゃー

人物のアイコン素材 その5
 
アップロードの方法は各自で異なると思いますので割愛します

猫

 
追加したカテゴリからカスタムブロックを選ぶと使えるようになるにゃー
エディター画面はこんな感じにゃー

人物のアイコン素材 その5
 
Lazy Blocksと違ってプレビューは出ないのですね

猫

 
入力したあとに出てくるにゃ
標準のブロックと同じ動きにゃー

人物のアイコン素材 その5
 
Lazy Blocksと同じで結果は今まで通りの出力と同じですね

猫

 
想定通りなのにゃー
ただ改行はbrタグでやっているけどにゃー

人物のアイコン素材 その5
 
そこはちょっと使い勝手がわるいですね

猫

 

 
だいたいのフィーリングはわかったのにゃー
次は比較してどっちを使うか検討するにゃー