ユーザーインターフェース

ブロックエディター ブロックエディター

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

エディターインターフェース

ツールバー にはドキュメントレベルのアクションがあります: 編集 / 選択モード、保存ステータス、元に戻す (undo) / やり直す (redo) / 挿入、設定のトグル、公開オプション。

コンテンツ領域 にはドキュメントそのものが表示されます。

設定サイドバー には「ブロック」タブ内に、タグ、カテゴリー、スケジュールなどの文書やブロックの追加設定が配置されます。ツールバーの歯車ボタンをクリックすると設定サイドバーが消え、ユーザーはより集中した執筆体験を得られます。タブレットなどの小さな画面ではデフォルトでサイドバーは隠されます。

Top ↑

ブロック ブロック

ブロックは、エディターのもっとも基本的な単位です。端的に言えば、すべてがブロックです。ユーザーはブロックを使用し、裏側の HTML マークアップの縦の流れを模しながら、投稿やページを構築します。

ドキュメントの各セクションを操作可能なブロックとして表現することで、コンテキスト的にブロック固有の機能をも追加できます。これはデスクトップアプリケーションの慣習に発想を得たもので、UI を重くせずに高度な機能を拡張できます。

選択したブロックでは多くのコンテキスト指向のアクションが表示されます。

ブロックインターフェース

ブロックインターフェースには基本的なアクションが含まれます。ブロックエディターの目標として、適切で一般的なデフォルトを提供し、ユーザーが設定サイドバーの高度なアクションを使わなくても、完全なドキュメントを作成できることを目指します。

ブロックツールバー は、一般的に利用されるアクションをハイライトします。ブロックツールバー内にはブロックアイコンがあり、選択したブロックの高レベルコントロールを含みます。ユーザーはブロックを別の互換性のあるブロックタイプに変換できます。またいくつかのブロックでユーザーはブロックアイコンを使用して代替のブロックスタイルを選択できます。

ブロックフォーマット オプションを使用するとブロックレベルの設定が可能です。インラインフォーマットオプションではブロック内の要素の配置が可能です。縦に長いブロックでブロックツールバーは、ユーザーがページを下にスクロールしても画面の先頭にピン止めされます。

ブロックは ブロックの移動 アイコンを使用して上下に移動できます。また「詳細設定」メニュー (縦の3点リーダー) からブロックアクションも利用可能です。ブロックの削除や複製のほかに、「HTMLとして編集」や「再利用ブロックに追加」のような 高度なアクション があります。

選択されていないブロックにはブロックツールバーやその他のコンテキスト指向のコントロールは表示されません。選択されていないブロックはコンテンツ自身のプレビューとなります。

選択されていないブロック

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

Top ↑

設定サイドバー 設定サイドバー

設定サイドバー

サイトバーには「文書」と「ブロック」の2つのタブがあります。

  • 文書タブ 編集中の投稿やページのメタデータや設定を表示する。
  • ブロックタブ 現在選択中のブロックのメタデータや設定を表示する。

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

ブロックに高度な構成が必要な場合は、設定サイドバーに設定を配置してください。ブロックの基本的な操作に必要な設定をサイドバーのブロックタブ内に置かないでください。ユーザーは執筆体験に集中するためサイドバーを非表示にするかもしれません。適切なデフォルト選択し、重要なアクションはブロックツールバーに配置してください。

サイドバーのブロックタブに置くべきアクションの例です。

  • テキストのドロップキャップ
  • ギャラリーの列の数
  • 「最新の投稿」ブロックの表示する投稿やカテゴリーの数
  • 基本的なタスクを実行する際にアクセスの必要のないすべての構成

Top ↑

ブロックライブラリ ブロックライブラリ

ブロックライブラリ

ツールバーから、または、コンテンツ領域内のコンテキストとして、ブロックが挿入されると ブロックライブラリ が表示されます。内部でブロックは、折りたたみ可能なセクション内に配置されます。ブロックライブラリの検索バーは、ユーザーの入力に応じて自動でブロックのリストをフィルターします。ユーザーは ブロックボタン または ブロック名 を選択することでブロックを選択できます。

原文

最終更新日: