🦄

WordPress 5.5のブロックエディター（Gutenberg）が出力するHTML一覧

2020/11/04に公開

CSS

こんにちは。ブロックエディター（Gutenberg）使ってますか？
WordPress 5.0から導入されたブロックエディターもバージョンアップを重ねて益々使いやすくなっていますね。

今回はそんなブロックエディターで記事を作成した際に出力されるHTMLをブロックカテゴリー毎にまとめてみました。

共通のクラスやスタイル

段落ブロックや見出しブロックなどに対してサイドバーやツールバーから設定できる項目です。

タイポグラフィで付与されるクラスやスタイル

デフォルト：クラスなし

小　 ： has-small-font-size

標 準： has-normal-font-size

中　 ： has-medium-font-size

大　 ： has-large-font-size

特 大： has-huge-font-size


カスタムに数字を入力した場合はstyle属性で出力される（ 以下、100 を指定した場合 ）
<p style="font-size:100px">, <h1 style="font-size:100px">

色設定（文字色）で付与されるクラスやスタイル

■ 指定すると共通で has-text-color がつく

黒： has-black-color

シアンブルーグレー： has-cyan-bluish-gray-color

白： has-white-color

ピンク： has-pale-pink-color 

赤： has-vivid-red-color

オレンジ： has-luminous-vivid-orange-color

琥珀： has-luminous-vivid-amber-color

薄いグリーンシアン： has-light-green-cyan-color

鮮やかなグリーンシアン： has-vivid-green-cyan-color

淡いシアンブルー： has-pale-cyan-blue-color

鮮やかなシアンブルー： has-vivid-cyan-blue-color

鮮やかなパープル： has-vivid-purple-color


カスタムカラーの場合はstyle属性で出力される（ 以下、#09525b を指定した場合 ）
<p class="has-text-color" style="color: #09525b;">

色設定（背景色）で付与されるクラスやスタイル

■ 指定すると共通で has-background がつく

黒： has-black-background-color

シアンブルーグレー： has-cyan-bluish-gray-background-color

白： has-white-background-color

ピンク： has-pale-pink-background-color 

赤： has-vivid-red-background-color

オレンジ： has-luminous-vivid-orange-background-color

琥珀： has-luminous-vivid-amber-background-color

薄いグリーンシアン： has-light-green-cyan-background-color

鮮やかなグリーンシアン： has-vivid-green-cyan-background-color

淡いシアンブルー： has-pale-cyan-blue-background-color

鮮やかなシアンブルー： has-vivid-cyan-blue-background-color

鮮やかなパープル： has-vivid-purple-background-color


カスタムカラーの場合はstyle属性で出力される（ 以下、#09525b を指定した場合 ）
<p class="has-background" style="background-color: #09525b;">

ドロップキャップを有効にした場合に付与されるクラス

has-drop-cap

テキスト中央寄せや太字などで付与されるクラスやスタイル

テキスト左寄せ： has-text-align-left

テキスト中央寄せ： has-text-align-center

テキスト右寄せ： has-text-align-right

ブロックの左寄せ： alignleft

ブロックの中央寄せ： aligncenter

ブロックの右寄せ： alignright

太 字： <strong> 〜 </strong>

斜め文字： <em> 〜 </em>

リンク： <a> 〜 </a> 
（ 新しいタブで開く場合は target="_blank" rel="noreferrer noopener"が追加 ）

インラインコード： <code> 〜 </code>

インライン画像： <img>
（表示サイズをpxで指定できる）

上付き： <sup> 〜 </sup>

下付き： <sub> 〜 </sub>

取り消し線： <s> 〜 </s>

文字色： <span class="has-inline-color has-vivid-red-color"> 〜 </span>
（直接入力した場合は「.has-inline-color + style="color: #f00"」で出力される ）

テキストカテゴリー

段落や見出しやリストなど、主に文章によってコンテンツを作成するブロックのカテゴリーです。

段落（ p ）

<p> 〜 </p>

見出し（ h1〜h6 ）

h1： <h1> 〜 </h1>

h2： <h2> 〜 </h2>

h3： <h3> 〜 </h3>

h4： <h4> 〜 </h4>

h5： <h5> 〜 </h5>

h6： <h6> 〜 </h6>

リスト（ ul, ol ）

■ 入れ子なし

<ul>
　<li>List 01<li>
　<li>List 02<li>
　<li>List 03</li>
</ul>

<ol>
　<li>List 10</li>
　<li>List 11</li>
　<li>List 12</li>
</ol>

■ 入れ子あり

<ul>
　<li>List 01
　　<ul>
　　　<li>Child ul</li>
　　</ul>
　<li>
　<li>List 02
　　<ol>
　　　<li>Child ol</li>
　　</ol>
　<li>
　<li>List 03</li>
</ul>

<ol>
　<li>List 10
　　<ul>
　　　<li>Child ul</li>
　　</ul>
　</li>
　<li>List 11
　　<ol>
　　　<li>Child ol</li>
　　</ol>
　</li>
　<li>List 12</li>
</ol>

引用（ blockquote ）


<blockquote class="wp-block-quote is-style-default">
　<p> 〜 </p>
　<cite>
　　<a href="http://example.com" data-type="URL" data-id="http://example.com">
　　　引用元表記
　　</a>
　</cite>
</blockquote>

■ スタイル設定によって追加されるクラス（ blockquoteタグに追加 ）
デフォルト： is-style-default
大： is-style-large

コード（ pre, code ）

<pre class="wp-block-code"><code> 〜 </code></pre>
※ < や >、&などは、HTMLエスケープされる

クラシック

以前のWordPressと同じ。
<p>や<blockquote>などを出力するが、ブロックエディターのようにクラス名は自動付与されない。

■ クラシックエディターの場合（ 引用 ）
<blockquote> 〜 </blockquote>

■ ブロックエディターの場合（ 引用 ）
<blockquote class="wp-block-quote is-style-default"> 〜 </blockquote>

整形済みテキスト（ pre ）

