Gutenberg Freaks

Gutenbergを読む会 Vol.06

こんにちは、みみです。

今回から、まだ絶賛開発中ではありますが、gutenbergfreaks.jpにてレポートしていきます!というわけで、今回も愉快なフリークスの参加メンバーはこちら。

ハネムーン3日目ぐらいの人が居る気がするのですが、多分気の所為

ふっと気がつくと当日だったのでさてはて、何やろっか?となりまして。

解らないことリストを眺めてみる

解らないことリストとは、Gutenberg Freaksのnotionにある、Gutenbergのソースを見たりしていて???と思ったことをとりあえず書き出すリストです。ALL CLEANになったらこの会は終了かもね、と嘯いているのですが果たしてそんな日は来るのか。そんなリストを久しぶりにみんなで眺めることにしました。

TemplateOptionsは今

このリスト、最近はそんなにチェックできておらず、主に11月頃にわーっと書き出したメモだったりするので、書いた当人も何が分からなかったのか最早憶えていなかったりするものも多いのですが、其の中にあった、

InnerBlocksの__experimentalTemplateOptions

というだけの走り書きから、これってなんだ?となりまして皆でそれを探すためにコードを漁り始めるところからスタート。深い沈黙が数分間。本気で読み始めると誰も喋らなくなります。そういう意味でも一般公開しずらいコンテンツなんだよなあこれ…。

で、結論から言うと、これは正に、前回の読む会で話に出たばかりの__experimentalな機能だったので、開発が進んで、すでに名前が変わっているようでした。

https://github.com/WordPress/gutenberg/commit/ae327b22d6c1fd563290fbc304ea977b1f71480e#diff-6c0d284327f6cf946242e1eb31e926c7

このコミットで block-pattern-picker というコンポーネントに置き換えられて、

https://github.com/WordPress/gutenberg/tree/ae327b22d6c1fd563290fbc304ea977b1f71480e/packages/block-editor/src/components/block-pattern-picker

さらに block-variation-picker というコンポーネントになってるぽい。

https://github.com/WordPress/gutenberg/tree/feed14ac384266b0ffe0740e1e99f0eb7d0c30f7/packages/block-editor/src/components/block-variation-picker

こうやって、いつの間にか増えたり消えたり名前が変わったりしている関数やコンポーネントがぽこぽこ。Gutenbergは今年も次のフェーズに向けて絶賛開発中なのです。

Reduxとは

続いて話題になったのは、Reduxの話。が、私は状態管理のフレームワークってぐらいのふわっとした理解しかしていないので、粛々とリンクを貼るのみにしておきます。

Redux入門【ダイジェスト版】10分で理解するReduxの基礎 – Qiita
https://qiita.com/kitagawamac/items/49a1f03445b19cf407b7

イメージで覚えるReact + Redux

カスタムブロック開発をがっつりやるのであればReduxを理解しないと壁にぶつかるので、がんばりましょう(白目)。

ちょっと記憶が曖昧なのですが、Reduxの話になったのは、確かStackableというプラグインの話からだったような気がします。Stackableもかなりよく出来たカスタムブロックのプラグインなので触ってみるが吉。

フリークスのフリークスによるフリークスな開発小噺3連発

ここから、特に意図してなかったのですが、結果的に変態的な開発小噺が三連発。なんだけど、ケラケラ笑って聞いてしまって、ちゃんと書き留めれてなくてふわっとしたご報告でお許しください。

1. ブロックエディタで帳簿を作ってみた

…一通り説明してもらった後でも、何故それをWordPressで???という疑問が消えないのですが、要はブロックエディタでもカスタムフィールド製造業的な開発は可能だよ、というお話、でした。それやっちゃいかんって話をこの間のWordCampでしてた気がするんだけどまあ、取り敢えず山が見えたから登ってみた的なアレですね。

2. Focusとの戦いは続く

カスタムブロック開発に勤しむフリークスな皆さん、最近よく話に出るのは、ともかくFocusの扱いが面倒くさい、という話。

特にインライン編集の機能を入れようとすると、どうしてもFocusとの戦いがあるそうな。ポップアップして選択させるような動きを取ろうとするとFocusの管理が大変なので、最終的に無理矢理ハックしたよ、というお話。

皆さんがお気に入りのあの機能もこの機能も、そんな試行錯誤から出来上がっています。

3. スタイルをradioでハック

スタイルとは、編集画面のサイドバーに出てくるブロックのスタイルのこと。ブロックに複数のスタイルが設定されていると、ここに各スタイルのプレビューが出るのですが、そこの表示が気に食わない(ちゃんと設定しているスタイルを反映してくれない)ので、パネルごと消して、オリジナルのスタイルパネルを作成し、radioOptionsの中身をHTMLで組んで、追加されるCSSを当てる処理を突っ込んで実現しました、というお話。

…改めて書き出してみても、中々エグいことしているなあこの人達(感を私が再現し切れてないのは痛感していますごめんなさい)。

WordPressのFigmaについて

その後も他愛もない開発小噺をあれこれとしていた中から何の話からだったか忘れたのですが、Figmaの話になりまして、Figmaは良いぞという話をつい私が熱弁してしまったのですが、フリークスな皆さんにはあまり響かなかった模様。

でも、WordPressのデザインも今はFigmaでガシガシ作られていて、次のデザインやモックアップもぽこぽこ仕上がってきているので、是非覗いてみると良いと思います。以下のページにWordPressのFigmaについての紹介があるのでチェックしてみてください!

さて、次回はWordCamp Asia直前開催の予定です。やっぱりAsiaの話になるのかなあ。お楽しみに。

Posted in