WordPressのグーテンベルクの背後にある技術を習得するためのリソース

開発者がWordPressで直面しなければならない最大の課題の1つは、新しいブロックエディターの背後にある新しいプログラミングパラダイムに適応するために知識をリサイクルすることです。 グーテンベルクの主な変更点は、使用されるテクノロジーの新しいスタックです。 通常、WordPress開発者は、主にPHPを使用してプラグインを作成し、マイナーな部分はJavaScriptで記述されています。 現在、主要なツールはJavaScriptであり、プラグインとテーマの構造を作成するための単なる基礎としてPHPを残しています。

これは事実ではなく、PHPはまだWordPressで長い道のりを歩んでいると思われるかもしれません。 変更は常に受け入れるのが難しいので、私はあなたを責めません。 しかし、私はあなたが間違っていると思います。 JavaScriptはもはやWordPressの未来ではなく、現在です。 そして、あなたが自分の立場を維持したいのであれば、あなたは今それを理解する必要があるでしょう。

幸い、JavaScriptを深く学ばなければならないと言われていますが、そうではないと思います。 チュートリアルで教えられる最低限のことを知っていれば十分です。 この記事全体で説明するリソースのおかげで、グーテンベルクのために開発を開始するために必要な他のすべてをすばやく学ぶことができます。

JavaScriptを学ぶ

新しいプログラミング言語を学ぶとき、最初に知っておく必要があるのは、その構文を理解することです。 この方法でのみ、それを使ってプログラミングを開始できます。 これを行うと、作成を開始する準備が整います。

これまでJavaScriptで何もしたことがない場合は、次のチュートリアルをさまざまな形式で行うと、始めるのに役立ちます。

• JavaScript言語の基本：ビデオ形式のZacGordonによる無料コース。
• JavaScript 30：この無料コースでWes Bosと一緒に30日間、毎日チャレンジして学びましょう。
• JavaScriptの再紹介：MozillaのスタッフによるJavaScriptの簡単な紹介。
• 猫のためのJavaScript：猫のユーモアのあるタッチを使ったJavaScriptのもう1つの紹介。
• Exercism.io：JavaScriptで演習を行い、メンターが評価するためのソリューションをアップロードできる無料のWeb。
• JSBooks：あなたが本で学ぶことを好む人の一人なら、ここにあなたは無料でそれらの多くを持っています。

逆に、JavaScriptの使用経験がすでにある場合は、関数に関する高度な概念、promiseとasync / awaitを使用した非同期実行、つまりESNextに関連するすべてを学習して知識を広げてください。

1日のJavaScriptトレーニングは、WordPressブロックエディター上で開発する必要があるものに関連するすべてのことを簡単に進めるための基本的な知識を習得するのに十分すぎるはずです。

ReactとReduxを学ぶ

JavaScriptに加えて、WordPressブロックエディターで開発するには、ReactとReduxの特定の概念が必要になります。

これは誰もがあなたに言うことですが、真実はそうではないということです。 ReactやReduxの知識がなくても、グーテンベルクのために開発することができます。 もちろん、それらがどのように機能し、何に使用されるかを知っているなら、それはより良いでしょう。

React、そして何よりもJSX

避けられないのは、JSX構文がReact内で要素を作成するためにどのように機能するかを知ることです。これを使用して、コンポーネントのインターフェイスを定義します（Gutenbergブロックまたはエディター内のビュー）。

ProductコンポーネントとShoppingListコンポーネントのインターフェイスを定義し、それらをGutenbergブロックで使用するとします。 標準表記では、Gutenbergが提供するwp.element.createElement()関数を使用して、次のように行います。

一方、 render()メソッド内でJSXを使用する場合、これはHTMLに似た表記法にすぎず、次のようになります。

JSXを使用すると、コードがはるかに単純で読みやすくなるため、コンポーネントの記述と再利用が簡素化されます。 ご覧のとおり、前の例では、JSXの処理方法を知っているだけで、Reactをまったく知らずにReactコンポーネントを作成しており、それを超能力のあるHTMLであるかのように使用しています。 さらに、グーテンベルクの既存のコンポーネントを使用することもできます。 公式ドキュメントにもリンクされているこのビューアでそれらを見ることができます。

問題は1つだけです。 JSX表記が最終的にすべてのブラウザーが解釈できる通常のコードに変換されるように、Babelを使用してコードをトランスパイルする必要があります。 ただし、WebPackを使用して自動的に実行できるため、これはドラマではありません。