<pre class="wp-block-preformatted"> 〜 </pre>

プルクオート（ figure, blockquote, cite, a ）


<figure class="wp-block-pullquote is-style-default">
　<blockquote>
　　<p> 〜 </p>
　　<cite>
　　　<a href="http://example.com">
　　　　引用元表記
　　　</a>
　　</cite>
　</blockquote>
</figure>

■ スタイル設定によって追加されるクラス（ figureタグに追加 ）
デフォルト： is-style-default
単 色： is-style-solid-color

テーブル（ table ）


<figure class="wp-block-table is-style-regular">
　<table>
    ※ ヘッダーセクションが有効の時のみthead表示
　　<thead>
　　　<tr>
　　　　<th> テーブルヘッダー </th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td> テーブルボディ </td>
　　　</tr>
　　</tbody>
   ※ フッターセクションが有効の時のみtfoot表示
　　<tfoot>
　　　<tr>
　　　　<td> テーブルフッター </td>
　　　</tr>
　　</tfoot>
　</table>
　<figcaption> 〜 </figcaption>
</figure>


■ スタイル設定によって追加されるクラス（ figureタグに追加 ）
デフォルト： is-style-regular
ストライプ： is-style-stripes

■ 表のセル幅を固定にした時に追加されるクラス ( figure > tableタグに追加 )
<table class="has-fixed-layout">

■ 背景色を設定した場合に追加されるクラス ( figure > tableタグに追加 )
<table class="has-subtle-light-gray-background-color has-background">
※ light-grayの部分が色によって変わる、それ以外は共通

詩（ pre ）

<pre class="wp-block-verse"> 〜 </pre>

メディアカテゴリー

画像や動画などの各種メディアファイル用のブロックカテゴリーです。

画像（ figure, img, figcaption ）


<figure class="wp-block-image size-large is-style-default">
　<img
   loading="lazy"
   width="1000"
   height="500"
   src="a.jpg"
   alt="altText"
   class="wp-image-100"
   srcset="a.jpg 1024w, a.jpg 300w, a.jpg 768w, a.jpg 1536w, a.jpg 2000w"
   sizes="(max-width: 1024px) 100vw, 1024px"
  />
　<figcaption> 〜 </figcaption>
</figure>

■ スタイル設定によって追加されるクラス ( figureタグに追加 )
デフォルト： is-style-default
角　丸： is-style-rounded

■ 画像サイズによって追加されるクラス（ figureタグに追加 ）
サムネイル： size-thumbnail
中： size-medium
大： size-large
フルサイズ：size-full

ギャラリー（ figure, ul, img, a, figcaption ）


■ カラム3にした場合
※ソースが長いのでコメント追加してますが実際はコメントはありません。

<figure class="wp-block-gallery columns-3">
　<ul class="blocks-gallery-grid">
　　<li class="blocks-gallery-item">
　　　<figure>
　　　　// リンク先が設定されている場合はaタグで囲む
　　　　<a href="#">
　　　　　<img
	  loading="lazy"
	  width="1024"
	  height="680"
	  src="a.jpg"
	  alt=""
	  data-id="115"
	  data-full-url="a.jpg（フルサイズ）の画像URL"
	  data-link="a.jpg"
	  class="wp-image-115"
	  srcset="a.jpg 1024w, a.jpg 300w, a.jpg 768w, a 1536w, a.jpg 2000w"
	  sizes="(max-width: 1024px) 100vw, 1024px"
	/>
　　　　</a>　　
　　　　<figcaption class="blocks-gallery-item__caption"> ~ </figcaption>
　　　</figure>
　　</li><!-- column 01 -->
　　<li class="blocks-gallery-item">
　　　<figure>　　　　
　　　　// リンク先が設定されてない場合はaタグ無し
　　　　<img
	 loading="lazy"
	 width="1024"
	 height="680"
	 src="b.jpg"
	 alt=""
	 data-id="116"
	 data-full-url="b.jpg（フルサイズ）の画像URL"
	 data-link="b.jpg"
	 class="wp-image-116"
	 srcset="b.jpg 1024w, b.jpg 300w, b.jpg 768w, b.jpg 1536w, b.jpg 2000w"
	 sizes="(max-width: 1024px) 100vw, 1024px"
　　　　/>
　　　　<figcaption class="blocks-gallery-item__caption"> ~ </figcaption>
　　　</figure>
　　</li><!-- column 02 -->
　　<li class="blocks-gallery-item">
　　　<figure>　　　　
　　　　<img
	 loading="lazy"
	 width="1024"
	 height="680"
	 src="c.jpg"
	 alt=""
	 data-id="117"
	 data-full-url="c.jpg（フルサイズ）の画像URL"
	 data-link="c.jpg"
	 class="wp-image-117"
	 srcset="c.jpg 1024w, c.jpg 300w, c.jpg 768w, c.jpg 1536w, c.jpg 2000w"
	 sizes="(max-width: 1024px) 100vw, 1024px"
　　　　/>
　　　　<figcaption class="blocks-gallery-item__caption"> ~ </figcaption>
　　　</figure>
　　</li><!-- column 03 -->
　</ul>
　// ギャラリーのキャプションがある場合はここにfigcaptionを出力
　<figcaption class="blocks-gallery-item__caption"> ~ </figcaption>
</figure>

■ ギャラリー設定によって追加されるクラス（ figureタグに追加 ）
カラム： columns-1,columns-2, columns-3, ... （カラム数によって数字が変わる）
画像の切り抜き： is-cropped

音声（ figure, audio, figcaption ）


<figure class="wp-block-audio">
　<audio controls src="a.mp3"></audio>
　<figcaption> 〜 </figcaption>
</figure>

■ 音声設定によって追加される属性（audioタグに追加）
自動再生： autoplay
ループ： loop
先読み設定（preload）
　ブラウザデフォルト： 何も出力無し
　自　動： preload="auto"
　メタデータ： preload="metadata"
　なし： preload="none"

カバー（ figure, ul, img, a, figcaption ）


