グーテンベルクブロックのパターンライブラリの構築

公開: 2021-07-19

グーテンベルクは、パターンベースのウェブデザインへの大きな転換を表しています。この記事では、カスタムグーテンベルクブロックの独自の柔軟なライブラリを作成するときに採用したアプローチについて説明します。

バックグラウンド

グーテンベルクの2018年12月のリリースは、WordPressの開始以来最大の変化を表しています。新しいブロックベースの「ドラッグアンドドロップ」インターフェイスは、開発者がテーマを作成する方法、デザイナーがサイトをコンポーネントパーツに分割することを検討する方法、およびコンテンツエディターがコンテンツ作成を管理および計画する方法を変更します。

これは、パターンベースのWebサイトデザインへの根本的な変化です。可能な限り最高のユーザーエクスペリエンスを作成し、ワークフローを合理化するために、Webサイト全体に一貫して適用できる再利用可能な要素のシステム。私たちの多くはすでにパターンに取り組んでいましたが、グーテンベルクはこの変化を加速して進めています。 WordPressは世界中のウェブサイトの3分の1を支えているため、この変更の影響は誇張することはできません。

この記事では、パターンライブラリの計画と構築を開始するときに開発者が直面した問題のいくつか、グーテンベルクに固有の制限をどのように克服したか、カスタムブロックの柔軟なシステムを作成するために採用したアプローチについて説明します。

私たちの目標

オーダーメイドのWordPressWebサイトのスペシャリストビルダーとして、グーテンベルクは私たちにパターンの統一されたライブラリを作成する絶好の機会を与えてくれました。多くのカスタムWebサイトビルドで使用するための調整可能なブロックのセット。

この新しい編集エクスペリエンスを取り入れたいだけでなく、限られたコアGutenbergブロックのセットや、既製のサードパーティソリューションのパッチワークに依存することなく、独自のシステムを使用してソリューションを提供できるようにしたかったのです。

指先にある包括的なブロックのセットは、新しいグーテンベルクのWebサイトビルドのために各ブロックを最初から作成する必要がないことも意味します。これにより、サイトの美学を洗練するためにさらに多くの時間を費やし、Webサイトを競合他社から分離するのに役立つ種類の仕上げと最適化を追加することができます。

課題

設計の柔軟性

さまざまなオーダーメイドのテーマを柔軟に作成できる、いくつかのパターンを備えた用途の広いデザインシステムが必要でした。

テーマのデザインに妥協することなく、有限で現実的な数のパターンを維持できることのバランスをとることが課題でした。

テーマ開発の変化

グーテンベルク以前は、テーマ開発にさまざまなアプローチを採用していました。最も一般的なのは、サイトの別々の部分に個別のページテンプレートを作成することでした。テンプレートは非常に規範的であり、設計された各セクションのカスタムフィールドが含まれます。たとえば、「ケーススタディ」テンプレートには、テキストエディタ、画像ギャラリー、紹介文などのフィールドが含まれる場合があります。ただし、テンプレートに含まれると、簡単に変更することはできません。

このアプローチはページレイアウトの点で制限的であるだけでなく、通常、すべての新しいテンプレートベースのサイトで繰り返しの努力が必要であることを意味しました。フィールドを作成し、テンプレートを設定し、フロントエンドに表示するためにコンポーネントを個別にコード化する必要があります。

グーテンベルクに適応するには、開発アプローチを変更し、再利用可能なコンポーネントを作成する方法を理解し、グーテンベルクが新しいWebサイトの構築に提供する柔軟性を受け入れる必要がありました。

グーテンベルクはそれほど柔軟ではありません

箱から出して、グーテンベルクは30以上のコアブロックを利用できます。段落、見出し、リスト要素などの基本的なコンテンツコンポーネントから、より複雑なウィジェットや埋め込みまで、すべて。

私たちのウェブサイトビルドの多くでは、これらのコアブロックのかなりの数が関連性がないか、テーマがそれらに要求するレベルの機能を備えていません。テーマのデザインに適した非常に特殊な機能を実行する独自のパターンのセットを作成する方法が必要でした。

グーテンベルクですぐに見つかったもう1つの問題は、コアブロックを使用してより複雑なレイアウトを作成するのは簡単でも直感的でもないということです。

たとえば、「コンテンツと画像」ブロックのパターンでは、見出し、段落、リスト、ボタンを画像の横に表示し、そのコンテンツの左側または右側に画像を表示するオプションが必要になる場合があります。一貫したレイアウトで表示されます。

コンテンツ画像ブロック — パターンライブラリのワイヤーフレームコンテンツ+画像ブロック

このレベルの自由は、グーテンベルクでは簡単には実現できません。テキスト、画像、ボタンを追加できるブロックはいくつかありますが、これらは本質的に非常にアトミックであり、個別に追加すると、個別の積み重ねられたブロックとして表示されます。グーテンベルクは十分な柔軟性がなく、独自のカスタムブロックを構築できる必要があることが早い段階で明らかになりました。

私たちのソリューション

用途の広いデザインシステム

