WordPress開発者としてグーテンベルクに貢献する方法

公開: 2019-03-01

多かれ少なかれ気に入るはずですが、WordPressのブロックエディターであるGutenbergがここにいます。 良いことは、オープンソースであるため、好きなように変更できることです(方法を知っている場合)。

さらに、エディターで解決する必要があると思われるエラーを見つけた場合は、それを報告するか、自分で解決して変更をアップロードし、すべての人がその恩恵を受けることができます。 これにより、あなたはプロジェクトとあなたの良いカルマの改善に貢献するでしょう。

グーテンベルクでコンテンツを書く
グーテンベルクでコンテンツを書くのはとても自然なことです。

グーテンベルクの基本コードに貢献するために従うべき手順を知っていますか? おそらくあなたの答えはノーです。 同じことが私にも起こり、私はそれを調査しなければなりませんでした。 そこで、プロセス全体をより簡単かつ迅速に理解し、開発者として独自のコードを使用して(必要に応じて)グーテンベルクの改善に貢献する方法を説明します。

やるべきことや改善すべきことはたくさんありますが、WordPressブロックエディターで見つけた問題を解決するのに役立つのはあなたの指先です。

グーテンベルクの発展に貢献するためのステップ

始める前に、Gitについての知識が最小限であり、GitHubアカウントを持っていることを前提としています。 そうでない場合は、アカウントを1つ作成し、このチュートリアルを参照して基本を学習してください。

グーテンベルクのフォークを作成する

最初に知っておく必要があるのは、GutenbergのソースコードがこのコードリポジトリのGitHubでホストされていることです。 プロジェクトの進化はそこで行われます。

WordPress用のGutenbergのGitHubリポジトリ。
WordPress用のGutenbergのGitHubリポジトリ。

これは、WordPressプラグインとしてGutenbergコードがある場所です。 プラグインの新しいバージョンごとに、安定したバージョンのコードベースが次のバージョンのWordPressコアに転送されます。 そして、それが進むべき道です。

Gutenbergリポジトリにコードを提供するために、最初に行う必要があるのは、GitHubアカウントにフォークを作成することです。 これを行うには、前の画像で確認できる右上隅に表示される[フォーク]ボタンをクリックします。

これにより、GitHubアカウントに、WordPressの公式のものと同じ機能とコードを備えたリポジトリが作成されます。 しかし、それはあなたが管理するアカウントにあるので、あなたはコードを変更し、あなたがそれでやりたいことを何でもするためのアクセス権を持つでしょう。 基本的に、あなたはコピーを持っています。

リポジトリのクローンを作成する

これで、オリジナルに接続された独自のGutenbergリポジトリができました。 それをあなたのコンピュータにダウンロードして、それに取り組む時が来ました。 これを行うには、ターミナルを開き、次のコマンドを実行します。

 git clone https://github.com/your-user/gutenberg.git

your-userをGitHubで使用しているユーザー名に置き換えることを忘れないでください。 これにより、コンピューター上にgutenbergフォルダーが作成され、GitHubリポジトリのすべてのコンテンツがローカルにダウンロードされます。

新しいブランチを作成する

新しいフォルダにアクセスすると、リポジトリのマスターブランチ(またはメインブランチ)に表示されるすべてのものが含まれていることがわかります。 このブランチに変更を加えてはいけないので、Gutenbergコードを変更する前に、新しいブランチを作成する方法を見てみましょう。

Gitのブランチが何であるかわからない場合は、この記事を読むことをお勧めします。 とにかく、これから行うことについては、Gitのブランチが、リポジトリのコードで行った変更を分離して、特定の順序を維持する方法であることを知っておく必要があります。

新しい機能を追加したい場合は、これから行うことを識別する名前の新しいブランチを作成し、そこで機能を開発します。 終了し、変更したコードがすべて安定したら、そのブランチをメインブランチ(マスター、覚えておいてください)とマージできます。これで完了です。

新しいブランチを作成してリポジトリにアップロードするためのGitコマンドは次のとおりです。

 git checkout -b fix/clone-block git push -u origin fix/clone-block

これにより、 fix/clone-blockブランチが作成されます。 何をするかに応じて名前を変更することを忘れないでください。 グーテンベルクの寄稿者ガイドによると、 [type]/[change]のように、接頭辞と説明を付けてブランチの名前を使用する必要があります。

通常、適切なプレフィックスは次のとおりです。

  • 新しい機能をadd/追加
  • テスト目的のtry/実験機能
  • 既存の機能をupdate/更新します
  • 問題をfix/修正する

たとえば、 fix/clone-blockは、ブロックのクローンを作成するときに修正を提案することを示します。

コードに変更を適用する

