ブロックエディタで使用できるブロックのうち、テキストカテゴリに含まれるブロックについて色々と試してみます。
WordPressのバージョンは6.4.1で試しています。
テキストカテゴリ
テキストカテゴリには12種類のブロックがあります。
- 段落
- 見出し
- リスト
- 引用
- コード
- 詳細
- 整形済みテキスト
- プルクオート
- テーブル
- 詩
- 脚注
- クラシック
今回はそれぞれのブロックを試してみますが、実際にブロックエディタで試した際のコードを表示確認用に用意していますので、以下とあわせてご確認ください。
テキストカテゴリのデモページ
段落
段落はすべての文章の基本の構成ブロックで、pタグで出力されます。
<p>段落のテストです。</p>
ブロックを選択している時に以下のようなメニュー(ブロックツールバー)が表示され、インラインの装飾やテキスト揃えなどの設定が行えます。
以下がインラインの装飾になります。
それぞれを追加した場合、以下のようなコードになります。(読みやすいように改行を加えています。)
<p>段落のテストです。<br> <strong>太字</strong>や <em>イタリック</em>、 <a href="https://www.google.co.jp/">リンク</a>、 <code>インラインコード</code>、 インライン画像<img decoding="async" width="16" height="16" class="wp-image-57" style="width: 16px;" src="/xxxxx/icon_arrow.png" alt="">、 <kbd>キーボード入力</kbd>、 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-3-color">ハイライト(テキスト)</mark>、 <mark style="background-color:#90c56d" class="has-inline-color">ハイライト(背景)</mark>、 上付き<sup>x</sup>、 下付き<sub>x</sub>、 <s>打ち消し線</s>、 脚注<sup data-fn="b6b48dca-1114-4626-988f-85e5211e6b45" class="fn"><a href="#b6b48dca-1114-4626-988f-85e5211e6b45" id="b6b48dca-1114-4626-988f-85e5211e6b45-link">1</a></sup>、 <bdo lang="ja" dir="ltr">言語</bdo>のテスト。</p> <ol class="wp-block-footnotes"> <li id="b6b48dca-1114-4626-988f-85e5211e6b45">脚注のテキストです。<br>段落で脚注を使用すると、この入力エリアが追加されます。 <a href="#b6b48dca-1114-4626-988f-85e5211e6b45-link" aria-label="脚注参照1にジャンプ">↩︎</a></li> </ol>
以下のボタンはテキスト揃えで、使用した場合のコードは次のようになります。
<p class="has-text-align-left">段落のテキスト左寄せ</p> <p class="has-text-align-center">段落のテキスト中央寄せ</p> <p class="has-text-align-right">段落のテキスト右寄せ</p>
ブロックツールバーとは別に、入力エリアの右側にもブロックの設定を行うエリア(設定サイドバー)が用意されています。
色の設定を行うと、ブロック全体の文字色や背景色を変更します。
設定できる色はあらかじめ用意されている色か、カラーコードを指定しての設定になります。
<p class="has-vivid-red-color has-text-color has-link-color wp-elements-343cdb058a170baca55b3cd17a421f3d">右サイドバーのテスト<br>色 > テキストの場合</p> <p class="has-vivid-green-cyan-background-color has-background">色 > 背景の場合</p> <p class="has-text-color has-background has-link-color wp-elements-83cfe8e15e4fd3581d5dea9addcf5111" style="color:#e91111;background-color:#a3f6db">色 > テキスト・背景でカラーコードでの指定</p>
タイポグラフィはブロック全体の文字サイズを変更します。
サイズはS・M・L・XLの4種類から選択するか、カスタムサイズ(文字サイズの数値)での設定になります。
<p class="has-small-font-size">タイポグラフィ > s</p> <p class="has-medium-font-size">タイポグラフィ > M</p> <p class="has-large-font-size">タイポグラフィ > L</p> <p class="has-x-large-font-size">タイポグラフィ > XL</p> <p style="font-size:30px">タイポグラフィ > カスタムサイズ(30px)</p> <p style="font-size:2rem">タイポグラフィ > カスタムサイズ(2.0rem)</p>
カスタムサイズの単位はデフォルトだとpxですが、emとremに変更することもできます。
高度な設定ではブロック名、HTML アンカー、追加CSSクラスの設定ができます。
<p class="add-class" id="anchor">高度な設定 > ブロック名(blockname)<br>高度な設定 > HTMLアンカー(anchor)<br>高度な設定 > 追加CSSクラス(add-class)</p>
見出し
見出しは名前の通り見出しを使う時に使用するブロックで、h1〜h6タグで出力されます。
以下のボタンからH1〜H6を選択します。
<h1 class="wp-block-heading">見出しH1</h1> <h2 class="wp-block-heading">見出しH2</h2> <h3 class="wp-block-heading">見出しH3</h3> <h4 class="wp-block-heading">見出しH4</h4> <h5 class="wp-block-heading">見出しH5</h5> <h6 class="wp-block-heading">見出しH6</h6>
見出しの設定サイドバーは以下の通りで、段落と比べてタイポグラフィの外観、大文字小文字が追加されています。
外観は文字のウェイトとイタリックの設定、大文字小文字はtext-transformの設定になります。
<h2 class="wp-block-heading" style="font-style:italic;font-weight:500">外観 > ミディアム: イタリック</h2> <h2 class="wp-block-heading" style="text-transform:uppercase">大文字小文字 > 大文字 Abcd efg</h2> <h2 class="wp-block-heading" style="text-transform:lowercase">大文字小文字 > 小文字 Abcd efg</h2> <h2 class="wp-block-heading" style="text-transform:capitalize">大文字小文字 > 先頭大文字 Abcd efg</h2>
リスト
リストは箇条書きや順序付きのリスト項目を作成するブロックで、ul・olとliタグで出力されます。
上記の表示単一のリスト項目(li)を選択している状態で、左のアイコンをクリックするとリスト全体(ul・ol)の選択に切り替わります。
リスト全体の表示では、箇条書きリストか順序付きリストの選択ができます。
<ul> <li>箇条書きリスト</li> <li>箇条書きリスト</li> </ul> <ol> <li>順序付きリスト</li> <li>順序付きリスト</li> </ol>
単一のリスト項目を選択している状態で、インデント(リストの入れ子)をすることもできます。
<ul> <li>箇条書きリスト <ul> <li>箇条書きリストのインデント <ol> <li>順序付きリストのインデント</li> </ol> </li> </ul> </li>
引用
引用テキストを表示する際に使用するブロックで、blockquote・citeタグが出力されます。
引用ブロックでは、ブロック内で使用するブロックを選択することができます。
複数のブロックを追加することも可能です。
<blockquote class="wp-block-quote"> <p>引用テスト</p> <cite>引用元</cite> </blockquote> <blockquote class="wp-block-quote"> <h2 class="wp-block-heading">引用内の見出し</h2> <p>引用内の段落</p> <ul> <li>引用内のリスト</li> </ul> <cite>引用元</cite> </blockquote>
コード
余白やタグを考慮したコードスニペットを表示するブロックで、pre・codeタグが出力されます。
<pre class="wp-block-code"><code>function test() {
console.log('test');
}</code></pre>
詳細
一部コンテンツの表示・非表示を切り替えることのできるブロックで、details・summaryタグが出力されます。
引用ブロックの時と同じで、ブロック内で使用するブロック(非表示にするブロック)を選択することができます。
<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"> <summary>詳細の要約</summary> <p>詳細のテスト</p> </details> <details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"> <summary>詳細の要約</summary> <h2 class="wp-block-heading">詳細内の見出し</h2> <p>詳細内の段落</p> <ul> <li>詳細内のリスト</li> </ul> </details>
詳細の設定サイドバーではデフォルトで開くかどうかの設定ができます。
<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" open> <summary>詳細</summary> <p>デフォルトで開く場合</p> </details>
整形済みテキスト
スペースやタブを含めて入力した通りに表示するブロックで、preタグが出力されます。
<pre class="wp-block-preformatted">整形済みテキスト テスト テスト テスト</pre>
プルクオート
テキストの引用に使用するブロックで、引用ブロックと役割としては同じですが、より強調したい場合に使用します。
引用内でブロックを選択できない点や、出力されるタグがfigure・blockquote・citeな点などが引用ブロックと異なります。
<figure class="wp-block-pullquote"> <blockquote> <p>プルクオートのテスト</p> <cite>引用元のテスト</cite> </blockquote> </figure>
テーブル
表を作成するためのブロックで、figureタグで囲われたtableタグが出力されます。
テーブルブロックを選択すると、まずカラム数と行数を設定します。
セルとキャプションを入力できます。
<figure class="wp-block-table"> <table> <tbody><tr><td>A-1</td><td>A-2</td></tr><tr><td>B-1</td><td>B-2</td></tr></tbody> </table> <figcaption class="wp-element-caption">キャプションテキスト</figcaption> </figure>
以下のボタンで行や列の追加や削除を行えます。
設定サイドバーではセル幅の固定やヘッダー・フッターの追加ができます。
<figure class="wp-block-table"> <table class="has-fixed-layout"> <tbody><tr><td>表のセル幅を固定を選択した場合のテスト</td><td>A-2</td></tr><tr><td>B-1</td><td>B-2</td></tr></tbody> </table> </figure> <figure class="wp-block-table"> <table> <thead><tr><th>ヘッダーセクション追加</th><th>ヘッダーラベル</th></tr></thead> <tbody><tr><td>A-1</td><td>A-2</td></tr><tr><td>B-1</td><td>B-2</td></tr></tbody> <tfoot><tr><td>フッターセクション追加</td><td>フッターラベル</td></tr></tfoot> </table> </figure>
詩
詩や歌詞など特別な余白形式で表示したい場合に使用するブロックで、preタグで出力されます。
<pre class="wp-block-verse">詩のテスト</pre>
脚注
脚注は文章内のテキストに対して説明などを追加するブロックですが、他のブロックのようにブロックを追加して使用するのではなく、既にあるブロック内で脚注を加えたいテキストに対して設定する形になります。
段落ブロックで試してみます。
脚注を選択すると脚注ブロックが追加されました。
別のブロック内で脚注を追加すると、同じ脚注ブロック内に新しい脚注が追加されます。
脚注を含むブロックの順番を入れ替えると、脚注ブロック内の順番も自動で入れ替わります。
出力は以下のようなコードになります。
<p>テスト<sup data-fn="98368191-44cb-4df7-ae27-601c187ca6db" class="fn"><a href="#98368191-44cb-4df7-ae27-601c187ca6db" id="98368191-44cb-4df7-ae27-601c187ca6db-link">1</a></sup>です</p> <p>脚注<sup data-fn="a6ac6d0b-34a7-480f-8107-0cb985cb104b" class="fn"><a href="#a6ac6d0b-34a7-480f-8107-0cb985cb104b" id="a6ac6d0b-34a7-480f-8107-0cb985cb104b-link">2</a></sup>のテスト</p> <ol class="wp-block-footnotes"> <li id="98368191-44cb-4df7-ae27-601c187ca6db">テストの説明です <a href="#98368191-44cb-4df7-ae27-601c187ca6db-link" aria-label="脚注参照1にジャンプ">↩︎</a></li> <li id="a6ac6d0b-34a7-480f-8107-0cb985cb104b">脚注のテキストです <a href="#a6ac6d0b-34a7-480f-8107-0cb985cb104b-link" aria-label="脚注参照2にジャンプ">↩︎</a></li> </ol>
クラシック
クラシックはクラシックエディタで入力するブロックですが、HTMLタグを直接入力することはできません。
クラシックを選択すると以下のような入力画面が表示されます。
設定できるボタンを一通り試してみると以下の通りです。
<p>クラシックエディタのテスト<br /><strong>太字</strong>、<em>イタリック</em>、<a href="https://www.google.co.jp/">リンク</a>、<del>打ち消し線</del>、<span style="color: #ff0000;">テキスト色</span></p> <hr /> <ul> <li>箇条書きリスト</li> </ul> <ol> <li>順序付きリスト</li> </ol> <blockquote> <p>引用</p> </blockquote> <p style="text-align: left;">左寄せ</p> <p style="text-align: center;">中央寄せ</p> <p style="text-align: right;">右寄せ</p> <p>メディアの追加<br /><img fetchpriority="high" decoding="async" class="alignnone size-medium wp-image-14" src="/xxxxx/test-300x200.jpg" alt="" width="300" height="200" srcset="/xxxxx/test-300x200.jpg 300w, /xxxxx/test-768x512.jpg 768w, /xxxxx/test.jpg 800w" sizes="(max-width: 300px) 100vw, 300px" /></p> <h3>見出し1〜6</h3> <pre>整形済みテキスト</pre> <p style="padding-left: 40px;">インデント</p>
クラシックエディタでの入力の保存完了後、以下のようなブロックツールバーが表示されます。
編集はクラシックエディタでの再編集で、ブロックへ変換は使用した内容に応じてブロックに変換されます。
前に試した例をブロックへ変換すると、以下のようになります。
<p>クラシックエディタのテスト<br><strong>太字</strong>、<em>イタリック</em>、<a href="https://www.google.co.jp/">リンク</a>、<del>打ち消し線</del>、<span style="color: #ff0000;">テキスト色</span></p> <hr class="wp-block-separator has-alpha-channel-opacity"/> <ul> <li>箇条書きリスト</li> </ul> <ol> <li>順序付きリスト</li> </ol> <blockquote class="wp-block-quote"> <p>引用</p> </blockquote> <p class="has-text-align-left">左寄せ</p> <p class="has-text-align-center">中央寄せ</p> <p class="has-text-align-right">右寄せ</p> <p>メディアの追加<br><img decoding="async" class="alignnone size-medium wp-image-14" src="/xxxxx/test-300x200.jpg" alt="" width="300" height="200" srcset="/xxxxx/test-300x200.jpg 300w, /xxxxx/test-768x512.jpg 768w, /xxxxx/test.jpg 800w" sizes="(max-width: 300px) 100vw, 300px" /></p> <h3 class="wp-block-heading">見出し1〜6</h3> <pre class="wp-block-preformatted">整形済みテキスト</pre> <p>インデント</p>
以上でテキストカテゴリのブロックの確認は終わりですが、ここまでに試した内容の表示とコードに関しては以下をご確認ください。
テキストカテゴリのデモページ
コメントが承認されるまで時間がかかります。