グーテンベルクがリリースされる前は、パターンライブラリのパターンの調査と視覚化に多くの時間を費やしていました。

これには、既存のWebサイトとプロトタイプのいくつかを監査して、一般的に使用される要素のワイヤーフレームライブラリをコンパイルすることが含まれていました。

パターンライブラリのサンプルブロック — 私たちのデザインシステムからのパターンの小さなサンプル

私たちのデザイナーと開発者は、これらの要素をグーテンベルクブロックに組み合わせる方法と、特定のブロックタイプを作成して、限られたカスタマイズオプションで、テーマごとに1つのブロックの外観を大幅に変える方法を理解するために引き続き協力しました。

パターンをブロックに分類したら、構築を開始する準備が整いました。

高度なカスタムフィールドを備えたビルディングブロック

すべてのテーマ開発者は、ほぼ確実に、ある時点でAdvanced Custom Fields（ACF）に出くわしました。直感的なインターフェイスを介して、さまざまなフィールドタイプを作成できます。基本的なテキストフィールドやコンテンツエディタから、日付ピッカー、マップ埋め込み、ギャラリーフィールドまで何でも。これらは、投稿タイプ、ページテンプレート、カテゴリ、ユーザーページなど、サイトのさまざまな領域に簡単に割り当てることができます。

ACFの最新バージョンであるACFブロックは、この使い慣れた機能をすべてグーテンベルクに拡張します。フィールドのグループは、サイトの他の領域とまったく同じ方法で作成し、さまざまなACFベースのブロックに割り当てることができます。

ブロックと出力フィールドを登録するために必要な数行のコードで、数分以内に基本的なカスタムブロックを作成することが可能です。このアプローチでブロックを簡単に作成できるため、ブロックの構成、出力、およびスタイル設定に集中することができました。

これで、グーテンベルクのすべての柔軟性を提供しながら、一貫したレイアウトに役立つテーマのデザインに制約されたカスタムブロックのスイートを作成することができました。

カスタムの紹介文リピーターブロック — 左側にプレビュー、右側にACFフィールドがある、特注の紹介文リピーターブロック

パターンライブラリプラグイン

いくつかのサンプルブロックを作成した後、エンジニアリングチームの助けを借りて、カスタムプラグイン内にブロックをパッケージ化することにしました。

このブロックベースのプラグインを使用すると、新しいWebサイトビルドのカスタムパターンをすばやく展開できます。これらは、テーマレベルでさらにカスタマイズされます。

パターンライブラリプラグインには、いくつかの便利な機能が含まれています。

新しいブロックをすばやく追加できるようにする基本ブロックテンプレートファイル。
コアブロックとカスタムブロックを初期化し、カスタムカテゴリに含めることができるようにする機能。
各ブロックを有効または無効にできる管理者設定画面。
テーマ内のブロックのレイアウトと構造をオーバーライドする機能。
テーマレベルでブロックスタイルを上書きする機能。
ブロック管理者のプレビューがフロントエンドブロックと同じように見えるように、グーテンベルク内にテーマレベルのスタイルシートをロードします。 CSSグリッドを使用することで、構造の変更を最小限に抑えながら、美観とレイアウトの柔軟性を最大限に高めることができました。
一貫性を維持するために、特定のブロックを特定の投稿タイプに制限できます。

パターンライブラリプラグインの開発は継続的な進化ですが、現在、柔軟なテーマデザインのかなりの部分を構築するために使用できる15を超えるブロックがあります。

私たちのブロックスイートには、ギャラリー、統計、スライダーなど、より多くの「ショーケース」スタイルのパターンに加えて、コンテンツと画像のパターン、紹介文、関連記事、チームブロックが含まれています。

概要

グーテンベルクとカスタムパターンライブラリが開かれた機会に私たちは本当に興奮しています。

最新の編集エクスペリエンスを使用してオーダーメイドのWebサイトを提供し続けることができるだけでなく、エンドユーザーに豊かなエクスペリエンスを提供するのに役立つ統一された開発アプローチで柔軟性の高いWebサイトを作成できます。

現在多くの新しいサイトビルドで使用しているグーテンベルクブロックのパターンライブラリを最初に使用し始めてから約2か月が経ちました。クライアントはグーテンベルクの使用に熱心であり、クライアントのフィードバックはこれまでのところ非常に好意的です。

「マットとパミーは、あなたが作成したサイト要素に関するチュートリアルを提供しました。それらは素晴らしいです！柔軟性とプロ意識は素晴らしく、これまでのすべての素晴らしい仕事にとても感謝しています..今ウェブサイトに本当に興奮しています。ありがとうございました"

–レイチェル・スミス、YMCAノッティンガム

グーテンベルクとの時間をより多く過ごすにつれて、カスタムブロックのパターンライブラリを拡張し、さらに改善して改良を続けていきます。現在、グーテンベルクを拠点とする5番目のサイトに取り組んでいるので、すぐにケーススタディを探してください。

WordPress開発についてサポートが必要な場合は、遠慮なくお問い合わせください。