@ wordpress/scriptsを使用してGutenbergエディターにボタンを追加する方法

ほぼ1年半前、Antonioは、プラグインを新しいWordPressブロックエディターに適合させるときに直面した問題の1つを説明するこのブログ投稿を書きました。 彼のチュートリアルの結果は次のようになりました。

幸運にも不幸にも、グーテンベルクは今年半で大きく変化しました。 開発スタックは拡大および改善されており、プラグインおよびテーマの開発者は新しいテクノロジーを採用して適応させる必要がありました。 そして、私たちの経験について書き、私たちが学んだことを共有する私たちの人々は、あなたが最新の状態に保つことができるように、私たちのチュートリアルを更新するように「強制」されています。 しかし、私たちはそれについて満足しています！

数週間前、読者の1人であるIvanが、Antonioのチュートリアルに助けを求めるコメントを残しました。 どうやら彼はアントニオのプラグインを実装することができませんでした。 そして、正直なところ、最近状況が大きく変わったので、これは私を驚かせません。 だから、Ivanと私たちを読んでWordPressについて学び続けたいすべての人を助けるために、WordPressが提供するすべての新しいツールを利用してGutenbergブロックエディターにボタンを追加する方法に関するチュートリアルを再作成しましょう！

プラグインを作成する

最初にやらなければならないことは、WordPressプラグインを作成することです。 これは非常に簡単です。 基本的に、私たちがしなければならないのは、プラグインに付けたい名前（ gutenberg-buttonなど）でwp-content/pluginsにフォルダーを作成し、その中に同じ名前と。のファイルを作成することだけです.php拡張。 次に、プラグインファイルに次のコードを入力します。

それでは、前のスニペットの機能を詳しく見てみましょう。

• まず、 <?phpタグを開きます。 ここに驚きはありません。
• 次に、このメインファイルに複数行のコメントを追加します。 コメントには、「キー/値」のペアを含む数行が含まれています。 たとえば、プラグインの名前（ Plugin Name ）、そのバージョン（ Version ）、または作成者の名前（ Author ）を指定する方法を確認します。 この情報はすべて、WordPressのプラグインセクションに表示されます。
• 最後に、いくつかの定型コードを追加します。
  • namespaceを指定します（ここで名前空間について説明しました）、
  • ファイルが実行される場合は、WordPressの一部として実行されることを確認します。
  • プラグインに関するいくつかの定数を定義します（これは後で役立ちます）。

これをすべて行った後、WordPressのプラグイン画面に移動すると、 Gutenbergボタンが表示されます。

それをアクティブにして…出来上がり！ 確かに、それは何もしませんが、それはすでにそこにあります。

JavaScriptプラグインの開発

今日、WordPress開発者はJavaScriptに習熟している必要があります。 これは、グーテンベルクが核心にあることの結果の1つだと思います。 そして、このチュートリアルも例外ではありません。

環境の準備

Gutenbergインターフェースに新しいボタンを追加する場合は、この機能をJavaScriptでコーディングする必要があります。 それでは、プラグインでJavaScript開発環境を準備しましょう。 これを行うには、コマンドラインから次のコマンドを実行するだけです（実行するときは、 wp-content/plugins/gutenberg-buttonにいることを確認してください）。

 npm init

指示に従ってください：

 This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (gutenberg-button) version: (1.0.0) description: Adding a formatting button in Gutenberg. entry point: (index.js) ...

このプロセスの結果は、 package.jsonファイルです。 すぐにわかるように、このファイルは将来非常に役立ちます。

この投稿のタイトルですでに明らかにしたように、プラグインを作成するために@wordpress/scriptsを使用します。 それでは、次のコマンドを実行して、依存関係として追加しましょう。

 npm install --save-dev @wordpress/scripts

このコマンドは、プラグイン内（ node_modulesの下）に多数の依存関係をダウンロードし、 package.jsonを変更して、 @wordpress/scriptsが開発依存関係になったことを明確にします。

