Gutenberg Freaks

Gutenbergを読む会 Vol.5 At last…


こんにちは、みみです。我が家はまだ誰も風邪をひいてないのが不思議なほど寒い日が続いていますが、如何お過ごしですか。体調を崩すFreaksの方もチラホラいらっしゃるので皆さんお疲れの出ませんように。

読む会レポートの合間に他の記事を書きたいと思っていたのですが無理でした。其の代わり今回は比較的結構ちゃんとレポートします、たぶん。

以下、公開時に見つけたソースへのリンクを張ったりしていますが、時間の経過で404とかになるかもなので悪しからず。

Gutenberg 7.3 RCがリリース。

ちょうど2日前ぐらいに7.3 RCがリリースされたので其のお話からのんびり始まりました。
https://github.com/WordPress/gutenberg/releases/tag/v7.3.0-rc.1

  • Tableブロックちょっと変わったり色々、細かな調整。
  • プラスボタンが右固定になったぽい。
  • More ブロック(続きを読む)の日本語バグが一応直ったよ。

7.2ではButtonがButtonsになったという変化がありましたが、7.3はそこまで目立った変更は無いかも。

そして、続きを読むブロックのバグ修正は、小さな小さなBug Fixですが、個人的には自分で出したIssueを自分で閉じれて嬉しいです。小さな棘がやっと抜けた快感。

Inputタグのsize属性のバグみたいな仕様?は日本語環境だと周知の事実だけれど、英語環境だと何の問題も無いので、技術力ではなくてそれを説明して受け入れてもらう為の厚かましさがあればよかった(それなら得意)だけなのですが、私的にはGitHubのForkとPRとレポジトリ管理をちゃんと学べたのが何よりの収穫でした(そして其のために迷惑を被った皆様ありがとうありがとう)。そう、必要に迫られないと人はちゃんと憶えないのです(主語が大きい)。

でも怖いなーと思うのは他の言語環境だとちゃんと見えてるか完全にはテストできてないという話があってどこかの誰かにとって改悪になっていないと良いなと願うばかりであります。こんな小さな修正でも色々考えちゃうから、ほんと、これまでのコントリビューターの皆さんへの感謝と尊敬の気持ちを新たにしております(つい語っちゃった)。

@wordpress/base-styles が出来てた

https://www.npmjs.com/package/@wordpress/base-styles

全然知らなかったのですが、2ヶ月前からあったそうなパッケージ。
PRはコレ: https://github.com/WordPress/gutenberg/pull/17883

スタイルに関連する変数がnpmのパッケージ化されたので、使いたい人にはちょっと便利になったかもというお話。私に使う機会は果たしてあるのだらうかという心地で眺めていますが、WordPressの変数が一覧出来るのって意外に便利なシーンがあるかもしれない。その他、wp-srciptsとか@wordpressとかのパッケージの中身をちゃんと見る回をやりたい気持ちがまた強くなってきました。

__experimentalな機能について

とろゆに先生が最近__experimentalてついてるのをよく見かけるんだけど、というお話から判明。__experimentalとか__unstableとか頭に付いたAPIはまだ実験的なものだったり不安定だからね、という意味だよ(意訳)とコーディングガイドラインに書いてありました。
https://developer.wordpress.org/block-editor/contributors/develop/coding-guidelines/#experimental-and-unstable-apis

7.2でリリースされたButtonsの横に追加するaddボタンとかはまさにこれで、__experimentalMoverDirection="horizontal"というのが使われています。
https://github.com/WordPress/gutenberg/search?q=__experimentalMoverDirection%3D%22horizontal%22&unscoped_q=__experimentalMoverDirection%3D%22horizontal%22

仕様がバシバシ変わるし無くなるかもしれないからまだ案件とかでは使えないけれど、将来的にきちんと実装される可能性が高いAPIではありますし中身を見ると面白い発見があるかも、しれない。

フックを使おう

useStateとか使おうね、というお話。React 16.8から追加されたフックのほうを使いましょう、移行していきましょう、ということらしいんだけれど、私はちゃんと理解できていないので、変なこと書かずに公式情報だけ粛々と張っておきます。

フックの導入 – React
https://ja.reactjs.org/docs/hooks-intro.html

Introducing useDispatch and useSelect – Make WordPress Core
https://make.wordpress.org/core/2019/06/10/introducing-usedispatch-and-useselect/

ちゃんと理解しようとするなら、導入以前に書かれたReduxのチュートリアル的なアプリ作ってそれをuseStateで書き換えるとかやってみると良いかもね、という有難いアドバイスをいただいたので、今度やってみます。

render_blockがバリやばい

魔法のフックだそうで。
https://developer.wordpress.org/reference/hooks/render_block/

先日リリースされたキタジマさんのsnow monkey editorプラグインの、権限による制限機能ができるアツいやつはこのフックで書かれています。多分この辺。
https://github.com/inc2734/snow-monkey-editor/blob/16f2f1ef04c91fd5ab4a190fbedb5cae5bb44d8e/snow-monkey-editor.php#L41


いつもより頑張って書いたけど、コレでも網羅出来ていない情報量よ…そして、てっぺん回って大分経ってからの

コレって何してるの?
https://github.com/gambitph/Stackable/blob/f87f671bc3a840af1887db5e68fad8b7c275a38f/src/block/divider/edit.js#L161

という質問から高階関数、カリー化、関数型の講義が始まったのですが、とてもじゃないけど解説できないので自力で調べてください。Qiitaとかの情報はだいたい間違っているそうなので気をつけて。

そう、とうとう読みましたよ!

というわけで、Vol.5 にしてとうとう読みました。いや初回にも濃い目のウォークスルーはしたのですが、なんかちゃんと読んだな、という感じは今回が初めてではないだろか。そしてやっぱり読むと気付きが多いのか、皆さんの動きが違う気がしますね、なんか速攻思いついた機能追加してた人とかまでいらっしゃいましたし。私でさえブログを速攻起こしているし。

ただし、読む会だけでなく、なんの集まりでも大抵、てっぺん回ってからが本番みたいな話の濃さのアンバランスはどうにかなりませんかね。面白さと寝不足との戦いなのか、眠いから面白くなってしまうのか。

 そんな今回ご参加の皆様。ナオキさんもいらっしゃったのですが撮りそこねたゴメンナサイ!


この記事を書いた人