<div class="wp-block-cover has-background-dim" style="background-image:url(a.jpg)">
　<div class="wp-block-cover__inner-container">
　　<p class="has-text-align-center has-medium-font-size"> 〜 </p>
　</div>
</div>

■ メディア設定で追加されるクラス（ .wp-block-coverに追加 ）
固定背景： has-parallax

■ 焦点ピッカーで追加されるスタイル（ .wp-block-coverに追加 ）
横位置（80%）縦位置（50%）：style="background-position:80% 50%"

■ サイズで追加されるスタイル（ .wp-block-coverに追加 ）
カバー画像の最小の高さ（200px）の場合style="min-height:200px"

■ オーバーレイ（色）で追加されるクラス（ .wp-block-coverに追加 ）
単色：has-black-background-color, has-vivid-red-background-color ...
クラス名は「色設定（背景色） で付与されるクラスやスタイル」セクションをご参考に。

■ オーバーレイ（グラデーション）で追加されるクラス・要素
（1）has-background-gradient（ .wp-block-coverに追加 ）
（2）div.wp-block-cover直下にspanが追加される。
<span
　aria-hidden="true"
　class="wp-block-cover__gradient-background has-luminous-vivid-orange-to-vivid-red-gradient-background">
</span>

■ 不透明度で追加されるクラス（ .wp-block-coverに追加 ）
has-background-dim-50, has-background-dim-70, ...（透明度によって数字が変わる）

※不透明度が0の場合はspan.wp-block-cover__は出力されない。
※円形の場合はstyle="background:radial-gradient()"が span.wp-block-cover__に追加
※.has-luminous-vivid-orange-to-vivid-red-gradient-backgroundは選択した
グラデーションによって変わる。

ファイル（ div, a, download ）


<div class="wp-block-file">
　<a href="doc.pdf"> 〜 </a> // ファイル名が入力されてる時のみ出力
　<a href="doc.pdf" class="wp-block-file__button" download> 〜 </a>
</div>

■ テキストリンク設定で追加される属性
新しいタブで開く: target="_blank" rel="noreferrer noopener"
（クラス無しのaタグに追加）

■ ダウンロードボタン設定で追加される要素
ダウンロードボタンを表示: a.wp-block-file__buttonを出力

メディアと文書（ div, figure, img, p ）


<div class="wp-block-media-text alignwide">
　<figure class="wp-block-media-text__media">
　　<img loading="lazy" width="1024" height="680" src="a.jpg" alt="" class="wp-image-100" srcset="a.jpg 1024w, a.jpg 300w, a.jpg 768w, a.jpg 1536w, a.jpg 2000w" sizes="(max-width: 1024px) 100vw, 1024px" />
　</figure>
　<div class="wp-block-media-text__content">
　　// 段落や見出しブロックと同じようにテキストにはフォントサイズや色を指定できる。
　　<p class="has-large-font-size"> 見出し </p> 
　　<p> 本　文 </p>
　</div>
</div>

■ メディアと文書の設定で追加されるクラスやスタイル（ .wp-block-media-textに追加 ）
モバイルでは縦に並べる: is-stacked-on-mobile
カラム全体を塗りつぶすように画像を切り抜く: is-image-fill

■ 焦点ピッカーで追加されるスタイル（ .wp-block-media-text__mediaに追加 ）
横位置（80%）縦位置（50%）：style="background-position:80% 50%"
※カラム全体を塗りつぶすように画像を切り抜くがOffの場合は「焦点ピッカー」は無効になる。

■ 文字色や背景色を設定した場合は .wp-block-media-textにクラスが追加される。
クラス名は「色設定（背景色） で付与されるクラスやスタイル」、
「色設定（文字色） で付与されるクラスやスタイル」セクションをご参考に。

動画（ div, figure, video, figcaption ）


<figure class="wp-block-video">
　<video src="video.mp4"></video>
　<figcaption> 〜 </figcaption>
</figure>

■ 動画設定で追加される属性（ videoタグに追加 ）
自動再生： autoplay
ループ： loop
ミュート： muted
プレイバックコントロール： controls
インライン再生： playsinline

先読み設定（preload）
　自　動： preload="auto"
　メタデータ： 何も出力無し
　なし： preload="none"

ポスター画像： poster="ポスター画像URL"

デザインカテゴリー

ボタンやカラム、グループなどを含むブロックカテゴリーです。

ボタン（ div, a ）


<div class="wp-block-buttons">
　<div class="wp-block-button">
　　<a class="wp-block-button__link"> 〜 </a>
　</div>
</div>

■ スタイル設定によって追加されるクラス（ .wp-block-buttonに追加 ）
塗り潰し: is-style-fill
アウトライン: is-style-outline

■ 枠線設定で追加されるスタイル（ a.wp-block-button__linkに追加、30を指定した場合 ）
角丸半径： style="border-radius: 30px;"

■ リンク設定によって追加される属性（ a.wp-block-button__linkに追加 ）
新しいタブで開く: target="_blank" rel="noreferrer noopener"

カラム（ div ）


■ カラム3にした場合
<div class="wp-block-columns">
　<div class="wp-block-column">
　　〜　段落や見出し画像などの好きなブロックを挿入できる　〜
　</div>
　<div class="wp-block-column">
　　〜　段落や見出し画像などの好きなブロックを挿入できる　〜
　</div>
　<div class="wp-block-column">
　　〜　段落や見出し画像などの好きなブロックを挿入できる　〜
　</div>
</div>

※カラムの数だけ div.wp-block-columnが増える。
※div.wp-block-columnの中身が空でも出力される。

■ 文字色や背景色を設定した場合は .wp-block-columnsにクラスが追加される。
クラス名は「色設定（背景色） で付与されるクラスやスタイル」、
「色設定（文字色） で付与されるクラスやスタイル」セクションをご参考に。

グループ（ div ）

<div class="wp-block-group">
　<div class="wp-block-group__inner-container">
　　〜　段落や見出し画像などの好きなブロックを挿入できる　〜
　</div>
</div>

