Gutenberg Block Editor だとさ
Page No.3
plugin Simplistic Prism Highlighter Loader custom block
これは、コードを表示するブロックなので、当然、<pre><code> でラップされた要素ということになる。
まぁ、これがしかし、簡単そうで実に苦労したのですよ。”Block validation failed” エラーとの戦い。そして試行錯誤の繰り返し。
結局、→ Github で wp.blockEditor.PlainText を使う方法を見つけて解決できたのですけれど。
まずは php 部分から。
そして javascript ファイル。
これも指定できるパラメータは、InspectorControls を使ってサイドバーにて設定できるようになってる。
今のところ、自作の custom block はこれだけ。
なお、この prism.js highlighter 用のブロックは、私のレンタルサーバーで使ってみたところ(このページのコード部分は全てこれを使ってます)、「更新に失敗しました。 返答が正しい JSON レスポンスではありません」のエラーが出てしまいました。で、試しに標準装備の code block でもやってみたところ同様のエラーが排出されてしまいます。なので、これは block 自体の問題ではなく、サーバーの WAF によるものです。念の為、サーバーの WAF のログを確認したところ、しっかりと我が ip によるログが残ってました。これの対処法はネットで検索すれば教えて下さってるサイトがすぐにみつかります。.htaccess に自ip を無視する記述をするだけです。以下のよう。言わずもがな、ip(***.***.***.***) は自己 ip アドレスを入力するということ。
で、このあと、新しい投稿を書いていて気がついたのだけれど、標準付属のブロックの中に <dl> タグが無いのではなかろうか?と。よくわからないけれどなぜ無いのだろうか?
なければ作りたくなるというもので、さっそく作ってしまった。これは innerblock を使えばよさそう、と言うことで以下のよう。
innerblock は本家Gutenberg Handbook Tutorials にある雛形ほぼそのまんま。子要素の dt、dd においてもほぼ基本的なもの。
一つの即時関数にまとめて入れているのだけれど、切ったり貼ったりしてやっていると指定している引数と仮引数の順番が違ってしまっていた、なんてことになっていた。当然のこと、これは対応している物同士が同じ順番にないとエラーとなってしまう。基本的なことではあるけれど、思わぬところではまってしまうということもあるので・・・。
ということで React なんだそうだ。独自のカスタムブロックを作ろうとするなら、なにはなくとも React を勉強しないといけないということになる。
しかし、いざ、それに取り掛かろうとするにしても、どうにも気が乗らないのは、React を使うには、やれ Babel だの JSX だの webpack だのというもろもろが関わってくることである。React を一般的な感覚にあわせて使おうとするならば、それらが必須なのだそうだ。もはや jQuery でさえ、なるべく使わないようにして、プレーンな javascript でまかなおうと考えていたりするのに、そんなにいくつものライブラリに頼らないといけないということに、逆行というのかなんとも矛盾を感じてしまう。などなど考えていると、本当にこの React というものが必要なのだろうかと、気が重くなってきてしまい、どうにもぐずぐずとしてしまうわけなのである。一時的なものなのでは?とか、さほど大きくないページなのに?とか、先んじた ES6 の書式にしても結局 Babel にてわざわざ ES5 に戻されるのであれば、現時点においてそれを使う必要があるのか?とか、そもそも windows に Node.js を入れたくないということもあるしで、どうにもベクトルは否定的な方へと向かってしまうのである。それらを使うことによってより高速化ができるということなら、全く迷うことはなく、なんとかしてそれらを利用しようとはするのだけれど。Virtual DOM を謳う React ではあるけれど、個人のページや巨大でもないフォームページにおいて、はたしてどれだけ有効なものであるのか、余計なものを介する分、逆に負荷としての存在にしかならないような気がしてならない。
まぁ、ブロックエディタ自体が管理画面の投稿ページにおいてのことではあるし、速度的なことよりもシステムの作りやすさとか、実際のページの表示に近づけるとか、といったことにより重きをおいた選択なのだろう。
などと思うのではあるけれど、良く知るためには関わってみるしかないわけで、なんとか取り掛かって、少し覗き見てみると、それらのライブラリは必須ということではなく、本流のやり方からは外れてしまう少数派になってしまうのかもしれないけれど、無理して使わなくても ES5 でも書けるということがわかってきた。
つづく・・・> 「 Gutenberg Block Editor 自作その2 – id指定 」
そしてさらに・・・>「Gutenberg Block Editor 自作その3 – form編」
Post : 2020/09/03 17:39