JavaScriptを使用しないブロック構築：ACF、Block Lab、およびLazyBlockのテスト

公開: 2019-05-17

まだ誰もがJavaScriptでブロックを構築できるわけではなく、希望するブロックが見つかるまで3つまたは4つのブロックコレクションをインストールする必要がある場合もあります。

3番目の方法があります。ブロックのフロントエンド表示を制御するテンプレートを使用して、特定のカスタムフィールドのセットからブロックを作成するプラグインです。これを行うための最も一般的な3つのオプションには、Block Lab、ACF（Advanced Custom Fields）、およびLazyBlocksがあります。

このテストのユースケースは、各プラグインで実行するために設定した小さなタスクです。会社のチームメンバー用に、名前、名前、ヘッドショット、略歴、電話番号などのフィールドを含むブロックを作成します。メールアドレスと、2人のチームメンバーがいる2列表示のページのブロックを使用します。

プラグインごとにデモンストレーションします

フィールドグループの作成方法、
フロントエンドのテンプレートを作成する方法と
ブロックを使用してチームページを作成する方法。

ローカル開発ツールとしてLocalbyFlywheelを使用しました。テストサイトは、WordPress 5.1.1、Gutenberg 5.4、およびWordPress.comのビジネステーマで実行されました。

この投稿を読んだ後、あなたはあなたのニーズに合ったプラグインを選択することができるでしょう。

ブロックラボでチームブロックを作成する

XWPチームのメンバーがBlockLabを構築し、商用バージョンの無料プラグインとして利用できます。最初にBlockLabを使用し、プラグインをインストールしてから、新しいブロックを開始しました。

これは、フィールドの設定方法に関するビデオです。

次のステップは、ブロックテンプレートの設定です

予想される場所を見ると、テンプレートは/ blocks /というサブフォルダーのテーマディレクトリの一部になります。テーマを切り替えるときにコンテンツがロックインされるため、開発者はこれを覚えておく必要があります。

テンプレートを作成するには、コードエディターを開き、ファイルblock-team-member.phpを作成し、フィールドを参照するためのHTML +と最小限のPHPを追加しました。

 <h2>
<？php block_field（ 'first-name'）;？> 
<？php block_field（ 'last-name'）;？>
</ h2>
<p> <img class = "teamphoto" src = "<？php block_field（ 'picture'）;？>"
 alt = "<？php block_field（ 'first-name'）;？> 
<？php block_field（ 'last-name'）;？> "width =" 150 "/>
<？php block_field（ 'short-bio'）; ？> </ p>

<p> <em> <？php block_field（ 'first-name'）;？> </ em>にアクセスできます 
<br/>メール経由<span> <a href="mailto:<?php block_field('email-address'）;?> ">
<？php block_field（ 'email-address'）; ？> </a> </ span>
 または<br/>
電話経由：<span> <？php block_field（ 'extension'）; ？> </ span> </ p>

最後のステップでは、ブロックのプロパティを使用してこのブロックの構成を完了しました

アイコンを人に設定し、
カテゴリとして「レイアウト要素」を選択し、
キーワードとして「チームメンバー、チーム」を追加

これはすべて、エディターのブロックインサーターに必要です。

それがどのように機能するか見てみましょう。

ブロック「チームメンバー」を使用して、「ブロックラボチームに会う」という新しいページを追加し、チームメンバーを追加しました。

今のところ、すべての情報をブロックエディタの境界内に入力することにしました。フィールドグループの設定中に、サイドバーの[ブロックオプション]タブにフォームコントロールを表示することも選択できました。今のところ、それは個人的な好みだと私は判断しました。ブロックの外側をクリックすると、フォームが消え、ブロックがフロントエンド表現と同じようにレンダリングされます。

ブロックが完成したので、ページにチームメンバーを追加できます。私は、2列の列ブロックにそれらを入れたいと決めました。

ここまでは順調ですね。テンプレートの場所がテーマフォルダを指していることに興奮しませんでした。

テーマを切り替えたい場合でも、ブロックとブロックのレイアウトを自分のサイトに残したいので、必ずブロックフォルダーを新しいテーマのディレクトリにコピーする必要があります。別の方法は、GithubのBlocklabのドキュメントで概説されています。テンプレートのデフォルトの場所を変更するための2つのフィルターを提供します。

「テーマ内で別のテンプレートを使用するには、block_lab_override_theme_template（$ theme_template）フィルターを使用します。 テーマ外（プラグインなど）で別のテンプレートを使用するには、block_lab_template_path（$ template_path）フィルターを使用します。」

これはセットアップがかなり簡単でした。PHP開発者でなくても、おそらく1つのPHP関数block-field（）を使用して、正しいフィールド名を参照するようにしてください。

Block Labは、本質的に、フィールドを作成し、1つの画面でブロックのプロパティを構成する方法を提供します。次に、対応するブロックテンプレートをテーマのディレクトリのフォルダー/ blocks /に追加する必要があります。それはかなり簡単です。

