ACFブロックは、高度なカスタムフィールドプロから構築されたブロックの品揃えを提供します

公開: 2020-05-07

週末に、MunirKamalは彼のACFBlocksプラグインのバージョン2.0をリリースしました。これは、エディター用の一連のブロックを作成するプロジェクトです。 プラグインは、無料バージョンで18個のカスタムブロックを提供し、プロアップグレードでさらに15個のカスタムブロックを提供します。 Advanced Custom Fields Pro(ACF Pro)の上に構築されています。

プラグインの最新のアップデートでは、ブロック内のテキストにさまざまなGoogle Fontsを使用するためのオプションなど、タイポグラフィのサポートが追加されました。 Kamalには、プラグイン内のすべてのブロックのマージンやパディングなどのデザイン機能の基本スタイルオプションも含まれています。

ACF Proを強い依存関係として使用すると、ACFブロックの対象者が制限されます。 このプラグインの大部分は、予算内でクライアント向けの機能をすばやく構築する必要がある代理店やフリーランサーに役立ちます。 その目的のために、プラグインはしっかりした仕事をします。

ACF Proとの緊密な結合は、プラグインのユーザーエクスペリエンスを損ないます。 ただし、ACFブロックとそのカスタムオプションの背後にある考え方は、依存する親プラグインに依存することの欠点を補います。 2つを切り離すことはほとんどありませんが、よりスムーズなエクスペリエンスを実現し、プラグインをより多くのユーザーに公開します。

カマルは、ACFとそのプロバージョンからプラグインにインスピレーションを得ました。 彼は、中級レベルの開発者であっても、フレームワークを使用してブロックを構築するプロセスを「非常に簡単」に説明しました。 「カスタムフィールドを作成することは、何年にもわたって非常に素晴らしいWordPressフレームワークでした」と彼は言いました。 「そして、[Elliot Condon]がACFのブロック作成機能を発表したとき、すぐにこのすぐに使えるACFブロックのコレクションを作成するきっかけになりました。」

最大の技術的制限は、Kamalがネストされたブロックを構築できないことです。これはACFの現在の制限です。 「私はすでに[コンドン]とそれについて話し合っており、彼はすでにその機能をすぐに実現することに取り組んでいます」と彼は言いました。 「それがACFになると、より驚くべき強力なグーテンベルクブロックを作成する可能性があります。」

プラグインがどのように機能するかについての短いウォークスルーをご覧ください。

ブロックの便利な品揃え

主に無料バージョンのACFブロックをテストしているときに、エンドユーザーの一般的なニーズにすぐに対応できるいくつかの便利なブロックがあることがわかりました。 18の無料ブロックが利用可能であるため、ユーザーは、アップグレードパスに沿ってプロバージョンに移行するかどうかを決定する前に、十分な作業を行うことができます。

コレクションの中で最高のブロックの1つは、フォトコラージュブロックです。 これは、コアギャラリーブロックに対するACFブロックの回答です。 このブロックのグリッドオプションだけでも、このプラグインをチェックする価値があります。 このブロックは、ユーザーが選択したグリッドオプションに応じて、2〜15のグリッドレイアウトを提供します。

WordPressエディターのACFブロックプラグインのフォトコラージュブロックのスクリーンショット。
PhotoCollageブロックのグリッドを設定します。

品揃えの私の2番目のお気に入りは、お客様の声のブロックです。 すべてのブロックで利用できるタイポグラフィオプションと組み合わせると、紹介文のセクションをデザインするのがとても楽しくなります。

WordPressエディターのACFブロックプラグインからの紹介文ブロックのスクリーンショット。
お客様の声のブロックでGoogleFontsをいじくり回します。

これは、プラグインが実行できることのほんの一部です。 価格表ブロックは、レストランサイトがメニューを設定するのに役立ちます。 Pricing Boxブロックは、特にコアのColumnsブロックにネストされている場合、複数の製品オプションを使用して価格設定セクションを簡単に設定できます。 また、Teamブロックを使用すると、会社のチーム/概要ページにプロファイルセクションを簡単に作成できます。

次のブロックは、無料バージョンで利用できます(プロバージョンではさらにいくつかあります)。

  1. スクロール可能な画像ブロック
  2. タブブロック
  3. トグルブロック
  4. アコーディオンブロック
  5. 画像スライダーブロック
  6. ソーシャルシェアリングブロック
  7. 写真のコラージュブロック
  8. 投稿ブロック
  9. お客様の声ブロック
  10. チームブロック
  11. マルチボタンブロック
  12. 価格設定ボックスブロック
  13. 価格表ブロック
  14. 評価ブロックを開始
  15. プログレスバーブロック
  16. カウンター番号ブロック
  17. クリックしてツイートブロック
  18. 営業時間ブロック

