EmDashの本文はPortable Text｜HTMLとの違いと中身の見方

EmDash の記事の本文は、HTML ではなく Portable Text という形式で保存されます。WordPress から来た人がまず戸惑うところです。編集部が雛形の中身を見て分かったことをまとめます。

Portable Text は「部品の並び」

HTML は文字の間に <p> や <h2> の印を入れていく形式です。Portable Text は、本文を「部品」に分けて順に並べたデータです。たとえば見出し1つと段落1つは、次のようになります。

[
  {
    "_type": "block",
    "style": "h2",
    "children": [{ "_type": "span", "text": "はじめに" }]
  },
  {
    "_type": "block",
    "style": "normal",
    "children": [{ "_type": "span", "text": "本文の段落です。" }]
  }
]

よく使う部品

• 段落 … _type が block、style が normal
• 見出し … style が h2・h3 など
• 引用 … style が blockquote
• 箇条書き … block に listItem: "bullet"（番号付きは "number"）
• コード … _type が code。中身は code に、言語は language に入る
• 太字・コード・リンク … 文字の部品（span）に marks を付ける。リンクの行き先は markDefs に書く

EmDash の画面側の部品（emdash/ui）には、コード・画像・表・埋め込み・ギャラリーなどを表示する部品が最初から入っていました。

HTML でなくて何がよいか

• 見た目と中身が分かれているので、デザインを変えても本文を直さなくてよい
• プログラムやAIが本文を組み立てやすい（部品を並べるだけ）
• 同じ本文をWeb以外（アプリ・メールなど）にも使い回しやすい

WordPress の本文はどうなるか

WordPress の本文は HTML なので、移すときは Portable Text へ変換します。EmDash の部品には、WordPress のブロックエディタの本文を Portable Text に変える部品（@emdash-cms/gutenberg-to-portable-text）が入っていました。

表を使うときの注意

Portable Text には表の部品もありますが、列が多いとスマホで横にはみ出しやすくなります。このサイトでは表を使わず、箇条書きで書いています。

関連記事

• EmDashとWordPressの違い
• EmDashのseed.jsonとは？