ブロックデザイン（Block Design）

ベストプラクティス

ブロックの主なインターフェースはブロックのコンテンツエリアです

ブロック自体は実際にサイトに表示されるものを表しているため、ここでのインタラクションは直接操作の原則に最も近く、ユーザーにとって最も直感的です。これは、コンテンツを追加、操作し、表示方法を調整するための主なインターフェースと考えるべきです。ここでのインタラクションには2つの方法があります：

• 1. ブロックのコンテンツエリアにあるプレースホルダーコンテンツは、ユーザーが指示に従ったり「空欄を埋めたり」するためのガイドまたはインターフェースと考えることができます。たとえば、3rdパーティサービスからコンテンツを埋め込むブロックには、プレースホルダーにそのサービスにサインインするためのコントロールが含まれているかもしれません。
• 2. ユーザーがコンテンツを追加した後、ブロックを選択すると、そのコンテンツを調整または編集するための追加のコントロールが表示されることがあります。たとえば、サインアップブロックは、購読者数を隠す/表示するためのコントロールを表示するかもしれません。ただし、これは最小限の方法で行うべきであり、ユーザーがブロックを選択したときにブロックのサイズや表示が劇的に変わるのを避けるべきです（これは混乱を招いたり、煩わしいことがあります）。
  

ブロックツールバーは必要なオプションとコントロールのための二次的な場所です

基本的なブロック設定は、プレースホルダー/コンテンツUIの文脈では常に意味を持つわけではありません。二次的なオプションとして、ブロックの機能にとって重要なオプションはブロックツールバーに存在できます。ブロックツールバーは、すべての画面サイズで非常に文脈に依存し、可視性があります。ブロックツールバーの注目すべき制約の1つは、アイコンベースのUIであるため、ブロックツールバーに存在するコントロールは、アイコンまたはアイコングループを介して効果的に伝達できるものである必要があります。

関連アイテムでブロックツールバーコントロールをグループ化する

ブロックツールバーは、コントロールをセグメントに階層的にグループ化します。最初のセグメントには、ブロックスイッチャー、ドラッグハンドル、ムーバーコントロールなどのブロックタイプコントロールが含まれます。2番目のグループには、ブロック全体に影響を与える一般的および特定のブロックツールが含まれ、その後にインラインフォーマットと「その他」メニューが続きます。オプションで「メタ」または「その他」グループが一部のツールを独自のセグメントに分けることができます。

設定サイドバーは高度な三次コントロールのみに使用するべきです

設定サイドバーは、デフォルトでは小型/モバイル画面では表示されず、デスクトップビューでも折りたたまれることがあります。したがって、ブロックの基本的な操作に必要なものに依存するべきではありません。良いデフォルトを選び、重要なアクションをブロックツールバーで利用可能にし、設定サイドバーはほとんどのユーザーが開く必要のないものと考えるべきです。

さらに、オプションが数個以上ある場合は、設定サイドバーでセクションとヘッダーを使用して、ユーザーが利用可能なオプションを簡単にスキャンして理解できるようにします。

各設定サイドバーにはデフォルトで「高度な」セクションが付属しています。このエリアには「追加のCSSクラス」フィールドがあり、他のパワーユーザーコントロールを収容するために使用されるべきです。

セットアップ状態とライブプレビューステート

セットアップ状態は、時には「プレースホルダー」と呼ばれ、ユーザーがブロックのライブプレビューステートを表示する前に初期プロセスを通じてユーザーを案内するために使用できます。セットアッププロセスは、ブロックをレンダリングするために必要な情報をユーザーから収集します。ブロックのセットアップ状態は、ユーザーに明確な区別を提供するために灰色の背景で示されます。すべてのブロックにセットアップ状態があるわけではありません — たとえば、段落ブロックなどです。

セットアップ状態は必要ありません：

• ブロック内にほとんどの人のニーズを満たす良いデフォルトコンテンツを提供できる場合。
• そのデフォルトコンテンツが簡単に編集およびカスタマイズできる場合。

セットアップ状態を使用する場合：

• ほとんどのユーザーに適した明確なデフォルト状態がない場合。
• ユーザーからの入力を収集する必要があり、それがブロックのライブプレビューと1対1の関係を持たない場合（たとえば、ユーザーにコンテンツをレンダリングするためのAPIキーを入力させる必要がある場合）。
• 有用なデフォルトコンテンツをレンダリングするためにユーザーからのさらなる情報が必要な場合。

セットアップ状態を持つブロックの場合、ユーザーがセットアッププロセスを通過した後、プレースホルダーはそのブロックのライブプレビューステートに置き換えられます。

ブロックが選択されると、ブロックの内容をカスタマイズするための追加のコントロールが表示されることがあります。たとえば、画像ギャラリーが選択されると、画像を削除または追加するためのコントロールが表示されます。

ほとんどの場合、ブロックのセットアップ状態は一度だけ表示され、その後のカスタマイズはライブプレビューステートを介して行われます。ただし、すべてのブロックコンテンツが削除された場合や、ブロックのツールバーまたはサイドバーからのリンクを介してユーザーがセットアップ状態に戻ることを許可することが望ましい場合もあります。

やるべきこととやってはいけないこと

ブロックツールバー

ツールバーコントロールを論理的なセグメントにグループ化します。各セグメントを追加しないでください。

ブロックの識別

ブロックには、ユーザーがブロックライブラリで簡単に見つけられるように、わかりやすく短い名前が必要です。「YouTube」という名前のブロックは見つけやすく理解しやすいです。同じブロックが「埋め込みビデオ（YouTube）」という名前の場合、ブロックライブラリで見つけるのが難しく、わかりにくくなります。