スイート全体でKamalのお気に入りのブロックは、画像ホットスポットです。これを使用すると、ユーザーは「ポインター」を使用して画像の背景を設定し、コンテンツをポップアップできます。 ビフォーアフターイメージ。これにより、ユーザーはスライディングバーを使用して2つの画像を比較できます。 プラグインのグリッドベースのギャラリーブロックであるPhotoCollage。 最初の2つは、プラグインのプロバージョンでのみ使用できます。 プラグインの作成者は、すべてのブロックが便利だと思っていると言いましたが、これらは作成するのが最も楽しかったです。

改善の余地

ACFブロックは素晴らしいコンセプトです。 それは多くのことを正しくします。 ただし、そのブロックでの作業の経験を弱める小さな問題があります。 これらの問題は克服できないものではなく、カマルは彼の過去の仕事に精通していることに基づいて次のバージョンでそれらに対処し、ユーザーのための優れた製品の構築に向けて推進することを期待しています。

最も差し迫った問題であり、おそらく最も簡単に修正できるのは、すべてのブロックの左右の余白に対するプラグインのスタイルです。 プラグインは、これらのマージンをデフォルトで0にリセットします。 サイトのアクティブなテーマによっては、フロントエンドのコンテンツ領域ではなく、画面の端にブロックが移動する場合があります。 一部のテーマでは、左/右の余白を使用してコンテンツを配置します。 これは、ACFブロックだけの問題ではありません。 これは、フロントエンド出力を備えたプラグインの間で普及しています。

マージンの問題に対する簡単な解決策の1つは、プラグインのブロックをコアグループブロック内にラップすることです。 これにより、マージンがテーマの制御下に戻ります。

ブロックコンテンツの編集は、ブロック内で直接行われるのではなく、ブロックオプションパネルで行われます。 これがACFProフレームワークの使用の制限なのか、Kamal側の設計上の決定なのかはわかりません。 コンテンツ領域でのコンテンツの編集からサイドバーでのコンテンツの編集にジャンプするのは奇妙に感じます。

ブロックコンテンツとの私の混乱の一例は、フォトコラージュブロックでした。 アップロード用のメディアライブラリが表示されることを期待して、ブロックをクリックしました。 何も起こらなかった。 もう一度クリックしたのは、まあ、最初はうまくクリックできなかったのかもしれません。 何も起こらなかった。 結局、右側のブロックのオプションパネルの下に画像アップロードボタンが見つかりました。

ブロックオプションの設定は、エディターのブロック出力が変更をすぐに反映しないため、少し遅く感じることがあります。 これは主に、ACFブロックがACFProのサーバー側のレンダリング機能に依存しているためです。 これがblocksプラグインで対処できる可能性は低いです。 一部のユーザーは、複数のオプションを編集するときに、遅延レンダリングが面倒だと感じる場合があります。

最終的な考え

カマルは、多くのエンドユーザーが箱から出して作成できないコンテンツのセクションを作成するのに役立つ便利なブロックのセットをまとめました。 無料版とプロ版の間には、合計33ブロックあります。 作成者は、ユーザーのフィードバックに基づいて、時間の経過とともにブロックを追加することに取り組んでいます。 近い将来、彼はバグ修正をハッキングしてコードを改善し続けることを計画しています。

ACF Proがどのように機能するかは、このプラグインを最初から作成した場合にどれほど優れているかを妨げるものだと今でも感じています。 そうは言っても、フレームワークはカマルのプラグインを現実のものにするのに役立ちました。 ACF Blocksは、ACF Proを介して可能なことのショーケースであり、WordPressエコシステムで最も広く使用されているフレームワークの1つに基づいて構築されたソリューションを探している他の開発者を刺激するはずです。

カマルは、一部のACF Proユーザーが同様のブロックを作成しようとする可能性があることを理解していますが、彼のチームの知識とサポート提供への献身が方程式の最も重要な部分であると感じています。 「ACFブロックは、最も一般的なWebデザイン要素用のブロックを自分で作成するための時間と労力を節約します」と彼は言いました。

注:このプラグインのレビューとフィードバックは、プラグインの作成者からリクエストされました。 レビューの処理方法の詳細については、本物の経験に基づく正直なフィードバックに関する投稿をお読みください。