アプリケーションのステータスを維持するためのRedux

一方で、おそらくReduxについて聞いたことがあるでしょう。 これは、JavaScriptアプリケーションのステータスを保存および管理するためのツールです。 繰り返しになりますが、使い方を学びたい場合は、これらのWes Bosビデオをお勧めしますが、必須ではありません。

独自のデータストアを作成する必要がある場合は、Reduxでは作成しませんが、Gutenbergに含まれている@ wordpress/dataパッケージを使用します。 このパッケージは内部でReduxを使用していますが、それは問題ではありません。 また、少なくとも初期段階では、おそらく必要のない複雑なユースケースについて話し合っています。 だから今のところそれを忘れてください。

NPM、WebPack、Babel、PostCSS、およびESLint

JavaScriptとReactとJSXの基本的な概念に加えて、WordPressにすでに存在する新しい時代のために、開発者のタスクがはるかに単純で高度に自動化されるように、次のテクノロジーを知る必要があります。

• NPM：JavaScriptの依存関係マネージャー。 必要な依存関係を定義し、 npm installを実行してそれらをインストールするだけです。
• WebPack：JavaScriptバンドラー。 最初に設定するのは簡単ではありませんが、一度設定すると、JavaScriptファイルの管理作業（トランスパイル、ミニファイなど）が容易になります。
• Babel：今日この言語の次のバージョンの構文を使用できるようにするJavaScriptコンパイラ。
• PostCSS：Babelと同じですが、CSSスタイルシート用です。
• ESLint：JavaScriptの使用法とスタイルのエラーを検出するため、コードの記述中にそれらを回避できます。

これらのテクノロジーのほとんどについては、ここですでに説明しました。 ただし、すぐに別の記事を書き留めて、WordPress開発プロジェクトに統合して実際に使用できるようにする方法を説明します。

グーテンベルクの新しいブロックを作成する方法

それでは、最も重要な部分、つまりWordPressエディター用の新しいブロックの作成を開始するために必要なものに移りましょう。

独自のブロックの作成を開始するために最初に必要なことは、関数wp.blocks.registerBlockType()をマスターすることです。 この関数に関する最も完全なドキュメントは、公式のグーテンベルクガイドにあります。

この関数の引数は、一意である必要があるブロックの名前を持つ文字列と、ブロックの構成を持つオブジェクトです。最も重要な部分は、ブロックのsave関数とedit関数です。 これについては、この記事ですでに簡単に説明しました。

これが複雑すぎると思われる場合は、 create-guten-blockと呼ばれるAhmadAwaisツールキットの使用を開始できます。 これにより、最初のブロックを作成するために必要なすべての依存関係を持つフォルダー構造が作成されます。 次のビデオでその使用法に関するチュートリアルを見ることができます。

最後に、これでも複雑すぎると思われる場合は、最後の1つのオプションを利用できます。 確かに、プラグインAdvanced Custom Fields（略してACFとも呼ばれます）をご存知でしょう。 このプラグインを使用すると、JavaScriptの知識がなくても、グーテンベルクのブロックを作成できます。

しかし、私はあなたにそれを説明するつもりはありません、私はマウリシオ・ゲルベスにそれをさせます。 WordPress.tv（スペイン語）ですでに持っているWordCamp Zaragoza 2019で、このテーマに関する彼のプレゼンテーションを確認してください。

WordPressでブロックエディターを拡張する方法

新しいブロックを作成することに加えて、グーテンベルクでできることは他にもたくさんあります。 たとえば、Gutenberg内にプラグインを作成して、エディターの右側に必要なすべてのオプションのパネルを追加できます。 これについての最もよいことは、公式のWordPressドキュメントに、そこでできることの具体的な例を含むこの完全なチュートリアルが含まれていることです。

これに加えて、既存のブロックに新しいスタイルを追加したり、ブロックにカスタム設定を追加したり、ブロックを削除または非表示にしたり、エディターで使用できるブロックのカテゴリをフィルタリングしたりして、WordPressエディターを拡張できます。

ここにある開発者と設計者向けのグーテンベルクハンドブックにある公式ドキュメントを参照することをお勧めします。 たくさんの情報があり、これはあなたが利用できる最高のリソースの1つなので、気楽にやってください。

UnsplashのChristianFregnanによる注目の画像。