2023/10/20 に開催された WordCamp Tokyo 2023 のサイドイベント（非公式）WordPress Mini Contributor Day (ミニコントリビューターデイ） (2023/10/20 13:30〜)に参加した記事になります。
開発環境の準備
Gutenberg のリポジトリをフォークする
https://github.com/WordPress/gutenberg
Cloneする
フォークしたリポジトリをCloneするgit clone git@github.com:{your-repository-name}/gutenberg.git
必要であればnode.jsのインストールする
node のバージョンはv16が推奨
メモ
Node Version Manager でインストールのが良いそうです。
ちなみに私は nodenv でプロジェクトごとにnode管理をしています。
他には以下の方法があります。
- Node.js の公式サイトからインストール
- HomeBrewでインストール（Macのみ）
最近は、Voltaが便利なようです。（使ってないので何が便利なのかはわかりません。）
node modules をインストールする
npm install
ローカル環境でWordPressを立ち上げる
cloneした Gutenberg のリポジトリでは wp-env でローカルサーバーを立ち上げることができます。
※ wp-env は Docker を使用しますので、Dockerのインストールする必要があります。
Dockerが使える環境が整ったら以下のコマンドでWordPressのローカル環境が立ち上がります。npm run wp-env start
開発をする
ブランチを作成する
ブランチ名は以下のページを参考にすると良い。
- add/ = 新機能の追加
- try/ = 実験的な機能、一時的な追加
- update/ = 既存機能の更新
- remove/ = 既存機能の削除
- fix/ = 既存の問題の修正
https://ja.wordpress.org/team/handbook/block-editor/contributors/code/git-workflow/#%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%AE%E5%90%8D%E5%89%8D%E4%BB%98%E3%81%91
あとは開発を頑張る
ビルドする
以下のコマンドで自分の修正が自動でビルドされます。npm run dev
Issueを対応していく
以下にたくさんのIssueが上がっているので対応する。
https://github.com/WordPress/gutenberg/issues
初めてのプルリクエストの場合は以下の Good First Issue のラベルのものを対応していくのが良い。（比較的簡単なIssueについてるラベル）
https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Issue%22
今回のイベントで手をつけたISSUEです。
https://github.com/WordPress/gutenberg/issues/53560
メモ
packages の中に Gutenberg の部品がたくさん入っているので、その中のjsを修正していく。
gutenberg/packages at trunk · WordPress/gutenberg
以下のディレクトリーはよく見るらしい
* block-directory
* block-editor
* e2e-tests
プルリクエストを送る
Issueの対応が終わったら、フォーク元にプルリクエスを送ります。
- 修正したら commit する
- フォークして持ってきた自分のリポジトリにPushする
- Githubのページでプルリクエストを作成する（truncブランチにプルリクストする）
今回のイベントで送ったプルリククエストです。
#53560 change button property “isSmall” to “size” on navigation menu-title by tkc49 · Pull Request #55503 · WordPress/gutenberg
おまけ
Storybook を見れるようにする
npm run storybook:dev
コメント