ブロックのマークアップ表現

ブロックは独自の HTML ベースの構文を使用してデータベースや HTML テンプレート内に保存され、明確なブロック区切りとして働く HTML コメントによって分けられます。これにより、ブロックのマークアップは技術的に妥当な HTML であることが保証されます。

ブロックを定義するマークアップのガイドラインです。

  • すべてのコアブロックのコメントは、プレフィックスとブロック名で始まります。wp:blockname
  • カスタムブロックでは blockname は namespace/blockname です。
  • コメントは一行でも、自分で閉じる形式でも、HTML コンテンツのラッパーでも構いません。
  • ブロックの設定と属性は、ブロックコメントの中に JSON オブジェクトとして保存されます。

以下は画像ブロックの簡略化したマークアップ表現です。

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
    <img src="source.jpg" alt="" />
</figure>
<!-- /wp:image -->

ブロックのマークアップは、ブロックエディター内でも、フロントエンド上でのブロックの表示でも重要です。

  • WordPress はエディター内でブロックのマークアップを解析してデータを抽出し、編集可能なバージョンをユーザーに提示します。
  • フロントエンド上では、WordPress は再びマークアップを解析してデータを抽出し、最終的な HTML 出力をレンダーします。

WordPress でブロックデータがどのようにパースされるかについては、データフローの記事を参照してください。

ブロックが保存されるとき、ブロックのクライアント内での登録時に定義された save 関数が実行され、ブロック区切りコメントでラップされた、データベース内に保存されるマークアップが生成されます。動的にレンダーされるブロックでは、通常 save は null に設定され、ブロック属性を持つプレースホルダーコメントのみが保存されます。

動的レンダリングのブロックのマークアップは変更が予想されるため、これらのブロックのマークアップはデータベースに保存されません。ブロックの表現としてデータベースに保存されるのは、ブロック区切り文字のコメント (ブロック属性値を含む)だけで構成される1行の HTML です。この HTML は投稿エディターの検証の対象になりません。

例: 動的レンダリング (save = null) のブロックと属性のマークアップ表現。

以下は、動的にレンダーされるブロックのマークアップ表現です (save = null)。注意: コメント以外に HTML マークアップがありません。

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

ブロックに save 関数があるとき、ブロックエディターは save 関数によって作成されたマークアップが、データベースに保存されたブロックのマークアップと同じかどうかをチェックします。

上の例が示すように、動的にレンダーされるブロックでは、保存されるマークアップは最小限です。 一般に、これはブロック属性を含む単なる区切りコメントであり、ブロックエディターのバリデーションの対象にはなりません。 このアプローチはブロックの動的な性質を表していて、実際の HTML はサーバーサイドで生成され、データベースには保存されません。

その他の情報

原文

最終更新日: