Gutenberg Block Editor 自作その3 - form編
Page No.2
Select Block – non-JSX
そして select のブロック。
select ブロックは専用の label は持っているが親は無しで、Fragment を使った。インラインスタイルも無し。親ボックスは無しなので、エディター右サイドバーの「高度な指定」の id と class は select タグ自体に指定できるもの。故に、この select タグにおいては、name と id 属性を違うものにできるけれど、ほとんど意味はないので、これといった理由があるわけではない。
select タグにおいて、最も違うところは複数の option タグを内包するということ。
単純に指定された文字列から動的に文字列としてタグを生成して props.attributes の content としてデータの受け渡しをさせ、select タグの子要素とすれば簡単に出来そうなのではある。けれど、これだとその文字列による option タグたちは、出力の際に createElement によってエスケイプされてしまい、タグとして機能してはくれない。
これに関しては、RichText を使うことであっさりと解決する。props に保存された文字列で生成された option タグたちでも、RichText で子要素に指定してやれば、ちゃんとタグとして機能してくれるので、それならばこの方法でも良さげに思われる。
別の方法もあるかな。あらかじめ ループによる createElement で 生成した option タグたちを配列に入れておいて、子要素としてその配列を指定してやれば、期待した結果が得られた。ただ、処理の重複をさけるために、props にその生成した配列データを保存させることも可能ではあったけれど、そうすると、その createElement による配列データも props.attributes なのでブロックのデータとしてコメントデータの中に保存されてしまう。これがなかなか重ばって気になってしまう事になる。
しかしかといって、props を介さないと、たとえ更新された props.attributes に設定された値を使って生成された content だとしても、edit においては再描画されない。これはどうしたものか?と考えつつ、色々試していると結果的にこのやり方において機能してくれた。ただ、ちゃんとしたやり方というのがありそうではある。non-JSX においては情報が圧倒的に少なくてよくわからず、自分で考えるしかないのである。問題が出たならまた考えて対処するだけのことである。
ちなみにこのブロックも自的には input と同じ即時関数に textarea と共に入れている。
Form InnerBlocks
最後は、input やら select などの form 要素をまとめる親ブロックとしての form ブロック。まぁ、なんてことはない、action や method などの form の属性を指定することができる InnerBlocks てことで。
ただ、form タグは他の文書的に意味があったりレイアウトとしての意味があったりするタグとはちょっと趣が異なると思う。そのせいなのか、他の innerblock の入れ子にすると、エディター内で選択できなくなってしまうよう。この点、いまだ検討中。
と、いうことで以上である。
で、そのブロックたちを使っているのが下のサンプル。まぁ、なんてことはなく、出来て当然といえば当然のことではある。ふぅ~!
これでいいかな、と思いつつ、一つ気にかかっているものがあったのだ。
それは span タグのブロックが無いということと、label タグを単独で使えないということ。それらのタグを選択できるブロックがあればいいのだけれど・・・。と、いうことで、それは3ページ目へと続く。
Post : 2022/03/17 19:20