WordPress | WP REST APIでの投稿本文をGutenbergのブロック要素にする方法

2019-04-212023-02-22WP REST API,WordPress

WP REST APIを使って新規投稿・編集する時にGutenbergのブロック要素としておく方法です。

REST APIだけで投稿や編集をするならあまり意味はないかも知れませんが、Gutenbergのブロックデザインを使えるのでWP REST APでもブロック記述で送信してしていく事で後の編集も効率化できます。

Gutenbergなのかクラシックエディタなのかを指定する記事ステータスはなく、post_contentに入っている本文データがブロック記述されていればブロックとして扱われる模様。

記述は単純で「wp:ブロック名キー」で囲われた部分があればGutenbergで編集しようとした場合もブロックとして使える様になってます。

ブロック別記述サンプル

「段落」ブロック

pタグで括られた段落はwp:paragraphコード内に入ります。また、Gutenbergエディタで書いたaリンクなども段落コードの中に記述されます。

<!-- wp:paragraph -->
<p>段落ブロック</p>
<!-- /wp:paragraph -->

「見出し」ブロック

見出しタグはwp:heading内に入ります。h2、h3などで違いはなく共通です。

修正：サイト上の表示には問題ありませんがh3以降の場合は、levelデータを記述しておかないとエディタ画面で問題の解決を選択する手間が発生します。

h2の場合

<!-- wp:heading -->
<h2>見出しブロック</h2>
<!-- /wp:heading -->

h3の場合

<!-- wp:heading {"level":3} -->
<h2>見出しブロック</h2>
<!-- /wp:heading -->

「引用」ブロック

引用はwp:quoteコード内に記述されます。デフォルトのデザインを使うには「wp-block-quote」というクラス名を付ける。

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>引用内容</p><cite>引用元</cite></blockquote>
<!-- /wp:quote -->

「プルクオート（引用）」ブロック

もうひとつの引用ブロック、figure属性で記述されています。クラス名に「wp-block-pullquote」を付けるとGutenbergで引用ブロックを使った場合と同じになります。

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>引用文</p><cite>引用元</cite></blockquote></figure>
<!-- /wp:pullquote -->

「ボタン」ブロック

「ボタン」ブロックはリンクをボタンで表示するブロックです。クラス名「wp-block-button」がGutenbergでデフォルトのクラス名になります。

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://1-notes.com/">ボタン</a></div>
<!-- /wp:button -->

「ファイル（ダウンロードボタン）」ブロック

「ファイル」ブロックはファイルのダウンロードボタンを追加するブロックです。クラス名「wp-block-file」を付与する事でデフォルトのデザインを利用できます。

<!-- wp:file {"id":99,"href":"ファイルURL"} -->
<div class="wp-block-file"><a href="ファイルURL">タイトル</a><a href="ファイルURL" class="wp-block-file__button" download>ダウンロード</a></div>
<!-- /wp:file -->

「画像」ブロック

画像ブロックには画像idのデータを付与します。クラス名「wp-block-image」を付与する事でデフォルトのCSSを利用できます。

<!-- wp:image {"id":99} -->
<figure class="wp-block-image"><img src="画像URL" alt="代替テキスト" class="wp-image-99"/><figcaption>キャプション</figcaption></figure>
<!-- /wp:image -->

「カバー」ブロック

カバーは画像の上にテキストを置けるブロックです。クラス名「wp-block-cover」を付与する事でデフォルトのCSSを利用できます。

<!-- wp:cover {"url":"画像URL","id":メディアID} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(画像URL)"><div class="wp-block-cover__inner-container">
<!-- wp:paragraph {"align":"center","placeholder":"タイトル","fontSize":"large"} -->
<p style="text-align:center" class="has-large-font-size">テキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

「テーブル」ブロック

テーブルブロッックです。表示には問題ありませんが、<tbody>タグがないとエディタで解決されないので注意します。クラス名「wp-block-table」を付与する事でデフォルトのCSSを利用できます。

<!-- wp:table -->
<table class="wp-block-table"><tbody>
<tr><td>名前</td><td>太郎</td></tr>
<tr><td>出身地</td><td>日本</td></tr>
</tbody></table>
<!-- /wp:table -->

「カスタムHTML」ブロック

wp:htmlコードで括られたHTMLコードはカスタムHTMLブロックとして処理されます。

<!-- wp:html -->
カスタムHTML
<!-- /wp:html -->

「コード」ブロック

「コード」ブロックはソースコード表示用ブロックです。クラス名「wp-block-code」を付与する事でデフォルトのCSSを利用できます。

<!-- wp:code -->
<pre class="wp-block-code"><code>
//コード
</code></pre>
<!-- /wp:code -->

「整形済み」ブロック

「整形済み」ブロックは<pre>タグ内に記述した文字列を表すブロックです。クラス名「wp-block-preformatted」を付与する事でデフォルトのCSSを利用できます。

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">整形済み</pre>
<!-- /wp:preformatted -->

「リスト」ブロック

wp:list内に<ul>タグから記述する事でGutenbergのエディタでもリストブロックとして表示されます。

<!-- wp:list -->
<ul><li>リスト</li><li>リスト</li></ul>
<!-- /wp:list -->

「ショートコード」ブロック

記事内にショートコードが設置できるブロックです。ショートコードは[]で括って記述する必要があります。

<!-- wp:shortcode -->
[shortcode]
<!-- /wp:shortcode -->

「もっと読む（moreタグ）」ブロック

moreタグを設置するブロックです。コード内にmoreタグを記述します。

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

「改ページ（記事内ページャー ）」ブロック

「改ページ」ブロックは記事内にページャーリンクが追加する事が可能なブロックです。（ひとつあれば２ページ、ふたつあれば3ページ）

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

「スペーサー（空白スペース）」ブロック

「スペーサー」ブロックは指定した範囲の空白スペースを設置できるブロックです。高さを指定します。

<!-- wp:spacer {"height":240} -->
<div style="height:240px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

「区切り（区切り線）」ブロック

区切り線を設置可能なブロックです。CSSクラス「wp-block-separator」にてデフォルトのデザインも可能となります。

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

「RSSフィード」ブロック

記事内にRSSフィードが設置できるブロック（WordPress5.2～）です。今の所あまりカスタマイズはできません。

<!-- wp:rss {"feedURL":"https://1-notes.com/feed/"} /-->

関連：【WordPress】v5.2から記事編集ブロックにRSSウィジェットが追加される | ONE NOTE

「カラム」ブロック

wp:columnsコードの中にwp:columnコードを入れ子にしていく事でブロックを横に並べる事が可能になっています。サンプルコードでのwp:paragraphはその中の段落という位置づけです。

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>カラム</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>カラム</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

「Search（検索窓）」ブロック

記事内に検索窓を設置できるブロックです。（WordPress5.2～）

<!-- wp:search /-->

「カテゴリ」ブロック

記事内にカテゴリ一覧を設置できるブロックです。（WordPress5.2～）

<!-- wp:categories /-->

「タグクラウド」ブロック

記事内にタグクラウトを設置できるブロックです。（WordPress5.2～）

<!-- wp:tag-cloud /-->