The Block Developers Cookbookとは？
https://blockdevelopercookbook.com/recipes/
ブロックの練習できるレシピ集です。WordCamp Asia 2024のワークショップ枠であったらしいです。
同僚のtoro_unitにおすすめしてもらい上から順番にやってみました。これ全部理解して書けたらカスタムブロック作れると言っても過言ではないらしいですよ。
レシピは9つで難易度は様々
私が挑戦したときはレシピは合計9つありました。
ブロックスタイルをつけたりするような簡単なやつから、最新のIntaractivity APIを使ったスライダーまでレベルは様々。
時々掲載順が変わるので「あれ…これやってないのに前にある……」がちょくちょくあります。
スキルレベルで難易度が表示されていますが、実際動かすコードなんかはすでに入っていることが多かったです。（例：Simple Fade-in EffectのフェードインするJSの実装など）
だからって提示されてるコードをコピペして「わー動いたー」じゃやったことにならないので、ファイル開いてこれなにしてるんだろうなーとかここがこの動作を担ってるんだな、とか調べながら進めました。
なので、大体の目安時間が書いてありますが全然その時間では終わらなかったです。
調べながら書いていたメモはzennにおいています。
https://zenn.dev/chiilog/scraps/345b7e5324f1b1
セットアップとかは悩まなくてOK
レシピそれぞれスタンドアローンで動かす用の npx のコードがあります。環境用意するの面倒だし…という言い訳は通用しません。
なお、リポジトリ単位で落としてくる方法もあるので、この辺は好きな方を選択したらいいと思います。
それぞれのレシピの感想
せっかくなのでそれぞれのレシピを軽く振り返ってみようと思います。
Custom Image block style
これはお馴染みのやつです。ブロックにカスタムスタイルを追加する方法。
こちらはプラグインで追加されてますが、私はブロックスタイルはテーマの領域だと思っているので、いつもテーマのfunctions.phpに書いて作業してます。
Block Transforms
ブロックの変換をつくるレシピ。普段全然使わないので実際の作り方に触れられてよかったです。
特定の言葉を入れてエンター押したらブロックに変わるとかいうマジックもやりました。これ使い所どこなんだろう？と思いながらも面白かったです。
Editorial Notes
ブロックにメモを残す機能です。表示側には出ないですが、管理画面でブロック選択すると表示されます。
複数人で更新するメディアとか校正する必要がある記事とかだと嬉しい機能なのかなあと思いつつ、既存ブロックにこういう機能を生やす方法があるんだなあと思うなどしました。
Customize the build process
これはブロックというよりビルドまわりのレシピ。
getWebpackEntryPoints を使うと複数のブロックのエントリーポイント書かなくてよさそうというまなび。このビルドは既存のブロックどうこうというよりカスタムブロックたくさん作るとかのときに特に有効な気がします。
Simple Fade-in Effect
カバーブロックにフェードインのCSSを追加できるようにするレシピ。
WP_HTML_Tag_Processor 使ってすべてのカバーブロックがスクロールに応じて下からふわっとフェードインしてくるようなアニメーションがつきます。
ブロックにクラスつける自体のコードは大したことないけど、フェードインのコードの方が気になってしばらくJSファイルの方を調べてました。
Creating a custom format
書式APIのレシピ。選択範囲にabbr タグがつけられるようになります。
この書式APIのは汎用性が高い（inline-blockを使えるようにしたいとかでよく使う）ので、カスタムブロック作るよりこっちのほうが実は重要なんではないかなーと思ったりしています。
現状、スライダーとかタブとかそういう機能面で拡張しないといけないようなものを除いてパターンでかなり解決できるものが増えているなというのが体感としてあるので、書くならこっちの方が増えそう……かな…？
Word Counter
全ブロックで使ってる文字数のカウントをするレシピ。
やってるとなんかカウントが合わないな…？って思ってたんですが、これは英文が前提となっているので、オプションつけて日本語対応する必要がありました。
以外といろんなドキュメント見たのこのブロックかもしれません。
Post Meta Testimonial Block
カスタムフィールドと連携するブロックのレシピ。
多分仕様通りなんだろうとは思いますが、パネルからカスタムフィールドを表示しているとうまく更新できない罠がありました。
まだあまり調べられてませんが、カスタムフィールドもBlock Bindings APIでブロック作らなくても使いやすくなるのかな…？
Interactive API Gallery Slider
今回一番目玉なレシピ。その分時間かけました。
package.jsonに start: 'wp-scripts start --experimental-modules', 追加し忘れて（正確にはformatコマンドに足してた）ずーっと動かない動かないってブチギレて困ってました。動かないときはpackage.json から見直してみましょう。（自戒）
そしてこのレシピ地味に誤字あったり途中でJS側だけ関数名変わったりしてる罠があるので単にコピペしてると詰みます。これはこれでいい練習になるかな。
見てたら気づくけど、ぱぱっとコピペして進めてると気付かないかも。（これには気づくのにpackage.jsonには気付かないのかとか言わないで）
Interactivity APIは6.5で新搭載になったAPIなので、公式のドキュメントもじっくり見ながら進めました。
難しそうだなとドキドキしてたんですが、ドキュメントしっかりしてるし思ったよりとっつきやすそうだなと思いました。食わず嫌いよくない。
API使ってどうこうっていうより、そもそも動作のロジック考える方が時間使いそう。
ブロック作りたいならこれをやればOK！
一通りやってみて、カスタムブロックに挑戦してみたいならこれを一通りやるといいと思います。Interactivity APIまで網羅してるのがつよい。
もくもく会とかで同士を募って一緒にわいわいやるのも楽しそう。
最初にレシピ通りに進める→ここをこうしたかったらどうする？とかアレンジしてみる、とかですごく力がつくと思います。繰り返しやるのもよさそう。
私は次はInteractivity APIを使ってタブを作ってみようと思ってます。またzennでメモしながら進めます！