WordPressでコンテンツを書く時はブロックを使いますがWordPress標準でついているものだけだと「自分のしたいことができない！」という場合が出てくるときがあります。テーマによってはいろいろな追加ブロックがあったり、あるいはブロック用のプラグインを入れたりすることで思ったようなブロックが使えるようになる可能性もあるんですが「いくら探してもない！」というようなとき、オリジナルブロックが作りたくなりますよね（よね?）。
クリックされると表示する黒塗り編集がしたかった
あるホームページでコンテンツを書いていて「クリックされると表示する黒塗り編集（装飾？）ってないのかな？」と思ってテーマやプラグインを探してみたのですがなかったので「これはオリジナルブロックを作るしかない！」と思いました。※ もしかすると探し方が足りなかっただけかも…あるようでしたら教えて下さい😅
イメージとしては学生さんがよくやる「赤シートを使った暗記方法」のようなものです。WordPressで似たようなことができたら面白いなぁと。
思いついたのは2022年11月頭ぐらいでした。そこからいろいろ紆余曲折を経てたくさんのことを学びました。そしてオリジナルブロックを作るとても良い勉強法を知ったので皆さんにシェアしたいと思ってブログを書くことにしました。
勉強1：gutenprideを元に黒塗り編集ができるものを作った
よく分からない中で検索をしていて偶然 gutenpride というものを発見した、つもりでした。 ※ 今少し事情が分かってきて見てみるとたまたまその名前を使っているだけであったのでした
参照したページはこちらです。
この「ブロックの作成 チュートリアル」 にある手順の通りにすすめてとりあえず自分のローカル環境のWordPressに gutenpride というプラグインを入れることができました。
今まではPHPやJavaScript（jQuery）などを使っただけでカスタマイズなどをしてきたのですがどうやら
開発環境 を作らないといけない、ということが分かって焦りました。しかし、上記のドキュメントの通り進めて（WordPress環境はすでに構築済みだったのでスキップ）なんとかできたという次第です。
自由にいじれる環境ができたので、わからないなりにいじってどうにかこうにかとりあえず「黒塗り編集ができるなにか」ができあがりました😅。
こんな感じで「黒塗り」を指定して保存すると↓のように表示されます。
1603年 徳川家康が江戸幕府を開く。
1637年 島原の乱
1687年 生類憐れみの令制定される
クリックすると隠された部分が表示されるようになります（クリックしてみてね！）。
一応…できました。しかし、まだまだ不十分です。動きは思った通りではありますが
- 編集画面で選択済みの時、編集用のアイコンが変わらない（他のものは適用済みが分かるように変化する）
- 黒塗りをやめるときの選択がしにくい（クリックしたら指定部分が選択された状態にしたい）
- ブロックの形で作ったがこれはブロックではなく編集の追加なので不要なコードが入っている
- そもそも表側のJSの設定方法はこれでいいのか？
というような不満や疑問があります。
そもそも使われている技術 Node.js,ES6,JSXあたりについての知識がとても少ないので見よう見まねのコーディングで不安しかありませんでした。これはちゃんと勉強しなくては…と思いました。
勉強2：WordPress Meetup に参加した
Node.jsのことなどを検索して調べたり、書籍を見に行ったりしたのですが「分かる気がしない…」と焦ってきました。ある程度はわかるのですがES6、JSX…React などいろいろな用語があって混乱しました。WordPressでオリジナルブロックを作っている人と話せないかな？と思いました。そして、久しぶりにWordPressのMeetupに参加してみました。
第15回 二子玉川 WordPress Meetup@東京都市大学 二子玉川夢キャンパス
こちらのイベントに参加しました。
久しぶりにWordPressのMeetupに参加してWordPressのことをいろいろ話せたのは楽しかったです。オリジナルブロックを作っている！という人には出会えませんでしたが主催の方がいろいろお話ししてくれて私の混乱している用語のことについて説明していただいたため、少し光明が見えて気がしました。
またWordPress関連の人たちも同じように悩んで混乱されている方もいるということを聞いて「私だけじゃないだ…」と少し安心しました。
勉強3：Progateで言語の勉強をする
Meetupでそれぞれの用語の大枠はつかめたので「勉強しよう！」という気持ちがさらに高まりました。いろいろ検討した結果
Progateというサービスを見つけました。プログラム初心者が勉強するWEBサイトのようなのですが、無料でできる部分を試してみて「絵も可愛いし、わかりやすいし…学びたいものが全部ありそうだからやってみよう！」と思いました。月額500円でいつでもやめられるので覚えたらやめればいいと思いました。
結果として1ヶ月で Node.js、React、ES6、JSX について勉強することができました！
内容はとても簡単ですが、自分で手を動かしてコードを打って、間違えたら修正できて、打ったコードがどのように動くかを見せてくれるのでとてもわかりやすかったです。
これである程度「訳が分からない…」から脱せた気がします。
勉強4：カスタムブロック道場！すごい！
ある程度はつかめてきたのですがやはり「実際にWordPressのカスタムブロックを作ったことがある人の話が聞きたい」と思ってイベントを探していました。そして、
こちらのイベントを見つけました！WordPress！カスタムブロック…道場！まさに探していたものです。早速申し込みをしました。このイベントはvol.13だったのですが素晴らしいことにvol.3からvol.12までのイベントの様子を収録したYouTubeがあったのです。
なんて素晴らしい…！もちろん参加する日までこちらのすべての動画を見て、一緒に手を動かしてオリジナルブロックの作成を勉強しました。
これらの動画では、オリジナルブロックの元となるブロックのフォルダやファイルの内容説明を細かくわかりやすく解説してくれています。それだけでなくて エラー解析の方法とデバッグ や 参考サイトの使い方など本当に役立つ内容がたくさんでとてもありがたいコンテンツとなってます。
それだけでなく動画を見ながら「あぁVsCodeってこんな風に使えるのか」と思ったり「HTMLの新しいタグについて勉強になるなぁ」とか勉強のしどころがとってもたくさんありました。
主催されている Aki Hamano さんは Flexible Table Block というとても便利なブロックのプラグインの作者さんでもあります。（実際すでにこちらのブロックを利用させていただいてました）
また話し方や説明の仕方が穏やかでとても丁寧なので誰でも安心してイベントに参加することができると思います。
残念なことにこの カスタムブロック道場は次回のvol.14で一旦終了となってしまうようですがまだ申し込みは間に合うと思いますので、気になった方は是非参加してみて下さい。（参加できなくてもYouTubeで見ることはできます、きっと！）
オリジナルブロック作成の勉強まとめ
このようにいろいろ勉強をしてきましたが、まだまだ全然分かったとは言い切れないと思います。なのでこれからも勉強を重ねて良いオリジナルブロックを作りたいと思います。とはいえ、最初に作りたかったのはブロックでなくて文字装飾の部分だけなので…その辺もまだ勉強していきたいですね😅
今思い返せば勉強1〜4のすべてが役に立ったと思っています。特にいつもなら勉強1のように自分で分からないながらも何とか形にする、という時点で終わっちゃっていたところが2〜4をしたことで意図したことや意図していなかったいろいろな知識も身についてステップアップできたと思っています。
コメント