こんにちは、みみです。

WordPressコミュニティに入ってからお見かけした、大分とイッてらっしゃる（※ 最上級の褒め言葉です）なあと常々思っていた方々にお声がけして、「Gutenbergを読む会」を始めてみました。

発端は、とろゆにさんのTwitter。

うだうだ Gutenberg のソース読んだり、ドキュメント読んだりするのやろーぜー。Zoom アカウントんでw

— Toro_Unit（山の上のとろゆに） (@Toro_Unit) July 18, 2019

なので私はとろゆにさんの背中をどーんと押して、ついでに面白がってくれそうな人を引きずり込んだだけのよく分かってない人間なのですが、まあこれがほんとに心底楽しかったので、ちょっとだけお裾分け記事を書いてみます。

ウォークスルーから始めよう

私はここのところほぼソースを触っておらず完全に浦島太郎状態でして兎も角ウォークスルーをしてほしいとの我儘を快く聞き入れてくださって、とろゆにさんによるGutenbergの簡単な構造説明からスタート。

Gutenbergのディレクトリ構成

Gutenbergのソースはこちらから。

というわけで、とろゆに無双によるウォークスルーを越えた解説が始まったんですが、なんとかメモれたのが以下となります。私が知ってるGutenbergじゃないんですけど、っていうのがてんこ盛り。

• bin : コマンド周り shellスクリプト
• docs : ハンドブックのやつ →コレ
• lib : 中身ほぼPHP。WordPress関連。重要。
• packages : こいつが肝。ブロックエディターの本体。 この中のディレクトリ一個一個がパッケージ。個別にバージョニングされていて、バラバラに動く？流行りのモノレポ。 モノレポについてはCapitalPの記事などをどうぞ。
• phpunit : テストフレームワークのライブラリ。実際のテストコードは別。
• playground :「こんにちは、新エディターです」のサイトのやつ
  • https://github.com/VanOns/laraberg
  • https://ja.wordpress.org/gutenberg/
  • https://wordpress.github.io/gutenberg/
• test: 実際のテストコード。でも他の場所にもテストコードは散らばってる（なんで？）
  • test/native : React Nativeを意識している。WordPressアプリとかで使われている？中は空？放棄されてる？ ？
• vendor : composerの中身が入る場所。PHP版node_modulesの中身的な。落としたばかりは.gitignoreだけ
• wordpress : いわずもがな
• CONTRIBURING.md : ここから読み始めると良い。
• package.json : この中身もかなりイッてる。wp-scripts 知っておくと幸せになる？
• post-content.php : ブロックのデモのソースコード。Gutenbergプラグインを入れた時に投稿に追加された気がする（Twenty Twentyだったかも）

その他、

wp_enqueue_scriptは使わない方がいいよという話

参考：Writing Your First Block Type

register_block_type を add_action( ‘init’ ); で。

withなんとかのはなし

• withSelect は無くならないけど、useSelect にしたほうがいいよ。
• https://make.wordpress.org/core/2019/06/10/introducing-usedispatch-and-useselect/

とかとか、それウォークスルーちゃうがなという話もボロボロ、ワイワイ、ズブズブと深夜まで話散らした愛すべき酔狂なみなさまがこちらです（若干名入れ替わりあり）。ご参加ありがとうございます！

いやはやコンテクストが分かってる心地よさって大事だよやっぱり。

次回までに、最新の公式のガイダンスに従って、環境構築をしてくるのが宿題だよ！次回もお楽しみに！