ブロックエディタ

ブロックエディタの一般的なレイアウトは、上部にバーがあり、その下にコンテンツがあります。

Editor Interface

ツールバーには、ドキュメントレベルのアクションが含まれています:エディタ/選択モード、保存状態、元に戻す/やり直し/挿入のためのグローバルアクション、設定の切り替え、および公開オプション。

コンテンツエリアには、ドキュメント自体が含まれています。

設定サイドバーには、ドキュメントの追加設定(タグ、カテゴリ、スケジュールなど)と「ブロック」タブ内のブロックの設定が含まれています。ツールバーの歯車ボタンは設定サイドバーを隠し、ユーザーがより没入感のある執筆体験を楽しむことを可能にします。小さな画面では、サイドバーはデフォルトで隠されています。

ブロック

ブロック自体はエディタの最も基本的な単位です。一般的に言えば、すべてがブロックです。ユーザーはブロックを使用して投稿やページを構築し、基盤となるHTMLマークアップの垂直フローを模倣します。

ドキュメントの各セクションを操作可能なブロックとして表示することで、ブロック固有の機能を文脈に応じて表示します。これはデスクトップアプリの慣習に触発されており、UIを重くすることなく幅広い高度な機能を提供します。

選択されたブロックは、いくつかの文脈に応じたアクションを表示します:

Block Interface

ブロックインターフェースには基本的なアクションがあります。ブロックエディタは良好で一般的なデフォルトを目指しているため、ユーザーは設定サイドバーの高度なアクションを実際に必要とせずに完全なドキュメントを作成できるはずです。

ブロックツールバーは一般的に使用されるアクションを強調表示します。ブロックアイコンはブロックツールバーにあり、選択されたブロックのための高レベルのコントロールを含んでいます。主に、ユーザーがブロックを別のタイプの互換性のあるブロックに変換することを可能にします。一部のブロックは、ユーザーが代替のブロックスタイルのセットから選択するためにブロックアイコンを使用します。

ブロックフォーマットオプションは、ユーザーがブロックレベルの設定を調整できるようにし、インラインフォーマットオプションはブロック内の要素を調整できるようにします。ブロックが長い場合、ブロックツールバーはユーザーがページを下にスクロールする際に画面の上部に固定されます。

ブロックはブロックムーバーアイコンを介して上下に移動できます。追加のブロックアクションは省略記メニューを介して利用可能です:ブロックの削除や複製、さらに「HTMLとして編集」や「再利用可能ブロックに変換」などの高度なアクション

選択されていないブロックは、ブロックツールバーやその他の文脈に応じたコントロールを表示しません。実際には、選択されていないブロックはコンテンツ自体のプレビューです:

Unselected Block

選択とフォーカスは異なる場合があることに注意してください。画像ブロックはキャプションフィールドにフォーカスがある間に選択されることがあります。

設定サイドバー

Settings Sidebar

サイドバーには2つのタブ、ドキュメントとブロックがあります:

  • ドキュメントタブは、編集されている投稿またはページのメタデータと設定を表示します。
  • ブロックタブは、現在選択されているブロックのメタデータと設定を表示します。

各タブには、ユーザーが開閉できる編集可能なフィールドのセット(サイドバーセクション)があります。

ブロックが高度な設定を必要とする場合、その設定は設定サイドバーに存在するべきです。ブロックの基本的な操作に必要なものをサイドバーのブロックタブに置かないでください。ユーザーは没入感のある執筆体験のためにサイドバーを無視するかもしれません。良いデフォルトを選び、重要なアクションをブロックツールバーで利用可能にしてください。

サイドバーのブロックタブに入る可能性のあるアクションは次のとおりです:

  • テキストのドロップキャップ
  • ギャラリーの列数
  • 「最新の投稿」ブロック内の投稿数またはカテゴリ
  • 基本的なタスクを実行するためにアクセスする必要のない設定

ブロックライブラリ

Block Library

ブロックライブラリは、誰かがツールバーを介して、またはコンテンツエリア内で文脈的にブロックを挿入すると表示されます。内部では、ブロックは展開可能なセクションに整理されています。ブロックライブラリの検索バーは、ユーザーが入力する際にブロックのリストを自動的にフィルタリングします。ユーザーはブロックボタンまたはブロック名を選択することでブロックを選ぶことができます。