ACF5.8を使用したチームブロックの作成

ACF（Advanced Custom Fields）バージョン5.8には、ブロックビルダーが付属しています（Proバージョンでのみ使用可能）。私のテストでは、ACF 5.8 RC1を使用しました。最終リリースは現在入手可能です。 Elliot Condonはプラグインの作成者であり、最初のバージョンは2011年にリリースされました。プラグインは、フリーランサーや代理店に非常に人気のある開発者ツールに成長し、インストール数は100万を超えています。

その成功と汎用性により、フィールドグループの作成は、他の2つのプラグインと比較してより複雑なプロセスになります。 Proバージョン5.8には、ブロック構築ツールの最初のリリースが含まれています。

これは、フィールドグループ「チームメンバー」の管理ビューです。

これをブロックにするにはどうすればよいですか？ドキュメントは十分に包括的です。注：このテストでは、少し異なる順序で実行しました…

フィールドグループから始めて、ブロックを登録した後、その管理画面に戻る必要がありました（以下を参照）。

2つのファイルを使用しました。まず、テーマのfunctions.phpにブロックを登録する必要がありました。テンプレート/ブロックレンダリングコードでは、 content-block-team-member.phpを使用して、アクティブなテーマのフォルダーにも保存しました。

これら2つが1秒でどのように組み合わされるかがわかります。残りの作業は、バックエンドのプラグインによって行われます。

それでは、PHPでブロックコードを書いてみましょう

最初のスニペットはブロック登録です。名前、タイトル、説明を付け、レンダリングテンプレートをポイントし、カテゴリ、アイコン、およびいくつかのキーワードを付けます。この下で、コンテンツプロデューサーはブロックインサーターでブロックを見つけることができます。テーマのfunctions.phpの最後までスクロールして、次のスニペットを追加しました。

 function register_acf_blocks（）{
   //チームメンバーブロックを登録します。
   acf_register_block（array（
       'name' => 'acf-team-member'、
       'title' => __（ 'ACFチームメンバー'）、
       'description' => __（ 'ACF 5.8を介して作成されたカスタムチームメンバーブロック'）、
       'render_template' => 'content-block-team-member.php'、
       'category' => 'formatting'、
       'icon' => 'admin-comments'、
       'keywords' => array（ 'team member'、 'team'）、
   ））;
}
//関数が存在するかどうかを確認し、セットアップにフックします。
if（function_exists（ 'acf_register_block'））{
   add_action（ 'acf / init'、 'register_acf_blocks'）;
}

このコードはドキュメントから直接引用したもので、いくつかの値を変更しただけです。

次のセクションでは、ブロックレンダリングテンプレートを作成しました。ファイル名は、上記のテキストの「render_template」属性と一致する必要があります。これは「 content-block-team-member.php 」です。

また、ACFのドキュメントに従い、いくつかの値を変更して表示コードを更新しただけです。

 <？php
//特定のスタイルのid属性を作成します
$ id = 'チームメンバー'。 $ block ['id'];

//ブロック設定（ "wide"）からalignクラス（ "alignwide"）を作成します
$ align_class = $ block ['align']？ 'align'。 $ block ['align']： '';

//ブロックフィールドの値をロードしてデフォルトを割り当てます。
$ short_bio = get_field（ 'short_bio'）？： '短い経歴はここにあります...';
$ first_name = get_field（ 'first_name'）？： '名';
$ last_name = get_field（ 'last_name'）？： '姓';
$ image = get_field（ 'picture'）;
$ email_address = get_field（ 'email_address'）;
$ extension = get_field（ 'extension'）;
？>

"class =" team-member ">
       
   
   "alt =" "alt =" "width =" 150 "/>

フィールドグループから始めたので、戻って、グループが登録したばかりのブロックに関連付けられていることを確認する必要がありました。 [フィールドグループ]画面の下に、場所のルールを作成しました。次のように読む必要があります。「ブロックがACFチームメンバーと等しい場合は、このフィールドグループを表示します。

次に、2つのメンバーを追加したときに、これがブロックエディターでどのように機能するかを見てみましょう。

面白い経験でした。エディタセクションのフォームを使用して、データを入力できます。もう1つのオプションは、サイドバーで使用可能なフォームフィールドにデータを入力すると、ブロックの更新がリアルタイムで表示されます。 2つの方法を切り替えることができますが、現在使用している方法に応じて、[編集に切り替える]または[プレビューに切り替える]ボタンをクリックします。

ブロックエディタのUIはうまく機能します。必要なより複雑なセットアップとコードを実行する価値があります。

レイジーブロックを使用したチームブロックの作成

このテストの3番目のプラグインは、GhostKitブロックコレクションも公開した同じチームであるnkdev.infoのNikitaによって「LazyBlocks」と呼ばれています。

post_contentに情報を保存できるだけでなく、post_metaテーブルに情報を保存することもできます。

これは、インターフェースを使用してフィールドを作成するビデオです。