このパッケージのドキュメントを見ると、ビルド、構文の検証、コードのフォーマットなどを行うための多くのスクリプトが含まれていることがわかります。

 { "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "format:js": "wp-scripts format-js", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:md:docs": "wp-scripts lint-md-docs", "lint:md:js": "wp-scripts lint-md-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "packages-update": "wp-scripts packages-update", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

それでは、 package.jsonファイルを編集して、 "scripts"セクションに推奨されるすべてのコマンドが含まれるようにします。

すべてが機能することを確認する方法…

プロジェクトのルートにsrcフォルダーを作成し、その中にindex.jsファイルを追加しましょう。 これがプラグインのメインJavaScriptファイルになり、すべてのコードが含まれます（メインファイルがsrc/index.jsである限り、コードを自由に整理できます）。

次のステートメントindex.jsを追加して、期待どおりに機能するかどうか試してみましょう。

 console.log( 'Hi!' );

npm run buildます。 これにより、コードがブラウザーで実行できるものに変換され（現在は実際には必要ありませんが、数分で完了します）、 buildフォルダー内に新しいスクリプトが生成されます。

今やらなければならないのは、WordPressにこのスクリプトが存在することを伝えてロードできるようにすることだけです。 これを行うには、プラグインのメインファイル（ gutenberg-button.php ）を開き、最後に次の行を追加します。

 function enqueue_script() { wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', [], GUTENBERG_BUTTON_VERSION ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

注意を払うと、WordPressに新しいスクリプト/build/index.jsをブロックエディターリソースとしてエンキューするように指示していることがわかります。 このように、ユーザーがブロックエディターにアクセスすると、スクリプトはエディターに含まれるアセットの一部になります。

それでは、これをチェックしてみましょう。 WordPressダッシュボードに移動し、投稿を編集して、ブラウザーのJavaScriptコンソールを確認します。 期待どおりに進んだ場合は、「こんにちは！」と表示されます。 コンソールに書かれています：

チュートリアルを複製して、グーテンベルクにボタンを追加します

さて、JavaScriptコードを記述し、 npm run buildできることを確認したので、Antonioのチュートリアルを複製します。 そして、これは、親愛なる読者、非常に簡単です。

src/index.jsファイルを開き、前のconsole.logステートメントを次のように置き換えます。

ご覧のとおり、これはアントニオが数か月前に書いたコードとほぼ同じです。 主な違いは、グーテンベルクの関数とコンポーネントにアクセスするためにグローバル変数wpを使用しなくなったことです。 代わりに、 importステートメントに依存するようになりました。 しかしそれ以外はほとんど同じです。

コードを記述したら、 npm run buildだけで、それだけです。 これで、グーテンベルクにボタンがあります。

テキストを選択してボタンをクリックして、機能することを確認しましょう。

さあ、コンソールにテキストが再び表示されます。

依存関係に関する最後の注意…

buildフォルダーの内部を見ると、 @wordpress/scriptsがindex.jsファイルを作成しただけでなく、 index.asset.phpファイルも作成していることがわかります。 このファイルは、次の2つのプロパティを持つ小さなオブジェクトを定義します。

• プラグインに必要な依存関係（つまり、WordPressスクリプト）のリスト
• ビルドバージョン

スクリプトが正しく実行されることを確認したい場合は、WordPressでスクリプトをキューに入れるときに、これらのプロパティの両方を使用できます（使用する必要があります）。 これを行うには、 gutenberg-button.phpに戻り、以下に示すように変更します。

 function enqueue_script() { $asset = include GUTENBERG_BUTTON_PATH . '/build/index.asset.php'; wp_enqueue_script( 'gutenberg-button', GUTENBERG_BUTTON_URL . '/build/index.js', $asset['dependencies'], $asset['version'] ); }//end enqueue_script() add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\enqueue_script' );

includeステートメントを使用してindex.asset.phpにオブジェクトをロードし、依存関係のリスト（ [] ）を実際の依存関係に置き換え、ビルド番号をプラグインのバージョンとして使用するだけです。

結論

本当に便利なWordPressプラグインを作成するのは難しいです。 JavaScriptがどのように機能するかをよく理解し、WordPressが持つすべてのリソースに精通している必要があります。 しかし、 @wordpress/scriptsパッケージのおかげで、JavaScript開発環境の準備と、WordPress内で実行できるJavaScriptプラグインの構築がこれまでになく簡単になりました。

今日の投稿が気に入っていただけたでしょうか。 そして、いつものように、どこかで行き詰まったり、質問がある場合は、コメントを残してください。私たちがお手伝いします。

ちなみに、ここにプロジェクトへのリンクがあります。必要に応じてダウンロードしてテストする準備ができています。 プロジェクトのクローンを作成し、 npm installし、 npm run buildして、試してみてください。

UnsplashのAshimD'Silvaによる注目の画像。