WordPressプラグインでGutenbergのReactコンポーネントを再利用する

数日前、DavidはReactを紹介する一連の4つのブログ投稿を完了しました。 そこで彼は、WordPressでユーザーインターフェイスを簡単に作成するためにReactを使い始める方法を説明しました。 具体的には、この一連の投稿のパート2で、Davidは開発環境を準備する方法と単純なReactコンポーネントを作成する方法を説明しました。 今日は、独自のReactコンポーネントを作成するだけでなく、既存のコンポーネントを再利用することをお勧めします。

GutenbergがWordPressに登場して以来、JavaScriptとReactフレームワークはWordPress開発スタックの重要な部分になりました。 そのため、これらのテクノロジーに慣れていない場合は、できるだけ早く習得する必要があります。 そうし、Reactを使用してプレミアムプラグインを完全に再コーディングしました。 これは、Reactコンポーネントですでに持っていたすべてのユーザーインターフェイスを変換することを意味しました。

プログラマーは車輪の再発明をすべきではなく、ソフトウェア開発の世界では常に少ないほうが多いので、今日はWordPressで既存のReactコンポーネントを再利用する方法を見ていきます。

WordPressに含まれているReactコンポーネント

WordPressは、Gutenbergの@wordpress/componentsパッケージを通じて、開発で再利用できる80を超えるReactコンポーネントを提供します。

ここGutenbergプロジェクトのGithubにある各コンポーネントフォルダーには、各コンポーネントのJavaScriptソースコードとそのCSSスタイル、およびそれらをいつどのように使用するかを知るためのドキュメントがあります。

Nelioで新しいReactインターフェースに使用したコンポーネントの中で、ボタンを定義するためにButtonとButtonGroupを強調表示する価値があります。 CheckboxControl 、 InputControl 、 NumberControl 、 RadioControl 、 RangeControl 、 SelectControl 、 TextControlなどのフィールドとオプションのすべてのコントローラー。 または、タブ付きインターフェイスの場合はTabPanel 、フローティングダイアログModal場合はPopoverです。 そしてもっとたくさんあります…

これらのコンポーネントを最初から開発する必要がある場合でも、プレミアムプラグインの新しいReactインターフェイスをプログラミングしていることは間違いありません。 既存のコンポーネントを再利用することは、時間を節約するために開発者としてできる最善のことです。 また、GutenbergがWordPress用に提供しているものは、プラグインに最適です。

WordPressReactコンポーネントを再利用する方法

Reactで開発されたインターフェースでボタンを使用したいとします。 グーテンベルクの既存のコンポーネントのおかげで、次の例に示すように、 Buttonコンポーネントを直接使用できます。

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

ボタンの場合、グーテンベルクコンポーネントを使用する必要はなく、代わりに<button>タグを直接使用する必要があるのではないかと思うかもしれません。 そして、あなたは正しいでしょう。

ただし、グーテンベルクButtonを使用すると、ボタンのCSSスタイルがWordPressインターフェイスの他のボタンと同じになります。 また、コンポーネントとそのスタイルが更新された場合、WordPressのほぼすべての新しいバージョンで発生したことであり、開発者は何もする必要がありません。 グーテンベルクButtonを更新する責任はあなたにありません。 あなたがあなた自身のボタンを使用したならば、それはあなたが世話をしなければならない何かです。

既存のGutenbergコンポーネントを再利用するには、このコンポーネントが存在するかどうかを確認し、 @wordpress/componentsパッケージを介してコードにインポートする必要があります。 上記のコードスニペットでわかるように、このパッケージからButtonコンポーネントをインポートしました。 また、プロジェクト内でパッケージを使用できるようにするには、ターミナルでコマンドnpm install @wordpress/componentsを使用してパッケージをインストールする必要があります。 しかし、これはすでにDavidの投稿で説明されているので、これについては再度説明しません。

これらのコンポーネントがWordPressスタイルを使用するには、PHP関数wp_enqueue_styleを使用してWordPressにエンキューするときに、CSSスタイルファイルの依存関係としてwp-componentsを設定する必要があることに注意する必要があります。

あなたのニーズがグーテンベルクによって提供されたそれらのReactコンポーネントによってカバーされていない限り、車輪を再発明してそれらを使用しないでください。 既存のコンポーネントを再利用することの利点は、独自のコンポーネントを使用するよりもはるかに大きくなります。

グーテンベルクのReactコンポーネントストーリーブック

グーテンベルクの目新しさの1つは、Githubで見つけることができるストーリーブックです。 Storybookは、コンポーネントを個別に開発および表示するためのサンドボックスを提供するオープンソースツールです。 WordPressの場合、特にコンポーネントのドキュメントとして機能します。

グーテンベルクストーリーブックに含まれているさまざまなオプションの中で、プレイグラウンドメニューからブロックエディタを試すことができます。 しかし、最も興味深いオプションは、グーテンベルクのコンポーネントのドキュメントをわかりやすく表示できるようにすることです。

[コンポーネント]メニューを開くだけで、WordPressが@wordpress/componentsパッケージを通じて提供するコンポーネントのリストが表示されます。 各Reactコンポーネントを調べて、完全なJavaScriptコードを使用した使用例を確認できます。

たとえば、次のスクリーンショットでは、ボタンが持つ可能性のあるさまざまなプロパティを持つButtonコンポーネントの例を示しています。 次に、[ストーリー]タブに、完全な例のソースコードがあります。

さらに、一部の特定のコンポーネントには、コンポーネントのプロパティを変更し、それらがインターフェイスで引き起こす変更をプレビューするための[ノブ]タブ内のオプションが含まれています。

これらのコンポーネントの1つは、テキストフィールドを追加するために使用されるTextControlです。 次のスクリーンショットでは、コンポーネントのラベルを非表示にしたり、ラベルとヘルプの両方のテキストを変更したりするためのさまざまなオプションを備えた[ノブ]タブが表示されています。 したがって、コンポーネントが変更によってどのように見えるかを確認し、Reactインターフェースでどのように使用するかを決定できます。

@wordpress/componentsパッケージのすべてのコンポーネントがストーリーブックに完全なドキュメントを持っているわけではないため、Githubのコンポーネントパッケージセクションに移動して、GutenbergのReactコンポーネントのステータスの最新バージョンを確認する必要があります。

ただし、Gutenberg Storybookのドキュメントが完成するにつれて、開発者にとってますます興味深いものになります。 WordPressにこのタイプのドキュメントがあるのは贅沢です。 その有用性は議論の余地がありません。

GutenbergのReactコンポーネントがWordPress開発に提供できるすべてのものをすでに見てきました。 車輪の再発明と独自のベースコンポーネントを開発する代わりに、最初にグーテンベルクのReactコンポーネントを見て、WordPressインターフェースの残りの部分との一貫性を実現し、開発とメンテナンスの時間を節約します。 ソフトウェアの再利用は、WordPress開発者としてより効率的になるための鍵です。

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