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

データベースやテンプレート内に HTML ファイルとして保存されるとき、ブロックは特別な HTML 文法を使用して表現されます。これは技術的に正しい (valid) な HTML で、明示的なブロック区切りとして機能する HTML コメントをベースとします。

以下はブロックを表現するマークアップのルールの例です。

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

例: image コアブロックのマークアップ表現

<!-- wp:image -->
<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
<!-- /wp:image -->

ブロックのマークアップ表現は、ブロックエディター、およびフロントエンドでのブロック出力用にパースされます。

  • エディターでは、WordPress がこのブロックのマークアップをパースし、データを取得し、edit バージョンをロードします。
  • フロントエンドでは、WordPress がこのブロックのマークアップをパースし、データを取得し、最終的な HTML マークアップを生成します。

ブロックを保存するときはいつでも、ブロックのクライアント内での登録時に定義した save 関数が呼び出され、ブロック区切り文字のコメント内に、データベースに保存するマークアップが返されます。もし save が null (動的レンダリングのブロックではよくあるケース)であれば、属性とともに、1行のブロック区切り文字のコメントのみが保存されます。

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

  • もし違いがあれば、投稿エディターはブロック検証 (validation) エラーを起こします。
  • ブロック検証エラーは通常、ブロックの save 関数が更新され、ブロックが生成したマークアップが変更された際に発生します。
  • ブロック開発者はブロックの非推奨プロセスを追加してブロックに変更を登録することで、これらの問題を軽減できます。

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

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

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

その他の情報

原文

最終更新日: