Genesis Custom Blocksで簡単なWordPressのカスタムブロックを作ってみよう!

はじめに

皆さんはこう思った事ありませんか?
「私はブログ初心者でブログでリッチな表現をしたいから、カスタムブロックを作ってみたいけど
調べてみたらReact?, JSX?何をいってるかわけがわからないし、情報が少ないからどうしよう…」
みたいな状態になってませんか?実は私もその一人です。

実はReact,JSX,JavaScriptを使わずとも、HTML,CSS,PHPのみでカスタムブロック制作を完結できるプラグインがあります。
その名前は「Genesis Custom Blocks」と言います。
今回はこのプラグインを使って下の例1のような、リッチなWordPressのカスタムブロックを作りたいと思います。

※内部のテンプレートエディタではなく、PHPテンプレートメソッドの方法で使い方を解説していきます。

例1

そもそもカスタムブロックとは?

既存のテーマに用意されている「見出し」や「テーブル」以外の
自分で用意した新しいブロックのことを言います。

これらは主にJavaScriptライブラリのReactの書き方「JSX」で作ることが主流ですが
今回紹介するようにプラグインでも実装ができます。

今回使うプラグイン「Genesis Custom Blocks」とは?

https://ja.wordpress.org/plugins/genesis-custom-blocks/

JSXの知識がなくても、HTML,CSS,PHPのみでリッチなカスタムブロックを作れるようにするプラグインです。
有料版,無料版が存在しますが、実質言って無料版で大丈夫でしょう。

JSXのような100%ネイティブなブロックの作成はできませんが、
ある程度リッチなカスタムブロックが作成できます。

流れ

まずはHTMLとCSSで雛形を作って、プラグインで設定をしてから、
phpで作ります。

まずはインストールしよう

まずはストアで「Genesis Custom Blocks」と調べてプラグインをインストールしてください。
もしくは手動で下記のURLからインストールすることもできます。

WordPress.org 日本語

Genesis Custom Blocks

https://ja.wordpress.org/plugins/genesis-custom-blocks/

Custom blocks for WordPress made easy.

カスタムブロックを作ってみよう!

今回はテストで警告ブロックを作ります。
All Block画面から、Add New を押してください。

そしたら以下のような画面が出てくると思うのでBlock titleの部分に「警告ブロック」
と入力してください。
slugの部分は実際にファイル名に使われる部分になります。
お好みでアイコンも変えて構いません。

動的に変える部分を作ってみよう!

今回の場合、動的に変える部分は
見出しと説明文です。
ですので、そこの部分を作りましょう。

動的に変える部分の作り方

手順1、「+」ボタンを押して動的に変える部分を作成してください。
まずはheading、すなわち見出しの部分を作りましょう

手順2、ボタンを押したらなにかブロックが作られましたね。
これが動的に変えられる部分です。このブロックを編集しましょう。

手順3、動的に変える部分にわかりやすく名前をつけましょう。
今回は「heading」と名付けます

手順4、slug名は識別しやすくつける名前とは別の名前です。
コードで扱うときに適した名前をつけましょう

手順5、説明を作って、Field Typeをtextareaにする

実際にデプロイしよう

動的に変える部分の作り方で設定はできたので保存を押してください
blocksファイルがないはずなので、まずblocksファイルを作ってください。
タイトル下の示しているディレクトリに指定された名前のphpファイルを置きます。
そしたら完了です。

php部分をエスケープ処理したい所ですが、こういう場合はしなくても大丈夫です。
CSSはstyle.cssなどに記載しといてください。
今回はスタイルの読み込みは扱いません。

<div class="warning-card">
    <div class="warning-content">
        <span class="warning-icon">
            <i class="fa-solid fa-circle-exclamation"></i>
            <!-- fontawesomeを導入してない人は削除しても大丈夫です -->
        </span>
        <h2>
            <!-- 見本は若干CSSをカスタムしてます -->
            <?php echo block_value('heading'); ?>
        </h2>
        <p>
            <?php echo block_value('paragraph'); ?>
        </p>
    </div>
</div>

.warning-card {
    background-color: #e6ada8;
    color: #ca0808;
    max-width: 1000px;
    margin: auto;
    padding: 10px;
    border-style: dashed;
    border-color:#ca0808 ;
    border-width: 2px 3px;

    .warning-icon {
        display: block;
        font-size: 30px;
        margin-bottom: 20px;
    }

    .warning-content{
        max-width: 768px;
        margin: auto;
    }
}
/* ネストが入っていますが、最近のCSSはネストがあっても動くようにできているので大丈夫です */

実際に使ってみよう!

さっき作ったやつ「警告ブロック(カード)」を探したらありました。

設置するとこんな感じです。

まとめ

やはり完全にリッチなカスタムブロックを作るのは難しいですが、
ある程度実用的なカスタムブロックをHTML,CSS,PHPのみで作れるのはなかなか革新的なのではないのでしょうか。
よりリッチなカスタムブロックを作ってみたい!という人は「公式ドキュメント」を読んでみるのもいいと思います。

このプラグイン自体情報が少ないので少しでも役に立てたらと思いこの記事を書いてみました。
記事のネタがなかったので久々に書けそうなネタにありつけてよかったです。

参考

1. https://developer.wpengine.com/genesis-custom-blocks/functions/block_field/
2. https://ecco.co.jp/blog/genesis-custom-blocks/
3. https://pasoviva.com/gcb-firstcustom/