続きを読む（ span ）


<span id="more-100"></span>

※コンテンツ全文ページで抜粋を非表示を有効にした場合は記事詳細ページで、
spanより上は表示されない。

ページ区切り（出力無し）

1つの記事を複数に分割する、フロント側にはHTMLタグは何も出力されない。

区切り（ span ）


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

■ スタイル設定によって追加されるクラス（ .wp-block-separatorに追加 ）
デフォルト： is-style-default
幅広線： is-style-wide
ドット： is-style-dots

■ 色設定によって追加されるクラス（ .wp-block-separatorに追加 ）
クラス名は「色設定（背景色） で付与されるクラスやスタイル」セクションをご参考に。

スペーサー（ div ）


<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

■ スペーサー設定によって追加されるスタイル（ 以下、300を指定した場合、デフォルト 100 ）
ピクセル値での高さ： style="height:300px"

ウィジェットカテゴリー

ショートコードや最新の投稿など動的コンテンツを生成するブロックカテゴリーです。

ショートコード

<p> 〜ここにショートコードが展開〜 </p>
※ショートコードが定義されていない場合は文字列（[hoge]など）として出力される。

アーカイブ

■ リスト表示
<ul class="wp-block-archives wp-block-archives-list">
　<li><a href='http://example.com/2020/11/'>2020年11月</a>&nbsp;(10)</li>
　<li><a href='http://example.com/2019/03/'>2019年10月</a>&nbsp;(3)</li>
　<li><a href='http://example.com/2019/03/'>2019年3月</a>&nbsp;(36)</li>
</ul>

■ ドロップダウンで表示
<div class="wp-block-archives wp-block-archives-dropdown">
　<label class="screen-reader-text" for="wp-block-archives-XXXXX">アーカイブ</label>
　<select id="wp-block-archives-5fa232ab20ffa" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
　　<option value="">月を選択</option>
　　<option value='http://example.com/2020/11/'> 2020年11月 &nbsp;(1)</option>
　　<option value='http://example.com/2019/10/'> 2019年10月 &nbsp;(1)</option>
　　<option value='http://example.com/2019/03/'> 2019年3月 &nbsp;(1)</option>
　</select>
</div>

※投稿数を表示を有効にすると 「&nbsp;(投稿数)」が出力される。

カレンダー

<div class="wp-block-calendar">
　<table id="wp-calendar" class="wp-calendar-table">
　　<caption>2020年11月</caption>
　　<thead>
　　　<tr>
　　　　<th scope="col" title="月曜日">月</th>
　　　　<th scope="col" title="火曜日">火</th>
　　　　<th scope="col" title="水曜日">水</th>
　　　　<th scope="col" title="木曜日">木</th>
　　　　<th scope="col" title="金曜日">金</th>
　　　　<th scope="col" title="土曜日">土</th>
　　　　<th scope="col" title="日曜日">日</th>
　　　</tr>
　　</thead>
　　<tbody>
　　　<tr>
　　　　<td colspan="6" class="pad">&nbsp;</td>
　　　　// 記事がある場合はaタグで日付を囲む
　　　　<td>
　　　　　<a href="http://example.com/2020/11/04/" aria-label="2020年11月4日 に投稿を公開">4</a>
　　　　</td>
　　　</tr>
　　　<tr>
　　　　<td>2</td>
　　　　<td>3</td>
　　　　// 自動的に今日の日付にid="today"付与
　　　　<td id="today">
　　　　　<a href="http://example.com/2020/11/04/" aria-label="2020年11月4日 に投稿を公開">4</a>
　　　　</td>
　　　　<td>5</td>
　　　　<td>6</td>
　　　　<td>7</td>
　　　　<td>8</td>
　　　</tr>
　　　　〜省 略〜
　　　<tr>
　　　　<td>30</td>
　　　　<td class="pad" colspan="6">&nbsp;</td>
　　　</tr>
　　</tbody>
　</table>
　<nav aria-label="前と次の月" class="wp-calendar-nav">
　　<span class="wp-calendar-nav-prev">
　　　// 記事がある直前の月を表示（記事がない月はスキップされる）
　　　<a href="http://example.com/2019/9/">&laquo; 9月</a>
　　</span>
　　<span class="pad">&nbsp;</span>
　　<span class="wp-calendar-nav-next">&nbsp;</span>
　</nav>
</div>

カテゴリー

■ リスト表示
// 階層を表示なし
<ul class="wp-block-categories wp-block-categories-list">
　<li class="cat-item cat-item-1">
　　<a href="/category/cat-a/">カテゴリーA</a> (3)
　</li>
　<li class="cat-item cat-item-5">
　　<a href="/category/cat-a/cat-a-1/">カテゴリーA-1</a> (4)
　</li>
　<li class="cat-item cat-item-9">
　　<a href="/category/cat-a/cat-a-1/cat-a-1-a/">カテゴリーA-1-a</a> (9)
　</li>
</ul>

// 階層を表示あり（ul.childrenが入れ子になる。）
<ul class="wp-block-categories wp-block-categories-list">
　<li class="cat-item cat-item-1">
　　<a href="/category/cat-a/">カテゴリーA</a> (3)
　　<ul class='children'>
　　　<li class="cat-item cat-item-5">
　　　　<a href="/category/cat-a/cat-a-1/">カテゴリーA-1</a> (4)
　　　　<ul class='children'>
　　　　　<li class="cat-item cat-item-9">
　　　　　　<a href="/category/cat-a/cat-a-1/cat-a-1-a/">カテゴリーA-1-A</a> (9)
　　　　　</li>
　　　　</ul>
　　　</li>
　　</ul>
　</li>
</ul>


