【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」ー後編

こんにちは、koyaです。 今回は前回の続きを書きます。

前回のおさらい

前回はプラグインでブロックのフィールドを作成するところまでをやりました。

上の画像のようにブロックエディタ上のフィールドに値を入力して、いざブロックに反映しようとすると画像のようなエラーが出た状態になっている状態で終わりました。

ブロックエディタでのエラーの解消

上記のエラー文では「Block rendered as empty.block-lab-editor__ssr」と表示されています。
ブロックをレンダリングしようとしましたが中身が空でした。と言われていますね。
プラグイン入力した状態では入力画面は作りましたが、ブロックの中身やデザインは設定されていない状態です。
これを解消するためにブロックの中身を作成していきます。

ブロックはテーマディレクトリの下にblocksディレクトリを作成し、その中にブロックごとにテーマを作成するような形になっています。
今回はブロックエディタ対応テーマの「Twenty Twenty」を例に具体的に説明します。

今回は子テーマで制作するため、以下のようなファイル構成にします。

block-[ブロック名].phpが今回編集するファイルです。前回example-blockの名前でブロック名を登録したので今回はこのファイル名にしています。

今回ファイルの下記のコードを書きます。

<div class="block-example-block">
<h2 class="block-example-title"><?php block_field( 'title' ); ?></h2>
<div class="block-example-description"><?php block_field( 'description' ); ?></div>
<a href="<?php block_field( 'button-link' ); ?>" class="block-example-button"><?php block_field( 'button-text' ); ?></a>
</div>

block_field("フィールド名")で編集画面で入力したデータを参照します。

これだけで表示はされると思いますが、スタイルが適用されないのでcssも追加します。

.block-example-block {
    display: block;
    max-width: 100%;
    box-shadow: 0 0 3px rgba(0,0,0, 0.5);
    border-radius: 10px;
    padding: 30px;
    background: #fff;
}

.block-example-title {
    font-size: 4.2rem;
    font-weight: 700;
    text-align: center;
}

.block-example-description p {
    margin-top: 16px;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #333;
    text-align: center;
}

.block-example-button {
    display: block;
    text-decoration: none;
    color: #fff;
    background: #BD3854;
    padding: 0.5em;
    text-align: center;
    margin-top: 24px;
    font-family: sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    transition: opacity ease-in-out 0.3s;
}

.block-example-button:hover {
    opacity: 0.7;
}

style.cssでは公開時のスタイルを設定できますが、ブロックエディタ上には反映されないためstyle-editor.cssにも同様の記述をします。

最後にfunctions.phpに編集画面にスタイルを適用するための記述を追加します。 twentytwentyのテーマを使っている場合、34行目にfunction twentytwenty_support_setup() {という記述があると思うので、その記述の最後を以下のようにします。

  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'gutenberg_support_setup' );

css、functions.phpを更新すると編集画面、プレビューに以下の画像のようにスタイルが反映されると思います。

これでオリジナルのブロックの追加が出来ました。

まとめ

BlockLabを使用するとブロックエディタに簡単にカスタムフィールドのようなブロックが作れてとても便利でした。 プラグインを使わない方法に比べてハードルが低いのでぜひ使ってみてください。