WordPress5, テーブルはカスタム制限が多い。style, class属性さえ使えない。

WordPressはバージョン5になってから、テーブルのHTMLを編集してカスタマイズできることが少なくなってしまいました。

原因は、編集機能のメインであるGutenbergがブロック単位でコンテンツを作り、そのテーブルブロックが編集を大きく制限しているから。

HTML編集ではほとんどエラーになるテーブルブロック

今回、簡単なテーブルを使っていろいろカスタムしてみます。

カスタムには、編集画面上部のメニューから『HTMLとして編集』を使ってHTMLを変更します。

<figure class="wp-block-table aligncenter">
  <table>
    <tbody>
      <tr><td>テスト1</td><td>テスト2</td><td>テスト3</td></tr>
      <tr><td>テスト4</td><td>テスト5</td><td>テスト6</td></tr>
      <tr><td>テスト7</td><td>テスト8</td><td>テスト9</td></tr>
    </tbody>
  </table>
</figure>

HTMLタグのstyle属性を追加

HTMLのstyle属性を使ってセルの背景色を変えてみましょう。

<figure class="wp-block-table aligncenter">
  <table>
    <tbody>
      <tr><td style="background-color:red;">テスト1</td><td>テスト2</td><td>テスト3</td></tr>
      <tr><td>テスト4</td><td>テスト5</td><td>テスト6</td></tr>
      <tr><td>テスト7</td><td>テスト8</td><td>テスト9</td></tr>
    </tbody>
  </table>
</figure>

するとテーブルブロックが壊れたエラーが発生しました。

テーブルブロックでは、style属性は使えません。<td> 以外のタグでもやってみましたが全滅でした。

というか、テーブルブロック以外でもできないらしい。

『style属性で直接CSSを書くなよ？』という仕様なんだと思います。

HTMLタグのclass属性を追加

HTMLタグのclass属性もstyle属性と同じようにテーブルブロックを壊します。ただ1点ちがうところは、<figure> だけは追加できる。

これは画面右側にあるブロックメニューの『高度な設定』『追加CSSクラス』でもできるから。

『HTMLとして編集』でできることはありません。

colspan属性を使ってセルを結合する

WP4以前には、エディターメニューにあったセルの結合をしてみましょう。

<figure class="wp-block-table aligncenter">
  <table>
    <tbody>
      <tr><td colspan="3">テスト1</td></tr>
      <tr><td>テスト4</td><td>テスト5</td><td>テスト6</td></tr>
      <tr><td>テスト7</td><td>テスト8</td><td>テスト9</td></tr>
    </tbody>
  </table>
</figure>

これもテーブルブロックが壊れます。Gutenbergになったらテーブルの編集が退化したと言われる所以ですね？

これまで見てきたように、Gutenbergのブロックでは <figure>, <div>などのブロックの一番外の枠のHTMLタグのclass属性以外、属性は追加できません。

カスタムできるのはHTMLタグの変更とメニュー操作だけ

テーブルブロックが壊れない範囲でのカスタムできるのは、HTMLタグの変更だけです。

<td> を <th> に変えるとそのセルはヘッダーになります。

正直これだと、ヘッダーに変えるくらいしかできません。

WP5では、ブロックの編集は画面のメニュー以外できないようになってます。『HTMLとして編集』でできることは、メニューやブロックオプションでできることとほぼ同じ。

ここがWP5の特長。『HTMLとして編集』は用意されても、ブロックのカスタムは、メニューやブロックオプションでできること以外、できないようになってます。

ユーザー操作でエラーが出ないようにするという面では機能強化されていますが、カスタム好きにとっては不便です。

テーブルブロックはあまり進化していない

テーブルブロックはWP4以前よりもあまり進化していません。むしろ、セル幅の変更やセルの結合・分割ができなくなったので退化してると思う人もいるでしょう。

『カスタムHTMLブロックがあるんだから、テーブルブロックは基本的なもんでもいいっしょ？』ということなんでしょう。

また、高機能なテーブルを作成するプラグインもたくさんあります。たとえば TablePress なんかは日々更新されてますし、検索をかけると使い方もたくさん出てきます。

『プラグインがあるなら標準の高機能化は後回しで』と思ってるのかもしれません。

もちろんですが、プラグインなどで作る高機能テーブルはテーブルブロックではありません。カスタムHTMLを使ってるんじゃないかな？

もしくは、Gutenbergから独立した単なるHTMLなのかも。

ボクは、カスタムHTMLブロックを使う派なので良くは分かってませんが。

もうひとつ、WP4以前の編集機能（クラシック）が使えるものもあります。

設定はいろいろあって面倒ですが、クラシックを使う分には初期設定でいいです。

ただこれには弱点があって、ブロックへ変換するとやっぱりブロックは壊れます。リカバリするとエラーになる部分は消えてしまうので意味がありません。

（クラシックはテーブルブロックのHTMLにstyleやcolspanなどの属性をガンガン入れている。）