これで、最も気に入ったエディターでファイルを開いてプログラミングを開始する準備が整いました。 しかし、それを行う前に、いくつかのことを知っておく必要があります…

まず、すべてのグーテンベルクのコードは、あなたが尊重しなければならない特定のスタイルガイドに従います。 コードの記述方法の具体的な詳細は、ここで説明されています。

Gutenbergスタイルガイドで定義されているJavaScript文字列を記述するためのルールの例。
Gutenbergスタイルガイドで定義されているJavaScript文字列を記述するためのルールの例。

CSS、JavaScript、およびPHPにはルールがあります。 これらのルールを順守してください。そうしないと、公式リポジトリでコードを受け入れるときに問題が発生します。

参考までに、私の場合、wp.blocks.cloneBlock()を使用してブロックのクローンを作成するときに、ブロックの属性でwp.blocks.cloneBlock() lodash.cloneDeep()関数を使用して、コピーが詳細に行われるようにしました。クローンしたブロックの浅いコピー。 ここで私が行った変更を見ることができます。

新しいブランチに変更をアップロードする

終了したら、変更をコミットしてリポジトリにアップロードする必要があります。 新しいファイルを作成した場合は、最初に次のコマンドを使用してそれらをバージョン管理に追加する必要があります。

 git add your-file

そして今、このコマンドで変更をコミットする時が来ました:

 git commit -am "Use cloneDeep when cloning a block"

最後に、変更をリポジトリにアップロードするには、次のコマンドを使用する必要があります。

 git push

その後、GitHubのリポジトリに移動すると、作成したブランチにアップロードされた変更が表示されます。 完全! もうすぐ着きます…

グーテンベルクリポジトリにプルリクエストを作成する

すでに変更を加えて、リポジトリにアップロードしました。 今、私たちがしなければならないことは、グーテンベルクプロジェクトの管理を担当する開発者に提案された変更の存在について警告することです。

変更について話し合い、Gutenbergコードベースの一部である(または含まない)ことを承認するには、プルリクエストを実行する必要があります。 プルリクエストは、リポジトリのフォークの所有者が元のリポジトリの所有者に対して行うリクエストであり、元のリポジトリの所有者はフォーク内のコミットを組み込むことができます。

これを行うには、Gutenbergフォークリポジトリに移動し、[新しいプルリクエスト]ボタンをクリックします。 これにより、変更を加えてアップロードしたブランチを選択するビューが表示されます。 これにより、元のグーテンベルクリポジトリのメインブランチと比較されます。

公式リポジトリのマスターブランチと、フォークされたリポジトリの変更を含むブランチとの比較。
公式リポジトリのマスターブランチと、フォークされたリポジトリの変更を含むブランチとの比較。

前の画像にあるように、右側のドロップダウンセレクターでブランチを選択すると、GitHubは、元のGutenbergリポジトリに関してこのブランチで行われた変更の概要を表示します。

次に、[プルリクエストの作成]ボタンをクリックします。 これにより、リポジトリでこれらの変更を行う理由の説明情報をテキストに入力する必要がある別のビューに移動します。

次の画像にあるように、すでに記入を求められているコンテンツテンプレートがあります。

Gutenbergリポジトリにプルリクエストを作成するために必要な情報を入力する画面。
Gutenbergリポジトリにプルリクエストを作成するために必要な情報を入力する画面。

基本的に、変更内容とその理由を説明する説明を含める必要があります。 また、コードをテストしたかどうか、およびそれをどのように実行したかを示す必要があります。 必要に応じてスクリーンショットを追加することもできます。

記入方法がよくわからなくても心配しないでください。 グーテンベルクリポジトリの世話をする人々があなたを助けます。

完了したら、[プルリクエストの作成]ボタンをクリックして、プルリクエストが最終的に公開されるようにします。 これで、他のレビュー担当者が確認し、最終的にコードを承認して公式リポジトリにマージするのを待つ必要があります。

この改訂は、多くの要因に応じて多少時間がかかる場合があることに注意してください。 私の場合、ついにプルリクエストが閉じられ、成功しませんでした。 しかし、私はプロセス全体で多くのことを学びました。 そして、レビュアーのコメントは常に前向きで建設的でした。 ここで見ることができます。 しかし、私は仕事を続け、ついにプルリクエストが承認されました!

グーテンベルクに変更が必要なものがあると考え、コードでそれを変更することを楽しみにしている場合は、プロセスがどのようなものかがわかります。 その上、ここで説明したことはすべて、グーテンベルクだけに当てはまるわけではありません。 ほとんどのオープンソースソフトウェアプロジェクトは同じように(または非常によく似て)機能します。

貢献することを躊躇しないでください。 きっとあなたはその過程で多くを学ぶでしょう。

UnsplashMikeErskineの注目の画像