ブロックエディタで表を作るには・・・備忘録

wordpressで表を作るのに苦労したので、備忘録を。

今使っているwordpressのエディタはgutenberg。テーマはCocoon。
wordpressで表作成と検索すると、「TinyMCE」や、「TablePress」が出て来ます。どちらも使って見ましたが、「TablePress」は大きな表を作る時には色々便利な機能がありますし利用価値が高いと感じました。が、「TinyMCE」の場合はあまり使いやすいとは思えませんでした。これは、自分が最近になってwordpressを使い始めたということで、始めからgutenbergのブロックエディタだったためかもしれません。クラシックエディタはなるべく使いたくないのです。
Advanced Gutenbergというプラグインを使うことで、今のブロックエディタのままで表を作ることができそうなので、備忘録として書いておきます。

1 まず、ブロックエディタの表作成機能で作った、自分のworks記録の表。
二行目にはチラシの画像が入ります。表のセル幅は固定、スタイルはストライプです

なんか間抜けな感じですね。けれどエラーも起きないし、ブロックのまま再利用も可能。
HTMLを見てみると

よくある <table>で始まらず、<figure class= で始まっています。この中で、styleを記述して行けば良いのかと、試しにセルを結合しようとcolspanなどを記述すると、

このようにメッセージが出てきてしまいます。こりゃぁ勉強せねば・・・

2.クラシックエディタに、HTML入力したもの。

タ イトル	が〜◯ちょばMIME CRAZY
日程	2019/01/01〜2019/12/31
劇場	テアトル〇〇
劇 団・主催	吉〇〇業株式会社
作・ 演出	が〜◯ちょば
キャ スト	Hiro-〇〇
ス タッフ	照明　沖野◯◯ 音響　石神保　オペ　中出◯◯ 舞台監督　◯◯信生
メ モ

二行目の列を結合して、チラシをセンターに持ってくることが出来ました。各罫線も、鼠色にして、一行目は水色のバックグラウンドにしてみました。

ブロックを作るときに、「クラシック」を選びます。

上の「点三つ」をクリックして、HTMLとして編集を選び、作成されたブロックに書き込んでいきます。

この表のHTML (途中まで)

きちんとcolspanも使えています。罫線の色や太さも記述した通りになっているようです。

これでほとんど良いんじゃないかと思うも、クラシックエディタはいづれサポートされなくなるとアナウンスされている以上、ブロックエディタで作りたい。
そこで、Advanced Gutenbergプラグインでの作業。

3.Advanced Gutenbergの表

タイトル	が〜◯ちょばMIME CRAZY
日程	2019/01/01〜2019/12/31
劇場	テアトル〇〇
劇団・主催	吉〇〇業株式会社
作・演出	が〜まるちょば
キャスト	Hiro-〇〇
スタッフ	照明　沖野〇〇 音響　石神保 舞台監督　〇〇信夫
メモ

プラグインのadvanced gutenbergをインストールしたwordpressで、advanced tableを呼び出して作った表です。

セルを結合するには
1.結合したいセルをシフトキーを押しながら選択。
2.表の編集ボタンをクリック
3.Marge Cellsをクリック

これだけで、セルが結合される。

下がこの表のHTML(途中まで)

　ここで、4行目、width:”25%”を書き足しています。これで、一列目の幅が全体の25%になります。クラシックエディターでのやり方と同じですが、クラシックエディターでは、二列目にも75%をいれて、全体で100%になるようにしていますが、ここでは、一列目にいれただけできちんと表現できています。(これは未検証です。本当は必要なのかもしれません。)
　とりあえず、これでセルの幅、罫線の幅と色、バックグラウンドの色、セルの結合という、やりたかったことは全て可能になりました。
　その上、このまま、「再利用ブロックに追加」することが出来るので、雛形として他の記事への転用がきくようになります。
　クラシックエディタで作った表の場合は、一旦「グループ化」して、それを「再利用ブロック」にすることはできたのですが、他の記事でそれを使おうとすると「クラシックエディタ」扱いになってしまうようです。それでは、wordpressがクラシックエディタのサポートを終えた時にどうなってしまうのか不安です。
　advanced gutenbergを導入することで、それらの不安は解消することができました。