Node.jsを使用してGutenbergの外部でWordPressブロックを操作する方法

WordPressブロックエディターは、このプラットフォームでコンテンツを作成する方法に関連するすべてを変更しています。 WordPressの新しいリリースがブロックに関してもたらす多くの目新しさがあり、将来にはまだ長い道のりがあります。

このため、開発プラットフォームとしてWordPressを使用する開発者は、ブロックを使用することにますます快適に感じるはずです。 ただし、PHPからJavaScriptベースのテクノロジーに飛躍するのは難しい場合があります。

とにかく、あなたはあなたのスキルを更新しなければならず、新しいWordPress開発スタックを恐れてはいけません。 私たちがそれに慣れることが早ければ早いほど、私たちが革新しなければならない機会が増えます。

今日は、WordPressエディター内にいなくてもGutenbergブロックを操作する方法を見ていきます。 なんで？ いくつかの理由で…

最初のそして最も明白なのは、私たちができるからです。 しばらくの間、Gutenbergエディターでのコアブロックの定義は、個別のコードパッケージとして利用可能でした。 これは、NPMパッケージマネージャーのおかげで、WordPressの外部でそれらを使用できることを意味します。

さらに、ブロックを管理して操作するための一連の機能があります。 そして、それらは独自のパッケージにも含まれています。 したがって、標準のWordPressブロックを使用する場合は、これら2つのパッケージを依存関係としてプロジェクトにインポートするだけで済みます。

これを実現するには、プロジェクト用のフォルダーを作成し、 npm initを実行してプロジェクトデータを含むpackage.jsonファイルを作成してから、次のコマンドを実行してこれら2つの依存関係をインストールする必要があります。

 npm install @wordpress/block-library @wordpress/blocks

次のステップは、実行したいコードでindex.jsファイルを作成することです。 このコードは、サーバー上で実行されるJavaScriptのバリアントであるNode.jsで記述されています。 今日の例では、 index.jsのコンテンツは次のようになります。

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

上記のコードに表示される最初の2つのステートメントは、依存関係をインポートするためのrequireステートメントです。 前に言ったように、標準のWordPressブロック定義をインポートしたいと思います。 これはrequire('@wordpress/block-library')で行います。 このパッケージからregisterCoreBlocks関数のみをインポートするため、等式シンボルの左側でその関数を非構造化します。

同様に、 @wordpress/blocksパッケージを依存関係としてインポートします。 このパッケージは、ブロックを操作する機能を備えたパッケージです。 パッケージには多くの関数が定義されていますが（ここにあります）、この例では、 createBlockで新しいブロックを作成し、 serialize化して文字列に変換し、WordPressの投稿のコンテンツに保存できるようにします。

依存関係がインポートされたので、 registerCoreBlocks関数を呼び出します。この関数は、標準のWordPressブロックタイプの定義をロードして、それらを使用できるようにします。 それ以降、ブロックを作成できますcreateBlock関数を呼び出すと、作成するブロックのタイプの名前とその属性を持つオブジェクトをパラメーターとして渡すことがわかります。

前の例では、段落ブロックを作成するので、 'core/paragraph'という名前を渡し、属性オブジェクト内に、作成する段落のコンテンツをcontentキー内の文字列として渡します。

最後に、 serialize関数を呼び出して、作成したばかりのブロックを渡します。 その結果、 console.log関数で出力できる文字列が作成されます。

これで、ターミナルでnode index.jsと入力して上記のコードを実行できます。 これを行うと、次のようになります。

実行中にエラーが発生しました！ その理由は、定義されていないwindow変数を使用可能にする必要があるためです。 しかし、この変数は何であり、なぜそれが必要なのですか？

Windowは、ブラウザが定義し、ブラウザウィンドウ自体を表すJavaScriptオブジェクトです。 ターミナルでコードを実行しているため（または、本番環境で実行されている場合はサーバー上で）、上記の変数を備えたブラウザーはありません。 これは、ブラウザの外部でWordPressブロックを使用できないことを意味しますか？ もちろんそうではありません！

Node.jsには、ブラウザー環境でコードを実行していることをシミュレートできるパッケージがいくつかあります。 この場合、browser-envパッケージを使用します。 WordPressパッケージで以前と同じようにインストールする必要があります。

 npm install browser-env

index.jsファイルに、 browser-env依存関係をインポートするための新しいrequireを追加する必要があります。 ただし、必要なmatchMediaメソッドが付属していないため、 windowオブジェクトを「修正」する必要があります。 次のコードをコピーしてindex.jsファイルの先頭に追加すると、問題は解決します。

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

これでコードを再度実行でき、コードが失敗せず、 createBlock関数を使用して作成した段落ブロックのテキスト表現が返されることがわかります。

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

このGitHubリポジトリにすべてのコードがあります。 エディターの外部からブロックを操作する可能性は非常に大きいです。 ブロックを作成し、クローンを作成し、別のタイプのブロックに変換するなど、さまざまなことができます。

WordPressエディターの外部でブロックを操作できることで、WordPressのコンテンツを操作し、どこからでも操作できるようになります。 これは、私たちが探求し始めたばかりの開発者に大きな可能性の世界を開きます。

私たちネリオはすでにこれらの可能性を利用しています。 間もなく新しいサービスを開始しますので、とてもおもしろいと思います。 今後数週間でリリースされる予定のニュースにご期待ください。

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