ディスカッション

The Make WordPress Design blogは、WordPressデザインチームに関する最新情報の主要な場所です。これには、発表、製品目標、会議のメモ、会議の議題などが含まれます。

デザインに関するリアルタイムのディスカッションは、Make WordPress Slack#designチャンネルで行われます(登録が必要です)。デザインチームの週次会議は水曜日の19:00UTCに行われます。

デザイナーはどのように貢献できますか?

Gutenbergプロジェクトは、コードの管理と問題の追跡にGitHubを使用しています。メインリポジトリは次のとおりです:https://github.com/WordPress/gutenberg

デザインやフロントエンドに貢献したい場合は、Needs DesignまたはNeeds Design Feedbackとラベル付けされたチケットに自由に貢献してください。あなたの思慮深い返信、モックアップ、アニメーション、スケッチ、落書きが必要です。提案された変更は、前の作業に対する最小限で具体的な反復として行うのが最良です。

WordPress Design teamは、Figmaを使用して共同作業を行い、作業を共有しています。貢献したい場合は、Slack#design channelに参加し、チームに無料のFigmaアカウントを設定してもらうように依頼してください。これにより、WordPressで使用される便利なコンポーネントのライブラリにアクセスできます。

原則

このセクションでは、エディターインターフェースのデザイン原則とパターンを概説します。デザインの背景を説明し、将来の改善を通知し、人々が素晴らしいブロックをデザインするのを助けるためです。

Gutenberg Logo

GutenbergのロゴはCristel Rossignolによって作成され、GPLライセンスの下でリリースされています。SVGロゴをダウンロード

Gutenbergの目標

Gutenbergの包括的な目標は、リッチなレイアウトを簡単に作成できる投稿およびページ作成体験です。ブロックエディターは、コンテンツを扱うためのこの方法論に基づいて最初に立ち上げられた製品です。

キックオフ投稿から:

エディターは、リッチな投稿を簡単に作成できる新しいページおよび投稿作成体験を提供し、今日ではショートコード、カスタムHTML、または「ミステリーミート」埋め込みの発見が必要なものを簡単にする「ブロック」を持つことを目指します。
このことからいくつかの重要な原則を抽出できます:

  • リッチな投稿の作成はWordPressの重要な強みです。
  • ブロックは、単一のインターフェースの下で機能とインタラクションのタイプを統一します。 ユーザーはショートコード、カスタムHTMLを書く必要はなく、埋め込むためにURLを貼り付ける必要もありません。ユーザーは、ブロックの機能を使用するためにその動作を学ぶだけで済みます。
  • コア機能をより発見しやすくすることで、「ミステリーミート」を見つけにくくします。WordPressは多くのブロックと30以上の埋め込みをサポートしています。それらの可視性を高めましょう。

なぜ

WordPressが他のシステムと異なる点の一つは、ユーザーがHTMLとCSSを知っていてカスタムテーマを構築する限り、想像できる限りリッチな投稿レイアウトを作成できることです。

Gutenbergはエディターを、ユーザーが数回のクリックでリッチな投稿を書き、美しいレイアウトを構築できるツールに再構築します。技術的な知識は必要ありません。WordPressは、すべての人がアクセスできる強力で柔軟なコンテンツツールになります。

ビジョン

Gutenbergは、リッチなコンテンツの作成を容易にしたいと考えています。これは、良好なデフォルトを確保し、高度なレイアウトオプションをブロックにバンドルし、最も重要なアクションをすぐに利用できるようにすることを意味します。WordPressでコンテンツを作成することは、誰にでもアクセス可能であるべきです。

WordPressウェブサイト上のすべてのものはブロックになります: テキスト、画像、ギャラリー、ウィジェット、ショートコード、さらにはプラグインによって追加されたカスタムHTMLのチャンクも含まれます。ユーザーは単一のインターフェース——ブロックインターフェースを学ぶだけで済みます。

すべてのブロックは平等に作成されます。 すべてのブロックは同じ挿入インターフェースに存在します。最近の使用、検索、タブ、グループ化により、最も使用されるブロックが簡単にアクセスできるようになります。

ドラッグアンドドロップは二次的です。 より大きなアクセシビリティとプラットフォームの互換性のために、ドラッグアンドドロップのインタラクションは、クリック、タブ、スペースなどの明示的なアクションの上に追加的な強化として使用されます。

プレースホルダーは重要です。 ブロックが中立的なプレースホルダー状態を持つことができる場合、それを持つべきです。画像プレースホルダーブロックはメディアライブラリを開くボタンを表示し、テキストプレースホルダーブロックは執筆のプロンプトを表示します。プレースホルダーを受け入れることで、すべてのユーザーが空白を埋めるだけで済むように、編集可能なレイアウトを事前定義できます。

直接操作は直感的です。 ブロックインターフェースは、ユーザーがページ上でコンテンツを直接操作できるようにします。プラグインやテーマの著者は、自分のカスタムブロックを構築することでこの体験をサポートし、拡張します。

カスタマイズのためにコード編集は必要ありません。 伝統的にカスタマイズには複雑なマークアップが必要であり、複雑なマークアップは壊れやすいです。Gutenbergでは、カスタマイズがより直感的で安全になります。開発者は、レイアウトの一部を直接レンダリングするカスタムブロックを提供でき、ユーザーが直接編集できる内容を明確に指定できます。つまり、ユーザーはテキストを更新したり、画像を入れ替えたり、列の数を減らしたりすることができ、開発者に頼んだり、壊れることを心配したりする必要はありません。