WordPress:簡易的なGutenbergブロックを作成できるプラグイン「Block Lab」

WordPress:簡易的なGutenbergブロックを作成できるプラグイン「Block Lab」

本当に簡易的なものであれば、管理画面でいくつかの項目を選択・入力するだけで簡単にGutenbergブロックを作成できるプラグイン「Block Lab」を紹介します。
正直デフォルトのブロックで可能なことができなかったりと物足りないと感じた部分も多かったんですが、せっかく試したのでその備忘録も兼ねて。

※紹介している内容やキャプチャなどは、WordPress Ver 5.0.3 と Block Lab Ver 1.1.1 を使用した際のものになります。

WordPress:簡易的なGutenbergブロックを作成できるプラグイン「Block Lab」 目次

  1. インストール・有効化
  2. ブロックの作成と設定
  3. ブロックを使用
  4. テンプレート記述例

1. インストール・有効化

  1. 管理画面のプラグインから「Block Lab」を検索してインストール、もしくは「Block Lab」からファイルをダウンロードして環境にアップロード。
  2. プラグインを有効化するとメニュー最下部に「Block Lab」という項目が追加されるので、そこでブロックの作成・編集・削除などを行うことができます。

目次へ

2. ブロックの作成と設定

ブロックを作成する際は、「Block Lab」メニューにホバーした際 または 「Block Lab」一覧ページの上部にある「Add New」から作成します。
作成画面では、まずページ最上部にブロック名として使用するタイトルを入力する部分があり、その下にプロパティ設定とフィールド設定を行うボックスがそれぞれ用意されています。

各項目がどのような内容を設定するものなのかは、以下で簡単なサンプルブロックを作成していく形で説明しているので、実際にブロックを作って動きを見たい場合は、上から順に説明を見ながら作成してみてください。
また、作成するサンプルブロック名(タイトル部分に入力する名前)は「Example Card」とします。

プロパティ設定

プロパティ設定
Slug
作成するブロックのスラッグを指定する項目で、どのような表示をさせるか記述するためのテンプレートファイル(詳しくは後述)の名前に使用されます。
サンプルブロックでは「example-card」と入力します。
Icon
ブロック一覧で表示されるアイコンを指定する項目で、現時点で118種類のアイコンが用意されています。
サンプルブロックでは任意で選択してください。
Category
「一般ブロック」や「フォーマット」など、作成するブロックをどのカテゴリーに属するか指定します。
サンプルブロックでは任意で選択してください。
Keywords
ブロックの検索機能を使用した際に、作成するブロックがどのようなキーワードでヒットするかを指定する項目で、,で区切る形で最大3つまで設定することができます。
日本語でのキーワード指定も可能で、サンプルブロックでは「example, card, サンプル」と入力します。

フィールド設定

フィールド設定

次は上のイメージのようなボックス部分で、実際にフロントで表示させたりするものを入力するフィールドを作成していきます。
項目はフィールドタイプによって若干異なってくるのですが、ここではよく使うタイプであろう「Text」を例に説明します。

Field Label
フィールドのラベルを指定する項目です。
サンプルブロックでは「Title」と入力します。
Field Name
テンプレートファイルなどで使用する名前を指定する項目で、入力時はスペースは使用不可なので複数の単語を組み合わせるとかであれば-で区切るなどの必要があります。
サンプルブロックでは「title」と入力します。
Field Type
フィールドのタイプを指定する項目で、現時点で「Text」「Textarea」「URL」「Checkbox」「Radio」など11種類のタイプが用意されています。
サンプルブロックでは「Text」と入力します。
Field Location
フィールドを表示する箇所を指定でき、「Editor」ならそのままエディタ内に表示され、「Inspector」なら投稿画面右側で設定などが表示されている箇所に表示されます。
サンプルブロックでは「Editor」を選択します。
Help Text
フィールドの入力・選択項目下に補足テキストとして表示されます。
サンプルブロックでは任意で入力してください。
Default Value
エディタでブロックを使用した際のデフォルト入力値として挿入されます。
サンプルブロックでは任意で入力してください。
Placeholder Text
エディタでブロックを使用した際にPlaceholderとして表示されます。
サンプルブロックでは任意で入力してください。
Character Limit
入力可能な最大文字数を指定することができます。
サンプルブロックでは任意で入力してください。

ここまででまずはタイトルとして表示するテキストを入力できるフィールドができ、上記を踏まえてサンプルブロックではさらにそれぞれの項目を下記のように入力・選択した3つのフィールドを作成します。
新しいフィールドを追加する場合は、右下にある「Add Field」ボタンから可能です。
また、作成したフィールドの並び順を変更したい場合は、フィールド一覧で一番左に表示されているアイコン部分をドラッグすれば変更できます。

テキスト
  • Field Label: Text
  • Field Name: text
  • Field Type: Textarea
  • Field Location: Editor
ボタン(テキスト)
  • Field Label: Button (Text)
  • Field Name: button-text
  • Field Type: Text
  • Field Location: Editor
ボタン(URL)
  • Field Label: Button (URL)
  • Field Name: button-url
  • Field Type: URL
  • Field Location: Editor

すべての入力・設定が完了後、作成ページ右上にある「公開」ボタンを押下して保存します。

テンプレートファイルを作成

最後に作成したブロックをエディタやフロントでどのように表示するか指定するためのテンプレートファイルを用意する必要があり、「公開」ボタンの下にある「Template」ボックス内に作成したブロックに対応させるためのファイル名と格納場所が表示されていると思うので、それにならってフォルダ・ファイルを作成します。
テンプレートファイルはblock-{block name}.phpというファイル名を使用するルールになっており、{block name}の部分はプロパティ設定で「Slug」項目に指定したものを使用します。
「Slug」を上で紹介してきたサンプルブロックと同じように入力していれば「Template」ボックス内に/themes/{theme-name}/blocks/block-example-card.phpと表示されているはずなので、テーマ内に/blocksフォルダを作成し、さらにその中にblock-example-card.phpというPHPファイルを作成します。

また、テンプレートファイルは基本的にblock-{block name}.phpのみでも対応できますが、preview-{block name}.phpというPHPファイルを併用することもできます。
2ファイルとも用意した場合は、block-{block name}.phpがフロントでの表示用、preview-{block name}.phpがエディタでの表示用となり、例えばフロントとエディタとでは異なる出力をしたいときなどに利用します。

テンプレートファイルを作成したら、実際にどのように表示させるかのHTMLやPHPを記述していきます。
入力値の取得や表示は、主に値の表示に使うblock_field()と値の取得に使うblock_value()の2種類があり、それぞれ引数にフィールド作成時の「Field Name」の値を記述して表示することができます。

具体的な記述例として今回のサンプルブロックの内容をそれぞれ単純に表示させるだけの場合は、テンプレートファイルには下記のように記述します。

block-example-card.php

<div class="example-card">
  <h2><?php block_field( 'title' ); ?></h2>
  <p><?php block_field( 'text' ); ?></p>
  <a href="<?php block_field( 'button-url' ); ?>"><?php block_field( 'button-text' ); ?></a>
</div>

目次へ

3. ブロックを使用

投稿画面を確認するとブロック作成時に指定したカテゴリー内に新しくブロックが追加されていると思うので選択します。(ブロック作成時に「Keywords」で指定したキーワードで検索すると容易に見つけられます。)

ブロック使用イメージ #1

ブロック選択時は上のイメージのようにそれぞれの入力フィールドが表示されます。
デフォルトのブロックと比べると編集時の見た目が大分異なってる感じではありますが、編集後はこれらのフィールドは非表示になり、スタイルを適用済みであれば下のイメージのように表示されます。

ブロック使用イメージ #2

目次へ

4. テンプレート記述例

上で紹介したのはフィールドがすべて入力されている前提で且つそれらを単純に出力させるものでしたが、入力有無や選択した項目によって表示や出力を変えたい場合も多いと思います。
そういった動きを「Block Lab」で実装する際のテンプレート記述例をいくつか紹介します。

4-1. 未入力の場合は非表示にする

サンプルブロック内にテキストとURLを入力してボタンを表示させる部分がありましたが、これらの項目が未入力だった場合はボタンを表示させないようにします。
具体的な実装方法としてはblock_value()で取得した値の有無を判定し、値があった場合にコードなどを出力させます。

PHP

<?php
  $button_url = block_value( 'button-url' );
  $button_text = block_value( 'button-text' );
  if ( ! empty( $button_url ) && ! empty( $button_text ) ) {
    echo '<a href="' . $button_url . '">' . $button_text . '</a>';
  }
?>

4-2. 選択値によって出力内容を変える

選択値によって出力内容を変える方法で、これを利用して同じくサンプルブロック内にあったボタンの見栄えを変更してみます。
デフォルトのブロックとは違って「Block Lab」で作成したものは文字や背景を変更する色設定などが表示されないので、あらかじめ用意したもののみという縛りはありますが、設定に使うフィールドを新たに用意して見栄えを変更できるようにしてみます。

まず、設定用として使うフィールドをそれぞれ下記のような設定で新たに作成します。

  • Field Label: Button (Color)
  • Field Name: button-color
  • Field Type: Radio
  • Field Location: Inspector
  • Choices: default : Default
    red : Red
    blue : Blue
    yellow : Yellow
  • Default Value: default

フィールド作成後にエディタを確認すると「Choices」で設定した4つのラジオボタンが表示されるようになるので、この選択された値をボタンのclass名に利用されるようにテンプレートファイルに記述します。

PHP

<?php
  $button_color = block_value( 'button-color' );
  $button_class = $button_color === 'default' ? 'button' : 'button-' . $button_color;
?>
<a class="<?php echo $button_class; ?>" href="<?php block_field( 'button-url' ); ?>"><?php block_field( 'button-text' ); ?></a>

記述後にエディタなどの動きを確認してみると、「Default」項目を選択した場合はボタン用のa要素に.buttonというclassが付与され、「Default」以外を選択した場合はカラー名が入ったclass(例えば「Red」を選んだら.button-red)が付与されるようになります。
あとは、付与される各classにCSSでそれぞれ背景色などを指定してあげれば、完全に自由にとまではいきませんがボタンの見栄えを任意で変更できるブロックを作ることができます。

目次へ


以上、簡易的なGutenbergブロックを作成できる「Block Lab」の紹介でした。
機能的に物足りない部分があったりGutenberg感があまりない印象を持ったりもしたので、正直すごくおすすめのプラグインとまでは言えませんが、ガチガチに項目を決めたいとかむしろこういった作りの方が好みな場合には簡単で便利なプラグインだとは思いました。

プラグインに関しての詳細やダウンロードは以下になっており、GitHubのWikiでは使い方をはじめ、各タイプやタグの説明・使用例などもひと通り紹介されているので、使用を検討する場合はそちらも併せて確認してみてください。

Close the search window,
please press close button or esc key.