この記事はSmartCampアドベントカレンダーの9日目の記事になっています！
https://qiita.com/advent-calendar/2025/smartcamp
はじめに
WordPressブロックは実はカスタマイズされたHTMLであり、自力で直接書くことができます。
ブロックの記事も少ないのでここに書いておこうと思います。
WordPressブロックとは
WordPress5.0から採用されているブロックエディターで使われている、記事を構成するパーツのことです。
例: Paragraphブロック
主な形式
WordPressブロックは主にWordPressにより解釈されるコメントとHTMLより構成されています。
確認方法はWordPressのブロックをコピーし、テキストエディタなどに貼り付けると確認できます。
- 例: Paragraphブロック
<!-- wp:paragraph -->
<p>テキスト</p>
<!-- /wp:paragraph -->
ほぼHTMLなのですがブロック用のコメントがにWordPressが使う情報が埋め込まれます。
WordPressが指定している形式ではない場合はinvalidになってしまいます。
- 例: テキスト・背景のカラー、テキストサイズを変更したparagraphブロック。
<!-- wp:paragraph {"className":"text","style":{"elements":{"link":{"color":{"text":"var:preset|color|pale-pink"}}}},"backgroundColor":"vivid-green-cyan","textColor":"pale-pink","fontSize":"medium"} -->
<p class="text has-pale-pink-color has-vivid-green-cyan-background-color has-text-color has-background has-link-color has-medium-font-size">テキスト</p>
<!-- /wp:paragraph -->
種類
標準ブロック
WordPress本体に標準搭載されているブロックです。
Paragraphブロック・Imageブロック・Embedブロックなどが存在します。
同期・非同期パターン
パターンはブロックがまとまったものですが、同期パターンに関しては一つのWordPressブロックのコメント表記で表示されます。
- 同期パターン
<!-- wp:block {"ref":19} /-->
- 非同期パターン
<!-- wp:paragraph {"metadata":{"categories":[],"patternName":"core/block/17","name":"test"}} -->
<p>非同期パターン</p>
<!-- /wp:paragraph -->
プラグインで追加されるブロック
プラグインで追加されるブロックです。
静的レンダリングか動的レンダリングがプラグインによって違うので、WordPressブロックのコメント一つで表記されている場合と、WordPressコメントとHTMLが表示されているものがあります。
レンダリング方法はプラグインによって違うのでコピーしてテキストエディタに貼り付けて確認するのが良いです。
- 動的レンダリング
<!-- wp:block-plugin/block-name /-->
- 静的レンダリング
<!-- wp:block-plugin/block-name -->
<div>
<p>静的レンダリング</p>
</div>
<!-- /wp:block-plugin/block-name -->
最後に
これを前提知識としてHTML => WordPressの記事を書こうと思っているのでそちらもぜひ
Discussion