キーコンセプト

ブロック

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

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

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

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

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

データと属性

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

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

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

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

変換

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

バリエーション

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

ブロックの追加情報

再利用可能ブロック

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

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

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

パターン

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

テンプレート (進行中)

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

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

グローバルスタイル (進行中)

グローバルスタイルは、ブロックの構成やデフォルトプロパティ、ビジュアル表現のセットを記述します。グローバルスタイルは、ユーザーがサイトエディターにアクセスする際に使用する「インターフェース」と、theme.json ファイル を介して実行される「構成システム」の2つから成ります。theme.json ファイルは通常であればさまざまな add_theme_support 呼び出しに散らばる構成要素の大部分を吸収し、エディターとの通信を簡素化し、以下の改良を目的とします。どの設定を有効化すべきか、どの属性がサポートされるか、テーマが特定のツール、たとえばカスタムカラーパレットを提供するかなどの宣言、そして、全体またはブロックごとに利用可能なデザインツール、ページで使用されるブロックに応じて関連する CSS のみをエンキューできる基盤。

原文

最終更新日: