キーコンセプト

Topics

  • ブロック
    • コンポーザビリティ (構成可能性)
    • データと属性
    • ブロックの変換
    • ブロックのバリエーション
  • 再利用可能ブロック
  • パターン
  • テンプレート
  • スタイル

ブロック

ブロックはコンテンツを構成し、相互に作用し合う抽象的なユニットです。ブロックを組み合わせることで Web ページのコンテンツを作成できます。段落やビデオからサイトのタイトルまで、あらゆるものをブロックとして表現できます。

ブロックはさまざまな異なる形を取りますが、一貫したインターフェースを提供します。例えば、挿入、移動、並べ替え、コピー、重複、変換、削除、ドラッグ、合成。ブロックを再利用することも可能で、投稿や投稿タイプ間で共有したり、あるいは、1つの投稿の中で複数回、使用できます。ブロックを、コンテンツ作成者向けのリッチな整形ツールの付いた、洗練されたショートコードとして考えても良いでしょう。

ブロックの設定とコンテンツは主に3か所でカスタマイズできます。ブロックキャンバス、ブロックツールバー、そしてブロックインスペクターです。

Top ↑

コンポーザビリティ (構成可能性)

ブロックは異なる方法で組み合わされます。ブロックは階層構造を取り、別のブロックをネストできます。ネストしたブロック、およびそのコンテナはそれぞれ、「子」、「親」と呼ばれます。たとえば「カラム」ブロックは、各カラム内に複数の子ブロックを持つ親ブロックになります。InnerBlocks API は子ブロックの使用を統制します。

Top ↑

データと属性

ブロックはコンテンツを、HTML にシリアライズ可能な属性として理解します。この観点から新しいブロック文法があります。ブロック文法を簡単に説明すると、自身で閉じる自己完結型のタグか、開始タグと終了タグから成る HTML コメントです。このブロックの生の形が、シリアライズされたものとして参照されます。

<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->

ブロックは静的にも動的にもなります。静的ブロックに含まれるものは、レンダーされたコンテンツと、変更に基づいての再レンダーに使用される Attributes のオブジェクトです。ダイナミックブロックで必要とされるものは、サーバーサイドデータと、投稿コンテンツが生成 (レンダリング) される間のレンダリングです。

各ブロックは Attributes、または構成設定を含みます。これらは、メタ、または他のカスタマイズ可能な方法で、コンテンツ内の生の HTML から取得できます。

詳細については、データフォーマットとデータフローを参照してください。

Top ↑

ブロックの変換

ブロックは、他のブロックタイプに変換できます。この働きにより、段落ブロックを見出しブロックに変換するような簡単な操作から、複数の画像ブロックをギャラリーブロックに変換するような複雑な操作まで可能になります。ブロックの変換は単一のブロックに対しても、複数のブロックに対しても働きます。また内部のブロックバリエーションも変換の対象になります。

Top ↑

ブロックのバリエーション

ブロックの種類によってブロックバリエーションは、事前定義済みの初期属性セットになります。この API を使用して、複数の構成から単一のブロックを作成できます。バリエーションは異なる可能なインターフェースを提供し、例えばライブラリ内での完全に新しいブロック、あるいは新しいブロックを挿入した際のプリセットとして表示できます。詳細については API ドキュメント を参照してください。

ブロックの追加情報

Top ↑

再利用可能ブロック

再利用可能ブロックは単一または複数のブロックのインスタンスで、複数の場所に挿入、編集でき、同期します。ある場所で再利用可能ブロックを編集すると、同じブロックを使用しているすべての投稿や固定ページで変更が反映されます。例えば、見出しのコンテンツとカスタムカラーを含むブロックを再利用可能ブロックとしてサイトの複数のページや、全ページに表示されるサイドバーウィジェット内で使用できます。

再利用可能ブロックの編集は、同じブロックを使用しているすべての場所に反映されるため、異なる投稿で同じ編集を行う手間を省き時間の節約になります。

内部で再利用可能ブロックは、隠し投稿タイプ wp_block として保存され、 post_id を参照して、ブロックの post_content を返すダイナミックブロックです。

Top ↑

パターン

ブロックパターンは、一緒に組み合わせてデザインパターンを作成するブロックのグループです。このデザインパターンを使用すると個別にブロックを挿入する必要はなく、高度なページやレイアウトを素早く作る最初のスタート地点となります。ブロックパターンは、単一ブロックのような小さなものから、完全なページコンテンツのような大きなものまで可能です。再利用可能ブロックとは異なり、一度パターンが挿入されるとオリジナルのコンテンツとは同期せず、ブロック内のコンテンツのみがユーザーの編集やカスタマイズの対象となります。内部の実装から見るとパターンは、一緒に組み合わされた通常のブロックに過ぎません。テーマはパターンを登録することで、ユーザーにテーマの美しさに合わせたスタート地点を提供することができます。

Top ↑

テンプレート

投稿エディターが投稿のコンテンツを処理するように、テンプレートエディターを使用するとブロックを使用して、ヘッダーからフッターまで、サイト全体を宣言し、編集できます。この機能をサポートするため、サイトタイトル、説明、ロゴ、ナビゲーションなどのサイトの異なる場所、そしてヘッダー、サイドバー、フッターなどのセマンティック領域と通信するブロックのコレクションがあります。テンプレートは、ページ全体を表すテンプレートと、テンプレート内の再利用可能な領域を表すテンプレートパーツとに分解されます。これらのテンプレートとテンプレートパーツは一緒に組み合わされ、テーマにより登録されます。これらはまたブロックエディターを使用して完全に編集できます。カスタマイズされたテンプレートは wp_template 投稿タイプに保存されます。ブロックテンプレートは静的ページと動的ページの両方を含み、たとえば、archive、singular、home、404等があります。

投稿エディターが投稿のコンテンツに集中するように、テンプレートエディターを使用するとブロックを使用して、ヘッダーからフッターまで、サイト全体を宣言し、編集できます。テンプレートは、ページ全体を表す「テンプレート」と、ヘッダー、サイドバー、フッターなどのセマンティック領域を含むテンプレート内の再利用可能な領域を表す「テンプレートパーツ」とに分解されます。

これらのテンプレートやテンプレートパーツは組み合わせることができ、テーマにより登録されます。これらはまたブロックエディターを使用して完全に編集できます。サイトの異なるプロパティや設定、例えばサイトタイトル、説明、ロゴ、ナビゲーション等と通信するブロックのコレクションは、特にテンプレートとテンプレートパーツを編集している際に有用です。カスタマイズされたテンプレートは wp_template 投稿タイプに保存されます。ブロックテンプレートは静的ページと動的ページの両方を含み、たとえば、archive、singular、home、404等があります。

注意: カスタム投稿タイプはまた、開始 post_content テンプレートでも初期化されます。これを上で説明したテーマテンプレートシステムと混同しないでください。

詳細はサイト編集テンプレートを参照してください。

Top ↑

スタイル

スタイルは、従来「グローバルスタイル」と呼ばれ、コードの中ではそのように参照されています。エディターを介してユーザーがアクセスする「インターフェース」と、theme.json ファイル を介して実行される「構成システム」の2つから成ります。theme.json ファイルは、通常であればさまざまな add_theme_support 呼び出しに散らばる構成要素の大部分を吸収し、エディターとの通信を簡素化します。したがって、グローバルスタイルは以下に挙げるような宣言を改良します。すなわち、どの設定を有効化するか、テーマはどの特定ツールをサポートするか (カスタムカラーパレットなど)、利用可能なデザインツール、そして、WordPress、有効化されたテーマ、ユーザーから来るスタイルを調整するインフラ。

詳細については、グローバルスタイル を参照してください。

原文

最終更新日: