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

2019-04-072023-11-11

追記 (2020/11)

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

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

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

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

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

Gutenbergで簡単にカスタムブロックがつくれるLazy Blocks

またも吹き出し問題です今のところ、Classicブロックでなんとか堪え忍ぶ毎日なのにゃー ...

https://possiblytrue.com/インターネット/gutenbergで簡単にカ...

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

Block Lab – WordPress plugin | WordPress.org

The easy way to build custom blocks for Gutenberg.

https://wordpress.org/plugins/block-lab/

Block Lab

プラグインを追加するとメニューにBlock Labが追加されました

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

Add Newをクリックすると新規ブロック作成画面に移行するのも同じですね

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

Add Fieldをクリックすると新規フィールドの設定画面がでました

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

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

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

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

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

block templateというファイルを作成しないといけないのですね
これはなんでしょうか？

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

なるほど
ブラウザから一括でカスタムブロックを追加できないのですね

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

前回の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>

Lazy Blocksの時とほぼ同じですかね
こちらはimgタグのaltがないですが？

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

まあお試しなのでいらないですかね

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

アップロードの方法は各自で異なると思いますので割愛します

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