ドキュメントやUIでブロックを参照する際は、ブロックタイトルにはタイトルケースを使用し、「ブロック」記述子には小文字を使用します。たとえば：

• 段落ブロック
• 最新の投稿ブロック
• メディア＆テキストブロック

ブロックには識別アイコンが必要で、理想的には単一の色を使用します。既存のブロックで使用されているアイコンを避けるようにしてください。コアブロックアイコンはMaterial Design Iconsに基づいています。そのアイコンセットやDashiconsをスタイルのインスピレーションとして参照してください。

やるべきこと：

簡潔なブロック名を使用してください。

やってはいけないこと：

長くて複数行のブロック名を避けてください。

ブロックの説明

すべてのブロックには、その機能を明確に説明する説明が含まれているべきです。説明は設定サイドバーに表示されます。

registerBlockType関数のdescription属性を使用して説明を追加できます。

アクション+主語の形式で単一の命令文に従ってください。例：

• すべての物語の基本的な構成要素を開始します。
• 新しいセクションを導入し、訪問者（および検索エンジン）がコンテンツの構造を理解できるようにコンテンツを整理します。
• 箇条書きまたは番号付きリストを作成します。

やるべきこと：

短くシンプルなブロック説明を使用してください。

やってはいけないこと：

長い説明やブランドを避けてください。

プレースホルダー

ブロックが表示される前にユーザーにいくつかのオプションを設定させる必要がある場合は、指示的なプレースホルダー状態を提供する必要があります。

やるべきこと：

指示的なプレースホルダー状態を提供してください。

やってはいけないこと：

ブランドを避け、タイトルだけに頼って指示を伝えないでください。

選択された状態と未選択の状態

未選択のとき、ブロックはフロントエンド出力にできるだけ近くコンテンツをプレビューする必要があります。

選択されたとき、ブロックは、特に基本的な操作に必要な場合、ブロックを直接構成するための入力フィールドやボタンなどの追加オプションを表示することがあります。

やるべきこと：

ブロックの操作に不可欠なコントロールは、ブロック編集ビュー内に直接提供してください。

やってはいけないこと：

ブロックに不可欠なコントロールをサイドバーに置かないでください。そうしないと、モバイルユーザーやサイドバーを閉じたデスクトップユーザーにとって、ブロックが機能しないように見えることがあります。

高度なブロック設定

設定サイドバーの「ブロック」タブには、追加のブロックオプションと構成が含まれる場合があります。ユーザーはサイドバーを閉じて使用しないことがあることを考慮してください。重要なオプションをサイドバーに置くべきではありません。

やるべきこと：

ドロップキャップ機能はブロックの基本的な操作に必要ないため、オプションの構成としてブロックタブに置くことができます。

モバイルを考慮する

できるだけ多くのデバイスや画面サイズでブロックの見た目、感触、動作を確認してください。

Gutenbergのダーク背景エディタースキームをサポートする

エディターでダーク背景でブロックがどのように見えるかを確認してください。

例

これらのプラクティスのいくつかを示すために、デフォルトのGutenbergブロックのいくつかの注釈付き例を以下に示します：

段落

エディターの最も基本的な単位です。段落ブロックはシンプルな入力フィールドです。

プレースホルダー

• 「ブロックを選択するには / を入力してください」というシンプルなプレースホルダーテキスト。ブロックが選択されると、プレースホルダーは消えます。

選択された状態

• ブロックツールバー：見出しなどへの変換を行うためのスイッチャーがあります。
• ブロックツールバー：基本的なテキストの整列があります。
• ブロックツールバー：インラインフォーマットオプション、太字、斜体、打ち消し線、リンクがあります。
  

画像

基本的な画像ブロックです。

プレースホルダー

• 画像をアップロードするオプション、画像を直接ドラッグアンドドロップするオプション、またはメディアライブラリから画像を選択するオプションを持つ一般的な灰色のプレースホルダーブロックです。

選択された状態

• ブロックツールバー：テーマがサポートしている場合、ワイドおよびフル幅を含む整列があります。
• ブロックツールバー：メディアライブラリを開くための画像編集オプションがあります。
• ブロックツールバー：リンクボタンがあります。
• 画像がアップロードされると、画像の下に「キャプションを書く…」というプレースホルダーテキストを持つキャプション入力フィールドが表示されます：

ブロック設定

• 説明があります：「彼らは1,000語の価値があります！単一の画像を挿入します。」
• 代替テキストを変更または追加するオプションと、追加のカスタムCSSクラスを追加するオプションがあります。

画像ブロックの将来の改善には、メディアモーダルを廃止し、ユーザーがプレースホルダー自体から直接画像を選択できるようにすることが含まれる可能性があります。一般的に、モーダルを避けるようにしてください。

最新の投稿

プレースホルダー

挿入時にすぐに機能するため、プレースホルダーはありません。デフォルトの挿入状態は、最後の5つの投稿を表示します。

選択された状態

• ブロックツールバー：整列があります。
• ブロックツールバー：リストビューまたはグリッドビューを選択するオプションがあります。

この場合、ブロックツールバーにはブロックチップが含まれていないことに注意してください。なぜなら、切り替える類似のブロックがないからです。

ブロック設定

• 説明があります：「あなたの最新の投稿のリストを表示します。」
• 投稿の順序、カテゴリでリストを絞り込むオプション、表示する投稿のデフォルト数を変更するオプション、投稿日を表示するオプションがあります。

最新の投稿は、良いデフォルトを持っているため、挿入されるとすぐに完全に機能します。