■ ドロップダウン表示
// 階層を表示なし
<div class="wp-block-categories wp-block-categories-dropdown">
　<select  name='cat' id='wp-block-categories-1' class='postform' >
　　<option value='-1'>カテゴリーを選択</option>
　　<option class="level-0" value="1">カテゴリーA&nbsp;&nbsp;(3)</option>
　　<option class="level-0" value="5">カテゴリーA-1&nbsp;&nbsp;(4)</option>
　　<option class="level-0" value="9">カテゴリーA-1-A&nbsp;&nbsp;(9)</option>
　</select>
</div>
	
// 階層を表示あり（階層で"level-X"が変わる。0：親カテゴリ、1：子カテゴリ、2：孫カテゴリ）
<div class="wp-block-categories wp-block-categories-dropdown">
　<select  name='cat' id='wp-block-categories-1' class='postform' >
　　<option value='-1'>カテゴリーを選択</option>
　　<option class="level-0" value="1">カテゴリーA&nbsp;&nbsp;(3)</option>
　　<option class="level-1" value="5">カテゴリーA-1&nbsp;&nbsp;(4)</option>
　　<option class="level-2" value="9">カテゴリーA-1-A&nbsp;&nbsp;(9)</option>
　</select>
</div>

※どちらも投稿数を表示を有効にすると ()内に投稿数が表示される。

カスタムHTML

ブロックエディターが追加するHTMLなどは何もなく入力したHTMLがそのまま出力される。

RSS


<ul class="wp-block-rss">
　<li class='wp-block-rss__item'>
　　<div class='wp-block-rss__item-title'>
　　　<a href='http://example.com/10/'> 〜 記事タイトル 〜 </a>
　　</div>
　</li>
　<li class='wp-block-rss__item'>
　　<div class='wp-block-rss__item-title'>
　　　<a href='http://example.com/20/'> 〜 記事タイトル 〜 </a>
　　</div>
　</li>
　<li class='wp-block-rss__item'>
　　<div class='wp-block-rss__item-title'>
　　　<a href='http://example.com/30/'> 〜 記事タイトル 〜 </a>
　　</div>
　</li>
</ul>

■ グリッド表示の時に追加されるクラス（ デフォルトはリスト表示。.wp-block-rssに追加 ）
is-grid columns-3, columns-4 ... （カラム数によって数字が変わる）

■ RSS設定で追加されるクラスや要素（ .wp-block-rss__item-title後に追加 ）
投稿者名を表示： <span class="wp-block-rss__item-author">投稿者: John</span>

日付の表示： <time datetime="2020-11-04T10:59:59+09:00" class="wp-block-rss__item-publish-date">2020年11月4日</time>
※.wp-block-rss__item-authorの前に追加

抜粋の表示： <div class="wp-block-rss__item-excerpt"> 〜 抜粋 〜 </div>
※.wp-block-rss__item-authorの後に追加

検索


<form class="wp-block-search" role="search" method="get" action="http://example.com">
　<label for="wp-block-search__input-1" class="wp-block-search__label">検索</label>
　<input
　　type="search"
　　id="wp-block-search__input-1"
　　class="wp-block-search__input"
　　name="s"
　　value=""
　　placeholder=""
　　required
　/>
　<button type="submit" class="wp-block-search__button">検索</button>
</form>

ソーシャルアイコン

TwitterやInstagramなどのアイコンを表示するブロックです。
アドレスが空のアイコンは表示されません。
※SVGタグはソースが長いので省略してます。


<ul class="wp-block-social-links">
　<li class="wp-social-link wp-social-link-wordpress">
　　<a href="https://wordpress.org" aria-label="WordPress">
　　　<svg width="24" height="24" 〜 省略 〜></svg>
  　</a>
　</li><!-- WordPress -->
　<li class="wp-social-link wp-social-link-facebook">
　　<a href="https://facebook.com/XXX" aria-label="Facebook">
　　　<svg width="24" height="24" 〜 省略 〜></svg>
  　</a>
　</li><!-- Facebook -->
　<li class="wp-social-link wp-social-link-twitter">
　　<a href="https://twitter.com/XXX" aria-label="Twitter">
　　　<svg width="24" height="24" 〜 省略 〜></svg>
  　</a>
　</li><!-- Twitter -->
　<li class="wp-social-link wp-social-link-instagram">
　　<a href="https://instagram.com/XXX" aria-label="Instagram">
　　　<svg width="24" height="24" 〜 省略 〜></svg>
  　</a>
　</li><!-- Instagram -->
　<li class="wp-social-link wp-social-link-youtube">
　　<a href="https://youtube.com/XXX" aria-label="youtube">
　　　<svg width="24" height="24" 〜 省略 〜></svg>
  　</a>
　</li><!-- Youtube -->
<ul>

■ スタイル設定によって追加されるクラス（ .wp-block-social-linksに追加 ）
デフォルト： is-style-default
ロゴのみ： is-style-logos-only
カプセル型： is-style-pill-shape

タグクラウド


<p class="wp-block-tag-cloud">
　<a href="http://example.com/tag/wp/" class="tag-cloud-link tag-link-10 tag-link-position-1" style="font-size: 8pt;" aria-label="WP (1個の項目)">
　　WP
　　<span class="tag-link-count"> (1)</span>
　</a>
　<a href="http://example.com/tag/css/" class="tag-cloud-link tag-link-9 tag-link-position-2" style="font-size: 22pt;" aria-label="CSS (5個の項目)">
　　CSS
　　<span class="tag-link-count"> (5)</span>
　</a>
　<a href="http://example.com/tag/js/" class="tag-cloud-link tag-link-8 tag-link-position-3" style="font-size: 8pt;" aria-label="js (3個の項目)">
　　JS
　　<span class="tag-link-count"> (3)</span>
　</a>
</p>

※ タグに紐づいている記事の数によって style="font-size: XXpt;"が変わる。

埋め込みカテゴリー

TwitterやYouTubeなどの埋め込みタグ用のブロックカテゴリーです。
基本的にどれも「figure.wp-block-embed-XXX > div.wp-block-embed__wrapper」をベースにHTMLが構成されていますが、中には<script>もfigure内に含めるものもあります。

※下記のサービスはどのURLを入力すればいいか不明なため割愛しています。