この管理画面はブロックを作成するためのすべての情報の取得に焦点を合わせているため、左側とサイドバーにフィールドを作成しました。ブロックをエディターに登録するために必要な情報を入力しました。

その下に、フロントエンドとバックエンドのHTMLを追加することができました。構文はBlockLabよりもさらに簡単で、もちろんACFのテンプレートよりもはるかに簡単です。

テーマのfunctions.phpにコードを追加する必要も、テンプレートコードを使用して追加のファイルを作成する必要もありませんでした。

関数呼び出しではなく、構文の強調表示とタグのマージを利用して、ここにすべて追加できます。ドキュメントには、テンプレートコードを作成する複数の方法が示されています。私は間違いなくハンドルバー（セマンティックテンプレート）のファンです。このコンテキストでは、他のシステムのマージタグに非常に近いからです。

同じコードを[エディタHTML]タブにコピーして貼り付けたので、フォームフィールドの下にフロントエンドの表示が表示されました。

使ってみよう。

これはうまくいくようです。ブロックの選択を解除してもフォームが消えないのは少し厄介でした。エディターでは多くの領域を占有します。チームメンバーを2列のブロックに入れたかったのですが、2つのブロックを列ブロックにドラッグアンドドロップすることに成功しませんでした。私はサポートトピックでこれについて言及し、nKは次のように答えました。「…ブロックが選択されていないときにコントロールを非表示にすることは優れた機能であり、ACFブロックにすでに追加されており、まもなくレイジーブロックに追加される予定です。」ここにあなたはそれを持っています–すべてがやがて。

結論：複雑、進化、または簡単。

ACF 5.8には非常に堅牢なブロック構築機能があり、プラグインを使用してサイトを構築しているすべての人は、顧客のために動的ブロックを作成できることを非常に喜んでいます。それはよく考えられており、すべてのスキルセットの開発者はすぐに立ち上がって実行されます。

PHPに精通していない人は、すべてを実行するために試行錯誤を繰り返すことになります。ブロックの要件がより複雑になり、このテストのユースケースを超えると、さらに複雑になります。これは、WordPressの初心者や、自分で多くのコードを記述しないDIYサイトの実装者向けのツールではありません。

現在のところ、ブロックビルダー機能が付属しているのはACF 5.8Proバージョンのみです。 Condonは、スタンドアロンのプラグインにすることを検討しています。（Twitterattiがアイデアについてどう思うかを見てください…）

ブロックラボは開発の初期段階にあります。ほとんどのブロックアーキテクチャを抽象化することに成功し、記述する必要のあるコードの量を減らします。ドキュメントは非常に役立ちます。テンプレートは別のファイルに保存され、残りのテーマファイルと一緒に維持する必要があります。私の会社でプロジェクトに使用する場合は、ヘルパープラグインの1つを使用してテンプレートファイルを保存するため、お客様はBlockLabで作成されたブロックのコンテンツと表示を失うことなくテーマを切り替えることができます。

Proバージョンは、リピーターフィールド、ブロックのインポート/エクスポート、ユーザーオブジェクトフィールド、マップフィールド、その他多くのブロック機能などの追加機能を備えています。

XWPは、WordPress.comのVIPホスティングやその他の企業でエンタープライズクライアントと協力している代理店です。彼らのチームメンバーは、カスタマイザー、AMP、Tideなど、WordPressスペースの他の大きなアイデアに貢献しています。プラグインは、Gutenbergフェーズ2とともに、サイトの実装者、代理店、テーマ開発者向けの堅牢なシステムに成長し続けることを期待しています。

Lazy Blocksはセットアップするのが楽しいです。前述のように、私はHandelbarsテンプレート構文のファンです。初心者でも簡単に習得でき、少し練習すれば、サイトの所有者は自分のサイトに特定のグーテンベルクブロックを作成できます。エディターでのブロック処理は機能していますが、現時点ではディスプレイがブロック選択状態と非選択状態を切り替えないため、少し不格好です。

ページまたは投稿のセクションに追加のフィールドを用意する必要がある場合、Lazy Blocksはプロトタイプを作成し、アイデアから概念実証にすばやく移行するための優れたツールです。

唯一の注意点： nkdev.infoとNikitaの名前の背後にいる人々を見つけることができませんでした。ウェブサイトはそれが若い会社であることを明らかにするだけで、それ以上のものはありません。プラグインを使用する場合は、開発者がプラグインを離陸する前に放棄した場合に備えて、プランBが用意されていることを確認してください。

ACF5.8は非常に複雑です。 Block Labは非常に柔軟性があり、半複雑です。レイジーブロックは適切な名前が付けられており、最も使いやすいです。各ブロックにはHTMLでの表示出力が必要なため、コードを記述せずに回避することはできません。

これらの3つのブロック生成プラグインについてどう思うか教えてください。また、Javascriptを使用せずにブロックを構築できる別のプラグインを見つけた場合は、それについて知りたいです。コメントであなたの考えや発見を共有してください！