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

2019-04-07

追記 (2020/11)

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

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

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

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

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

 
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の関数とか呼ばないと取得できなさそうなので削除にゃー

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

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

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

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

 
Lazy Blocksと違ってプレビューは出ないのですね

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

 
Lazy Blocksと同じで結果は今まで通りの出力と同じですね

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

 
そこはちょっと使い勝手がわるいですね

 

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

インターネット,開発Genesis Custom Blocks,gutenberg,WordPress,オリジナルブロック,カスタムブロック,プラグイン,吹き出し

Posted by 管理人