埋め込み

埋め込みたい外部サービスのURLを入力するとTwitterやYouTubeなどを自動的に判別し、最適なHTMLを出力します。
「Twitterブロック」や「YouTubeブロック」を使用した時と同じソースになります。
（これだけで事足りるのでは。。。）

Facebook

Twitter

<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter">
　<div class="wp-block-embed__wrapper">
　　<a class="twitter-timeline" data-width="500" data-height="750" data-dnt="true" href="https://twitter.com/XXX">Tweets by XXX</a>
　　<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

YouTube

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe
　　　title="XXX"
　　　width="500"
　　　height="281"
　　　src="https://www.youtube.com/embed/XXXX?feature=oembed"
　　　frameborder="0"
　　　allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
　　　allowfullscreen
　　>
　　</iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption>　〜 </figcaption>
</figure>

Instagram

HTMLタグに直接スタイルが書かれているのでスタイルの上書きが難しそう。

<figure class="wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram">
　<div class="wp-block-embed__wrapper">
　　<div class="embed-instagram">
　　　<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/XXXXX/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="13" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
　　　　<div style="padding:16px;">
　　　　　<a href="https://www.instagram.com/p/XXXXXX/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank">
　　　　　　<div style=" display: flex; flex-direction: row; align-items: center;">
　　　　　　　<div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div>
　　　　　　　<div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;">
　　　　　　　　<div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div>
　　　　　　　　<div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div>
　　　　　　　</div>
　　　　　　</div>
　　　　　　<div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;">
　　　　　　　<svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
　　　　　　　　<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
　　　　　　　　　<g transform="translate(-511.000000, -20.000000)" fill="#000000">
　　　　　　　　　　<g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g>
　　　　　　　　　</g>
　　　　　　　　</g>
　　　　　　　</svg>
　　　　　　</div>
　　　　　　<div style="padding-top: 8px;">
　　　　　　　<div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> View this post on Instagram</div>
　　　　　　</div>
　　　　　　<div style="padding: 12.5% 0;"></div>
　　　　　　<div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;">
　　　　　　　<div>
　　　　　　　　<div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div>
　　　　　　　　<div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div>
　　　　　　　　<div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div>
　　　　　　　</div>
　　　　　　　<div style="margin-left: 8px;">
　　　　　　　　<div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div>
　　　　　　　　<div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div>
　　　　　　　</div>
　　　　　　　<div style="margin-left: auto;">
　　　　　　　　<div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div>
　　　　　　　　<div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div>
　　　　　　　　<div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div>
　　　　　　　</div>
　　　　　　</div>
　　　　　</a>
　　　　　<p style=" margin:8px 0 0 0; padding:0 4px;">
　　　　　　<a href="https://www.instagram.com/p/XXXXX/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">
　　　　　　　〜 Instagramのテキスト 〜
　　　　　　</a>
　　　　　</p>
　　　　　<p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">
　　　　　　A post shared by
　　　　　　<a href="https://www.instagram.com/tsukasachinen/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank">
　　　　　　　〜 Instagramのユーザー名 〜
　　　　　　</a>
　　　　　 (@Instagramのユーザー名) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2020-03-23T10:46:40+00:00">Mar 23, 2020 at 3:46am PDT</time>
　　　　　</p>
　　　　</div>
　　　</blockquote>
　　　<script async src="//platform.instagram.com/en_US/embeds.js"></script>
　　</div>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

WordPress

<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-kinsta-managed-wordpress-hosting">
　<div class="wp-block-embed__wrapper">
　　<blockquote class="wp-embedded-content" data-secret="cnmIkWqIbc"><a href="https://example.com/blog/xxx/"> 〜 記事タイトル 〜 </a></blockquote>
   <iframe
　　　class="wp-embedded-content"
　　　sandbox="allow-scripts"
　　　security="restricted"
　　　style="position: absolute; clip: rect(1px, 1px, 1px, 1px);"
　　　title="記事タイトル"
　　　src="https://example.com/blog/xxx//embed/#?secret=cnmIkWqIbc"
　　　data-secret="cnmIkWqIbc"
　　　width="500"
　　　height="282"
　　　frameborder="0"
　　　marginwidth="0"
　　　marginheight="0"
　　　scrolling="no"
　　>
　　</iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

SoundCloud

プロやアマチュアが自分が作った音源をクラウドで視聴できるサービス

<figure class="wp-block-embed-soundcloud wp-block-embed is-type-rich is-provider-soundcloud wp-embed-aspect-4-3 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe
　　　title="XXX"
　　　width="500"
　　　height="400"
　　　scrolling="no"
　　　frameborder="no"
　　　src="https://w.soundcloud.com/player/?visual=true&#038;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F920033086&#038;show_artwork=true&#038;maxwidth=500&#038;maxheight=750&#038;dnt=1"
　　>
　　</iframe>
　</div>
　<figcaption> 〜 </figcaption>
</figure>

Spotify

定額制音楽配信サービス

<figure class="wp-block-embed-spotify wp-block-embed is-type-rich is-provider-spotify wp-embed-aspect-9-16 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe
　　　title="XXX"
     width="300"
     height="380"
　　　allowtransparency="true"
　　　frameborder="0"
　　　allow="encrypted-media" 
　　　src="https://open.spotify.com/embed/track/XXXX"
　　>
　　</iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Flickr

写真共有サービス（Instagramのようなもの）

<figure class="wp-block-embed-flickr wp-block-embed is-type-photo is-provider-flickr">
　<div class="wp-block-embed__wrapper">
　　<a href="https://www.flickr.com/photos/XXXX@N06/XX/in/XXX/">
　　　<img
　　　　width="500"
　　　　height="333"
　　　　src="https://live.staticflickr.com/XXXX/XXXX.jpg" 
　　　　alt=""
　　　　loading="lazy"
　　　/>
　　</a>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Vimeo

動画共有サービス（YouTubeのようなもの）

<figure class="wp-block-embed-vimeo wp-block-embed is-type-video is-provider-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe
　　　title="XXX"
　　　width="500"
　　　height="281"
　　　frameborder="0"
　　　src="https://player.vimeo.com/video/XXX?dnt=1&amp;app_id=122963" 
　　　allow="autoplay; fullscreen"
　　　allowfullscreen
　　>
　　</iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Crowdsignal

質問と複数の回答を用意して簡易的なアンケートを作れるサービス。

<figure class="wp-block-embed-crowdsignal wp-block-embed is-type-rich is-provider-crowdsignal">
　<div class="wp-block-embed__wrapper">
　　<script type="text/javascript" charset="utf-8" src="https://secure.polldaddy.com/p/10646488.js"></script>　　
　　<noscript>
　　　<iframe title="What is your favorite food ?" src="https://poll.fm/10646488/embed" frameborder="0" class="cs-iframe-embed">
　　　</iframe>
　　</noscript>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Dailymotion

動画共有サービス（YouTubeのようなもの）

<figure class="wp-block-embed-dailymotion wp-block-embed is-type-video is-provider-dailymotion wp-embed-aspect-4-3 wp-has-aspect-ratio">
　　<div class="wp-block-embed__wrapper">
　　　<iframe
　　　　title="XXX"
　　　　frameborder="0"
　　　　width="500"
　　　　height="283" 
　　　　src="https://www.dailymotion.com/embed/video/x7vpv90" 
　　　　allowfullscreen
　　　　allow="autoplay"
　　　>
　　　</iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

imgur

2ちゃんユーザーとかがよく使っている画像共有サービス

<figure class="wp-block-embed-imgur wp-block-embed is-type-rich is-provider-imgur">
　　<div class="wp-block-embed__wrapper">
　　　<blockquote class="imgur-embed-pub" lang="en" data-id="a/CS9LhSI">
　　　　<a href="https://imgur.com/a/CS9LhSI"> 〜 </a>
　　　</blockquote>
　　　<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Mixcloud

登録ユーザーがクラウドソーシングしているラジオ番組、DJミックス、ポッドキャストの視聴と配信を可能にする英国のオンライン音楽ストリーミングサービス（Wikipediaより）

<figure class="wp-block-embed-mixcloud wp-block-embed is-type-rich is-provider-mixcloud wp-embed-aspect-21-9 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe
　　　title="XXX"
　　　width="100%"
　　　height="120" 
　　　src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2FDJJazzyJeff%2FXXX-20200923-1528%2F&amp;hide_cover=1"
　　　frameborder="0"
　　>
　　</iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

アメリカ版の2ちゃんねるのようなもの（2ちゃんねるより無法地帯ではない）

<figure class="wp-block-embed-reddit wp-block-embed is-type-rich is-provider-reddit">
　<div class="wp-block-embed__wrapper">
　　<blockquote class="reddit-card">
　　　<a href="https://www.reddit.com/r/memes/comments/jnbc9d/i_feel_privileged/?ref_source=embed&amp;ref=share">I feel privileged</a>
　　　from
　　　<a href="https://www.reddit.com/r/memes/">memes</a>   
　　</blockquote>
　　<script async src="https://embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

ReverbNation

独立系音楽業界に焦点を当てた2006年に立ち上げられたWebサイトです。（Wikipediaより）

<figure class="wp-block-embed-reverbnation wp-block-embed is-type-rich wp-embed-aspect-9-16 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe title="Marsh Branch" width="500" height="750" scrolling="no" frameborder="no" src="https://www.reverbnation.com/widget_code/html_widget/artist_3441819?widget_id=55&#038;pwc[included_songs]=1"></iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Slideshare

<figure class="wp-block-embed-slideshare wp-block-embed is-type-rich is-provider-slideshare wp-embed-aspect-1-1 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe　title="Slideshare Japanese" src="https://www.slideshare.net/slideshow/embed_code/key/9ySuwtcSaM1Tgz" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen>
　　</iframe>
　　<div style="margin-bottom:5px">
　　　<strong>
　　　　<a href="https://www.slideshare.net/hidenorigoto/slideshare-japanese" title="Slideshare Japanese" target="_blank">
　　　　　Slideshare Japanese
　　　　</a>
　　　</strong>
　　　from
　　　<strong>
　　　　<a href="https://www.slideshare.net/hidenorigoto" target="_blank">Hidenori Goto</a>
　　　</strong>
　　</div>
　</div>
</figure>

Smugmug

<figure class="wp-block-embed-smugmug wp-block-embed is-type-photo is-provider-smugmug">
　<div class="wp-block-embed__wrapper">
　　<a href="https://dgrin.smugmug.com/Dgrin-Challenges/Dgrin-Sharp-Shooters-Entries/DSS-46/i-v9FML3w">
　　　<img loading="lazy" src="https://dgrin.smugmug.com/Dgrin-Challenges/Dgrin-Sharp-Shooters-Entries/DSS-46/i-v9FML3w/0/905601b5/500x319/KFS%20Photography-500x319.jpg" alt="Kidzmom---Little Sprout" width="500" height="319" />
　　</a>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Speaker Deck

<figure class="wp-block-embed-speaker-deck wp-block-embed is-type-rich is-provider-speaker-deck wp-embed-aspect-4-3 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe title="Fight the Zombie Pattern Library - RWD Summit 2016" id="talk_frame_334390" src="//speakerdeck.com/player/1f957e89563b440d96c16986507b790f" width="500" height="375" style="border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true">
　　</iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

TikTok

<figure class="wp-block-embed-tiktok wp-block-embed is-type-video is-provider-tiktok">
　<div class="wp-block-embed__wrapper">
　　<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@twintertainmenttv/video/6862141883343310086" data-video-id="6862141883343310086" style="max-width: 605px;min-width: 325px;">
　　　<section>
　　　　<a target="_blank" title="@twintertainmenttv" href="https://www.tiktok.com/@twintertainmenttv">@User Name</a>
　　　　<p> 〜 Comment Text 〜
　　　　　<a title="pushed" target="_blank" href="https://www.tiktok.com/tag/pushed">#pushed</a>
　　　　　<a title="tiltok" target="_blank" href="https://www.tiktok.com/tag/tiltok">#tiltok</a>
	<a title="invisibleink" target="_blank" href="https://www.tiktok.com/tag/invisibleink">#invisibleink</a>
　　　　</p>
　　　　<a target="_blank" title="♬ original sound - Twintertainment TV" href="https://www.tiktok.com/music/original-sound-6862141879639739141">♬ original sound &#8211; Twintertainment TV</a>
　　　</section>
　　</blockquote>
　　<script async src="https://www.tiktok.com/embed.js"></script>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

TED

<figure class="wp-block-embed-ted wp-block-embed is-type-video is-provider-ted wp-embed-aspect-16-9 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe title="クリスティン・ベル＋Giant Ant: 我々が排出する炭素はどこへ行くのでしょうか？" src="https://embed.ted.com/talks/lang/ja/kristen_bell_giant_ant_where_does_all_the_carbon_we_release_go" width="500" height="282" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
   </iframe>
 </div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

tumblr

<figure class="wp-block-embed-tumblr wp-block-embed is-type-rich is-provider-tumblr">
　<div class="wp-block-embed__wrapper">
　　<div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/0YCzyo6yX_viDYV25Rjwzw/616047071544344576" data-did="cad6480bb5573affc0067298806b93c751e95a68">
　　　<a href="https://superscoundrel23.tumblr.com/post/616047071544344576/new-mandalorian-illustration">https://superscoundrel23.tumblr.com/post/616047071544344576/new-mandalorian-illustration</a>
　　</div>
　　<script async src="https://assets.tumblr.com/post.js"></script>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

WordPress.tv

<figure class="wp-block-embed-wordpress-tv wp-block-embed is-type-video wp-embed-aspect-16-9 wp-has-aspect-ratio">
　<div class="wp-block-embed__wrapper">
　　<iframe width='500' height='281' src='https://video.wordpress.com/embed/AEPG79eo?hd=1' frameborder='0' allowfullscreen></iframe>
　　<script src='https://v0.wordpress.com/js/next/videopress-iframe.js?m=1435166243'></script>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

Amazon Kindle

<figure class="wp-block-embed-amazon-kindle wp-block-embed is-type-rich is-provider-amazon">
　<div class="wp-block-embed__wrapper">
　　<iframe title="ＷＨＩＴＥ　ＮＯＴＥ　ＰＡＤ（１） (FEEL COMICS swing)" type="text/html" width="500" height="550" frameborder="0" allowfullscreen style="max-width:100%" src="https://read.amazon.com.au/kp/card?preview=inline&#038;linkCode=kpd&#038;ref_=k4w_oembed_sMfdv1k15Jjwq2&#038;asin=B0191356AU&#038;tag=kpembed-20"></iframe>
　</div>
　// キャプションがある場合はここにfigcaptionを出力
　<figcaption> 〜 </figcaption>
</figure>

終わりに。どうしてこの記事を書いたのか？

僕自身、WordPressに組み込む前にデザイナーやコーダーの方から静的な状態でリソースを提供されたりするのですが、その際にクラス名が違っていたり、ゴリゴリにカスタマイズしないとできないようなマークアップしてたりすることがあるので、無駄な修正サイクルが生まれてしまっていたのがネックでした（出力されるソースを知らないのだから当然ですよね）。

WordPressのブロックエディター（Gutenberg）がデフォルトで出力するソースが簡単に確認できればこれらの無駄なサイクルを減らせるんじゃないかと思って本記事を書きました。

もし、あなた自身やあなたの周りの方にも「WordPressのブロックエディター（Gutenberg）が出力するHTMLが知りたい」とゆう方がいましたらシェアしてあげてください。

最後までお読みいただきありがとうございました。

共通のクラスやスタイル

タイポグラフィ で付与されるクラスやスタイル

色設定（文字色） で付与されるクラスやスタイル

色設定（背景色） で付与されるクラスやスタイル

ドロップキャップを有効にした場合に付与されるクラス

テキスト中央寄せや 太字などで付与されるクラスやスタイル

テキストカテゴリー

段落（ p ）

見出し（ h1〜h6 ）

リスト（ ul, ol ）

引用（ blockquote ）

コード（ pre, code ）

クラシック

整形済みテキスト（ pre ）

プルクオート（ figure, blockquote, cite, a ）

テーブル（ table ）

詩（ pre ）

メディアカテゴリー

画像（ figure, img, figcaption ）

ギャラリー（ figure, ul, img, a, figcaption ）

音声（ figure, audio, figcaption ）

カバー（ figure, ul, img, a, figcaption ）

ファイル（ div, a, download ）

メディアと文書（ div, figure, img, p ）

動画（ div, figure, video, figcaption ）

デザインカテゴリー

ボタン（ div, a ）

カラム（ div ）

グループ（ div ）

続きを読む（ span ）

ページ区切り（ 出力無し ）

区切り（ span ）

スペーサー（ div ）

ウィジェットカテゴリー

ショートコード

アーカイブ

カレンダー

カテゴリー

カスタムHTML

最新のコメント

最新の投稿

RSS

検索

ソーシャルアイコン

タグクラウド

埋め込みカテゴリー

埋め込み

Facebook

Twitter

YouTube

Instagram

WordPress

SoundCloud

Spotify

Flickr

Vimeo

Crowdsignal

Dailymotion

imgur

Mixcloud

Reddit

ReverbNation

Slideshare

Smugmug

Speaker Deck

TikTok

TED

tumblr

WordPress.tv

Amazon Kindle

終わりに。どうしてこの記事を書いたのか？

Discussion

タイポグラフィで付与されるクラスやスタイル

色設定（文字色）で付与されるクラスやスタイル

色設定（背景色）で付与されるクラスやスタイル

テキスト中央寄せや太字などで付与されるクラスやスタイル

ページ区切り（出力無し）